How to modify your widget content

You can easily change your widget content from your tawk.to dashboard. In this guide, we’ll show you how to change the language, edit header and body cards in each state (Online, Away, and Offline), and manage your Pre-Chat form for your chat widget.

2. Select the correct property.

3. Click Administration in the top menu.

4. Click Chat Widget under Channels in the left menu.

5. Scroll down to Widget Content and click Edit Content.

6. On the Widget Content page, your settings appear on the left, and a live preview of your widget is on the right. Here, you can:

- Change the widget’s language
- Enable or disable features such as Live Chat, Knowledge Base, and Video + Voice + Screensharing
- Customize Online, Away, and Offline states, as well as the Pre-Chat form

Your changes take effect immediately—no need to update the widget code on your site.

7. When you’re finished customizing your widget, press Esc or click the close icon at the upper-right corner to exit the content editor. You’ll return to the Chat Widget settings page.

Toggle the switches to enable or disable the channels and add-ons for your widget:
- Live Chat

- Knowledge Base

- Video + Voice + Screensharin

You can customize the widget’s content for each state:

• Online: Visitors can start a live chat
  
  

• Away: Indicates that agents may not be immediately available
  
  

• Offline: Displays a form so visitors can leave a message and contact details

The chat widget is built using cards — modular sections that organize what visitors see in your widget:

• Header Cards appear at the top of the widget and often include your logo, heading, or agent details.
  
  

• Body Cards appear below the header and contain main content such as chat options, Knowledge Base search, or custom text.

Here’s how to customize your cards:

• To add a card, click + Add and choose the card type you want.
  
  

• To edit a card, click the pencil icon beside it. Click Update to save your edits.
  
  

• To show or hide a card, toggle the switch next to the card name.
  
  

• To move a card up or down, click the move icon next to the card name and drag it to the position you want.

Here are the types of cards you can add to the header and body:

By default, the Header Cards and Body Cards contain Heading, Text Area, KB Search, Chat, and Previous Conversations.

See this guide to learn more about editing the Header and Body cards: Customizing the widget header and body cards

Examples:

Under Body Cards, you can enable/disable KB Search, Chat, and Previous Conversations.

The Pre-Chat form helps you gather visitor details before a chat begins. You can ask visitors for their name and email, or other custom information to help your team prepare before replying. To learn more, see this guide: Using the Pre-Chat Form

To enable or customize the form:

1. Click the Pre-Chat tab under Widget State.

2. Click Enable Pre-Chat.

3. Click + Add under Header Cards to add Heading, Logo, or other cards.

4. Click + Add under Body Cards, and select Form. A default form with Name and Email fields will appear.

6. Click + Add Field to add other questions, such as a short text response or a dropdown menu.

7. Preview your form on the right and click Update to save your changes.

• Per-property customization
  If you manage several properties or multilingual websites, remember to customize widget content separately for each property and language.
  
  

• Pre-Chat form impact
  Requiring visitors to fill out a form before chatting may reduce chat volume. Keep the form short and only ask for essential information.
  
  

• Best practices
  Keep messages brief and easy to read. Use clear headings and short text areas so visitors can quickly find what they need.
  
  

• Testing
  Always preview your widget in each state (Online, Away, Offline) and check how it looks on both desktop and mobile devices.

Changing your widget language
Customizing the widget header and body cards
Using the Pre-Chat Form
Changing the appearance of the tawk.to chat widget
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