Customizing the widget header and body cards

Cards make it easy to share a variety of content on your widget. Add a video, form, or even a Knowledge Base search bar. You choose what content your customers interact with. With the right content the tawk.to widget will engage more visitors and make it easy for you to promote relevant content and for visitors find get the help they need. 

To make changes to any of the content that appears as part of your chat widget, make your way to the Administration section of the Dashboard and select Chat Widget from the Channels list.

If you have multiple properties, check to make sure you're viewing the correct one by hovering over the hamburger icon at the top of the Dashboard.

Clicking Edit Content under the Widget Content heading will open a new window that allows you to customize all the content displayed in your chat widget.


The chat widget on the right side of the screen shows how the widget will appear to visitors if you save the changes you've made while editing the widget content.


In this article, we will explain all the different card options how you can add them to your site widget.


You can learn more about customizing your widget and how to add/edit cards here: Modify your widget content

Adding and editing the widget cards

To add a new card, click the + Card button to the right of the Header Cards section of the Content Builder. To edit a card, hover over the card and click the pencil icon to open the editing view.

By clicking the handle on the far left of the widget card, you can move the card in the desired order you wish it to appear. 

Here is a table showing which cards can be added to the widget header and which can be added to the widget body.

Card Header Body
Agent X
Logo X
Heading X X
Text Area X X
Chat X
Image X X
Video X X
Knowledge Base Search X X
Knowledge Base Article List X
Knowledge Base Featured Article X
Previous Conversations X

The Knowledge Base Search card can be used in either the header or the body (not both at the same time).

The tawk.to widget cards

Agents

The Agent card lets you add up to five agent profiles in your widget header and let your customers know who's answering the chat.

When you add an agent, their account profile picture or avatar will automatically appear in the widget.

Keep in mind, you can only add agents that are associated with your account. 

Chat

The Chat card lets you have real-time conversations in your widget. Place the chat at the top or bottom of your Widget body by dragging and dropping the Card.


When you place the Chat card at the top of the widget body, a button appears to prompt a conversation. Edit the button text in the chat card to customize your Call to Action.


Then click the green Update button to save your changes.

When you place the Chat card at the bottom of the widget, visitors will see an open field with placeholder text showing where to start the chat. You can change the default message under Placeholder.


Remember to click the green Update button to save your changes.

KB Featured Article

Set a featured article in your widget and proactively share your best content. The KB Featured Article card allows you to select an article from your tawk.to Knowledge Base and showcase this on the widget in the body section.

First, select the Knowledge Base you wish to connect to. Then find your article in the drop-down menu or use the search function.

If you toggle the button beside, "Open article in KB site," it will open the article in a new browser.

Finally, click the green Save button and you’re done! 

Heading

Add a header to create a bold statement or headline on your widget.

Select the Heading card from the drop down card menu and enter your text and any emojis you choose in the space provided. 

Using the icons, you can choose to align your heading to the left, in the center, or to the right.

You’ll have the option to format your heading text with italics in the card. Simply highlight the text and the option to add italics will appear. 


To change your heading text color, go back to your Chat Widget menu and click Advanced in the Widget Color field under Widget Appearance.

Use the scroll bar to move down the Widget Appearance page. As shown in the menu below, you can customize your Header color (the background) and the Header Text. You can even enter a hex color code to compliment your brand.

Image

You can add an image to your widget Image Card by uploading it directly from your computer or by entering the URL location. 

Using the icons, you can choose to align your image to the left, in the center, or to the right.


The Link URL text box allows you to enter a URL to direct the visitor when they click on that image. If you don't want to re-direct them anywhere, leave it blank. Turn the toggle to the on position (green) to open the link in a new browser. If this option is toggled off, the URL will open directly in your widget screen. 

KB Article List

Share your most popular Knowledge Base articles in the widget, so your customers won’t have to look for the answers.


The Knowledge Base Article List card lets you display up to five articles or categories in your widget. Click to edit the list and select a Knowledge Base article in the drop-down list. Or use the search field to find the article you’re looking for.


If you would like your article to open directly in the Knowledge Base (a separate browser) when your visitor clicks, set the Open article in KB site toggle to the on position (green).

KB Search

The KB Search card lets your visitors get help without even needing to start a chat. It will allow them to easily search your Knowledge Base directly from the chat widget.

First, select the Knowledge Base you want your visitors to search. Once they have found the article they're looking for, you can opt to have them open it up in a separate browser by toggling the Open article in KB site setting to the on position (green).


Please note: the Knowledge Base Search card can be used in the header OR in the body, but not both.

Logo

When you add a Logo card to your widget header, the Property Image from your Overview panel will automatically be added to your widget.

Using the icons, you can choose to align your image to the left, in the center, or to the right.

To update or add a property image, make your way to the Administration section of the Dashboard by clicking the gear icon in the bottom left corner. Then select Overview in the upper left sidebar menu.

If you have multiple properties, check to make sure you're currently viewing the correct one by hovering over the hamburger icon at the top of the Dashboard.

Select the dropdown menu beside your property image and upload your logo or image. 

We recommend an image of at least 512 x 512 for the property. 

Previous Conversations

Add the Previous Conversations card to your widget to enable your visitors to see the last three conversations and dates. Your visitors will also have the option to “See all conversations.”

Text Area

When you create a new widget, the Text Area card appears by default with a welcome message. Keep, replace or modify the message to suit your brand.


To edit the text, hover over the card content block until the pencil icon appears. Then click the icon to open the editing view.


Type or paste your text and any emojis you choose directly into the content field and click the green Update button when you’re done. You’ll have the option to format the text in bold or italic font. You can also add a hyperlink to the text.


Click to choose left, middle, or right text alignment.

Video 

The tawk.to Video card lets you add videos from YouTube, Vimeo, Daily Motion, and Loom to your widget. You can also link to a self-hosted video.


After adding a video card, choose your source and add a link to your video.

You can control the settings for the video display from the inside of your video card. Your display and playback options will depend on your video hosting platform.

Here is a table showing the setting functionality per platform. 

Platform Youtube Vimeo Daily Motion Loom Self-hosted
Start time X X X X X
End time X X
Autoplay X X X X X
Autoplay (mobile) X X X X X
Loop X X X
Mute X X X X
Controls X X X
Branding X
Privacy X
Intro Title X
Intro Potrait X
Intro Byline X
Info X
Logo X

Cards put relevant and interactive content in front of your audience every time they visit your website. Add a card and get more engagement online. All of the cards are included in your free tawk.to account.

Was this article helpful?

8 out of 10 liked this article

Still need help? Message Us