Customizing the widget header and body cards

Cards make it easy to tailor the widget’s content for your audience and your business. Add a video, form or even a Knowledge Base search bar. With the right content, the tawk.to widget will engage more visitors and make it easy for them to get the help they need. 

NOTE: The instructions below can only be completed from a browser or the tawk.to desktop apps. They cannot be completed in the tawk.to mobile app.

To make changes to the content appearing in your widget, select the ⚙️Administration (gear) icon in the upper tab menu. Then, under Channels, select Chat Widget.

Click Edit Content under the Widget Content heading to open a new window where you can customize all of 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.

Note:

Your chat widget updates automatically after saving. No need to update the widget code in your page’s HTML.

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: How to modify your widget content

To add a new card, click the + Card button to the right of the Header Cards section of the Content Builder.

To move a card, click the dotted handle on the left side of the card and drag it into place.

To edit or delete a card, click the pencil icon.

The preview 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.

Once you have your content in place, click the green Update button. to delete a card, click the red Delete button.

To activate or deactivate a card, slide the toggle to the on or off position.

The table below shows which cards can be added to the widget header and which can be added to the widget body.

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

The Agent card lets you personalize your widget header with up to five agent profiles. 

When you add an agent, their account profile picture or avatar will appear in the widget. The agent image will appear in your widget even when the agent is offline.

You can only add agents associated with your account (you can not add an alias image to the Agent card). 

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 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.

The KB Featured Article card lets you showcase a Knowledge Base article on the widget.

First, select the Knowledge Base where the article is published. Then find your article in the drop-down menu or use the search function.

To open the article in a new browser, toggle the "Open article in KB site" button to the on position.

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

To add a bold statement or headline to your widget, select the Header card from the drop down menu and enter your text.

To add italics or a link, highlight the text you wish to format. You can choose left, center, or right alignment. 

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 background color and Text to compliment your brand.

You can add an image to your widget by uploading it from your computer or adding a URL link to an Image Card.

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 link a URL to the image. If you don't want to redirect your visitors, leave this area 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. 

The Knowledge Base Article List card lets you display up to five articles or categories in your widget. Select a Knowledge Base article or category in the drop-down list. You can also use the search field to find the article you’re looking for.

If you would like your articles to open directly in the Knowledge Base when your visitor clicks, set the Open article in KB site toggle to the on position.

The KB Search card lets your visitors search your Knowledge Base directly from the chat widget.

Select the Knowledge Base you want your visitors to search. If you would like your articles to open directly in the Knowledge Base, set the Open article in KB site toggle to the on position.

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

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 align your image to the left, right or center.

To update or add a property image, go back to the Administration section of the dashboard.

Then click on the dropdown menu beside your property image and upload your logo or image.

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

The Previous Conversations card gives visitors a view of the last three conversations and shows when they took place. Your visitors will also have the option to “See all conversations.”

The Text Area card lets you add your own welcome message to the widget.

To edit the text, hover over the card and click on the pencil icon.

Type or paste your text and any emojis directly into the content field. Highlight any text to open new formatting options. You can add bold, italics or a hyperlink to the text. Then choose left, middle, or right text alignment.

Remember to click the green Update button when you’re done.

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.

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

You can control the video display settings directly inside the video card. Your display and playback options will depend on the video hosting platform you use.

Here is a table showing the settings options for each platform: 

Cards put relevant and interactive content in front of your audience every time they visit your website. All of the cards are included in your free tawk.to account.

Need help? Reach out to our support team or schedule a call.