How to modify your widget content

The tawk.to widget is completely customizable so you can edit its design and content to suit your business. 


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 channel 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 complete customization of all the content displayed as part of 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.

Changing the widget language

To change the language of your widget, select one of the 45+ languages available in the top right corner of the Widget Content view.

The Submit button will be automatically translated for the language you choose. Update the form fields and messages with your own translations.

Activate features

Immediately under the Language section, you can activate several features for your widget. These include Live Chat, Knowledge Base and the Video + Voice + Screensharing Add-on.


New features, including a Calendar and Bot, are planned and will be activated in this section when they are available.

Understanding Online, Away and Offline

When a visitor interacts with the chat widget on your site, it can be in one of three states: Online, Away, or Offline.


Your Online view is what visitors see if they click on the chat widget and you have agents ready to answer chats.


Having your widget in Away mode lets your visitors know your agents may not be available to respond to their query. You can switch your widget to "Away" in the top right hand corner of your dashboard (click on your profile icon).  


When the chat widget is Offline, a form will naturally appear which can be customized in this menu so you can capture all the important information and get back to them at your convenience. 


How to customize your content for each Widget State

You can customize what a visitor will see when they click on your widget for each state by making changes to the Heading and Text Area cards in your widget. Simply click on the state you wish to edit (Online, Away or Offline), under the heading Widget State.


You can also add a Pre-Chat form to capture important visitor information when you are online and away.


Learn more about setting up a Pre-Chat form here: Using the Pre-Chat form 

How to customize your widget with cards 

Cards make it easy to add messages and media to your tawk.to widget.


Share a video or image. Add a link to a featured article to your most popular blog post. You can even allow visitors to search your Knowledge Base without redirecting them.

Here’s how to add, move and delete a card:

To add a new card, click the + Add button in the relevant section.
 
When deciding on the content for your widget, you can add up to three header cards and up to 20 body cards.


Move a card by clicking the handle (dots) to the far left of the card block and dragging it into place.

To edit or delete a card, click the edit pencil on the card content block.

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

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

Header and Body Cards

With cards, you have more ways to engage and help visitors on your website.


Some cards can only be used in the header or the body. Other cards can be added to both. 



Card Header Body
Agents 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
Chat History X

Note - The Knowledge Base Search card can be used in either the header or the body, but not both at the same time.

Learn more about what widget cards can do in this article: Customizing the widget header and body cards.

Was this article helpful?

45 out of 51 liked this article

Still need help? Message Us