Help Center | tawk.to | Changing the appearance of the tawk.to chat widget

Changing the appearance of the tawk.to chat widget

The instructions below are for desktops and laptops only.

You can modify the look of your chat widget to align it with your brand identity, making it recognizable to your customers.

Make your widget easy to spot so that customers can easily reach out to you when they need help.

Follow these steps to change the appearance of your chat widget:

1. Log in to your tawk.to account.

2. On your dashboard, select the property for which you want to customize 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 Appearance and click Advanced.

6. On the Widget Appearance page, you can customize your widget’s color, shape, and size for desktop and mobile. Your changes will be reflected in the Desktop widget preview on the right.

Desktop Widget
You can choose between a circular or rectangular widget shape. The circle takes up less space on a page and is ideal if you need something simple that doesn’t disrupt your site design.

Set the widget’s Width and Height. This affects the widget size when it’s clicked on or maximized.

If you select the rectangular shape, you can also set the Minimized Width and Height, and the Top and Bottom Radius.

The Top and Bottom Radius affect the rounded corners of the widget.

Then, set the Desktop Widget Position. By default, your widget appears in the bottom right corner of the page. While this is the most common position, we recommend choosing a position that fits your site design.

Next, enable the Attention Grabber to make your widget stand out. To customize your Attention Grabber, click Gallery.

This is the default Attention Grabber design:

We recommend modifying the Attention Grabber to fit your branding. Choose from the gallery, or click Upload to use your own design.

Note: The Attention Grabber is only for desktops and laptops, and appears only when your widget is online. It won’t appear if your widget is offline.

Mobile Widget
You can set the widget type and position.

Widget Colors
These color settings apply to desktop and mobile.

Header changes the widget’s background, header, and suggested message colors.

Header Text changes the header text's color and the default design's inner section.

Agent Message changes the background color of your agents’ messages.

Agent Text changes the text color of your agents’ messages.

Visitor Message changes the background color of your visitors’ messages.

Visitor Text changes the text color of your visitors’ messages.

7. Preview your widget on the right. Once you’re happy with your settings, click Save. Your chat widget updates automatically after saving. No need to update the widget code in your page’s HTML.

Your brand identity will now be visible to your customers in live chat across 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

Was this article helpful?

1655 out of 2030 liked this article

Still need help? Message Us