How to modify your widget content
You can easily modify your chat widget content on your tawk.to dashboard.
In this guide, we’ll show you how to change the language, edit header and body cards, and enable the Pre-Chat form for your chat widget.
Follow these steps to modify your widget content:
2. On your dashboard, select the property for which you want to modify the widget. Hover over the property name to ensure you’ve selected the correct one.
3. Click the gear icon on the top menu to go to the Administration panel.
4. On the Administration menu, select Chat Widget under Channels.
5. Scroll down to Widget Content and click Edit Content.
6. The Widget Content settings are on the left of the page, while your widget preview is on the right.
Widget State
Your chat widget can be in one of three states: Online, Away, or Offline.
Online
Your visitors can click the widget and start a chat when your widget’s status is Online.
Away
Switching your widget’s status to Away lets visitors know your agents may not be available to respond to their queries.
Offline
When your widget is Offline, a form will appear for visitors to provide their information so you can get back to them at your convenience.
By default, the Header and Body contain cards such as Heading and Text Area, KB Search, Chat, and Previous Conversations. These cards correspond to the sections of your chat widget.
For example:
Under Header Cards, you can set the Alignment and edit the Content for the Heading and Text Area. Preview the widget on the right and click Update.
Under Body Cards, you can enable/disable KB Search, Chat, and Previous Conversations.
Click + Add to add cards. Click the pencil icon to modify cards, and use the toggle switch to enable/disable them.
Here are the type of cards you can add to the header and body:
| Card | Header | Body |
|---|---|---|
| Agents | Yes | - |
| Logo | Yes | - |
| Heading | Yes | Yes |
| Text Area | Yes | Yes |
| Chat | No | Yes |
| Image | Yes | Yes |
| Video | Yes | Yes |
| Knowledge Base Search | Yes | Yes |
| Knowledge Base Article List | - | Yes |
| Knowledge Base Featured Article | - | Yes |
| Chat History | - | Yes |
Knowledge Base Search is only available if your Knowledge Base is set up. It can be used in either the header or the body, but not both at the same time.
To learn more about customizing the header and body cards, click here.
Adding the Pre-Chat form
The Pre-Chat form makes it easy to capture important visitor information before starting a chat. To learn more about using the Pre-Chat form, click here.
To add the form, select the Pre-Chat tab.
A form with the default Name and Email fields will appear in the widget preview. Click the suggested fields to add them to the form, and click the star button to make a field compulsory.
For example, you can add a text area with a question, like this:
Then, click Update. The changes to your widget are effective immediately. No need to update the widget code in your page’s HTML.
7. Click x esc to return to the Chat Widget settings page.
You can modify your widget content anytime to give visitors the best live chat experience.
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