Help Center | tawk.to | Customizing the widget header and body cards

Customizing the widget header and body cards

The instructions below are for desktops and laptops only.

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.

Steps to customize the Header and Body Cards

Click Administration in the left navigation bar.

Click Chat Widget in the left submenu.

Click Edit Content under Widget Content.

This opens the Widget Content editor.

Scroll down to Widget State, where you can select and customize the Online, Away, Offline, or Pre-Chat states. For each state, you can add, edit, remove, and reorder Header and Body Cards.

As you make changes, the Desktop widget preview on the right side shows you how the widget will look before saving. When you save your changes will be applied immediately to the widget on your site.

Click + Add to add new cards to the Header or Body.

To edit a card, click the pencil icon, and make your changes. Then, click Save or Update.

Use the toggle switch to enable or disable individual cards.

Click and drag the six-dot handle beside each card to reorder cards into your preferred order.

Understanding the cards

These are the cards you can add to the Header and Body sections of your widget:

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

Agents

The Agents card allows you to add up to five agent profiles to your widget header. When you add an agent, their profile image will appear in the widget, even if the agent is offline. Only agents associated with your account can be added, and you cannot use an alias image for this card.

Heading

The Heading card lets you add a bold statement or headline to your widget. You can choose the Alignment and edit the Content.

See this guide to learn how to change the heading colors: Changing the appearance of the tawk.to chat widget

Chat

The Chat card lets you have live chat conversations in your chat widget. You can customize labels such as the titles for new and recent conversations, and the call-to-action in the input area.

Image

The Image card lets you add an image to your widget. You can upload an image from your device or enter a source URL. You can also set the Alignment, enter a Link URL, and toggle Open in new window to open the link in a new browser tab.

KB Featured Article

The KB Featured Article card lets you showcase a Knowledge Base article on the widget. Choose an article from the Site dropdown, and enable Open article in KB site if you want to open the article in a new browser tab.

KB Article List

The KB Article List card allows you to display up to five Knowledge Base articles or categories in your widget. Enable Open article in KB site if you want to open the articles or categories in a new browser tab.

KB Search

The KB Search card lets your visitors search your Knowledge Base directly from the chat widget. Customize your call-to-action, and enable Open article in KB site if you want to open the articles or categories in a new browser tab.

Logo

The Logo card adds your Property Image to the widget with alignment options. See this guide to learn how to customize your Property Image: How to change your property image

Text Area

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

Highlight any text for format options (bold or italics) and to insert a link URL.

Video

The Video card lets you add videos from YouTube, Vimeo, Daily Motion, Loom, and self-hosted videos to your widget. You can set the start and end times and toggle autoplay, mute, and other options for your video.

Here are the available options for each video type:

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

Additional considerations

Changes made in the Dashboard affect the widget live on your website without needing to update your code.
If you don't see the changes reflected on your site, try clearing your browser cache or refreshing the page.

How to change your property image

How to modify your widget content

Changing your widget language

Change how the widget behaves on your site

If you have feedback about this article, or if you need more help:

Click the green live chat icon
Schedule a call with us
Visit our community

Was this article helpful?

140 out of 199 liked this article

Still need help? Message Us