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.
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 any of the content that appears as part of your chat widget, make your way to the ⚙️Administration (gear) icon in the upper tab menu.
If you have multiple properties, check to make sure you're viewing the correct one. Hover over the current property name in the upper-left menu to select a new property from the list.
Under Channels, select Chat Widget.
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 upper-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.
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 upper right 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.
|Knowledge Base Search||X||X|
|Knowledge Base Article List||X|
|Knowledge Base Featured Article||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.
If you need further help or if you have questions, reach out to our support team by scheduling a call.