How to modify your widget content

The instructions below are for desktops and laptops only.

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:

1. Log in to your tawk.to account.

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.

Choose the language for your widget. This changes the language of your widget’s menu, action buttons, forms, and labels. To learn more about setting your widget’s language, click here.
Next, you can activate Live Chat, Knowledge Base, and Video + Voice + Screensharing for your widget. Calendar is a new feature that will be available soon.

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.
Customize the content for your widget’s states under the Online, Away, and Offline tabs.

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:

CardHeaderBody
AgentsYes-
LogoYes-
HeadingYesYes
Text AreaYesYes
ChatNoYes
ImageYesYes
VideoYesYes
Knowledge Base SearchYesYes
Knowledge Base Article List-Yes
Knowledge Base Featured Article-Yes
Chat History-Yes
Note:
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.

Click Enable Pre-Chat to activate the form.
Then, click + Add to add Header Cards.
For example, you can add an agent’s profile image, a heading, and a text area in the Header, like this:
Next, click + Add to add Body Cards.
Then, select Form.

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:

Was this article helpful?

429 out of 527 liked this article

Still need help? Message Us