20

Chat Widget Customization

Last Update 12 dagen geleden

Changing the appearance of the tawk.to chat widget How to modify your widget content Changing your widget language Customizing the widget header and body cards Change how the widget behaves on your site

Changing the appearance of the tawk.to chat widget

The instructions below are for desktops and laptops only.

Make the chat widget look and feel like your brand so visitors instantly recognise it and know where to get help. This guide shows you how to access the appearance settings, adjust desktop and mobile options, change colors and the Attention Grabber, preview your changes, and save — all from your tawk.to dashboard.

Steps to change your widget’s appearance

1. Log in to your tawk.to account.


2. Select the correct property.

3. Click Administration in the top menu.

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

5. Scroll 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. Use the live preview on the right to test your changes. When you’re satisfied, click Save. The widget will update automatically on your site — no code changes required.

Desktop widget settings

Shape: Choose circular (compact) or rectangular. A circular shape is less intrusive, while a rectangular shape gives you more space and options. 

Size: Set Width and Height (these affect the widget when maximized). If you picked rectangular, you can also set Minimized Width/Height and Top/Bottom Radius to control rounded corners. 
Position: Pick where the widget appears on the page (bottom-right is the default). Choose a placement that fits your site layout. 
Attention Grabber: Turn this on to draw attention. Click Gallery to choose a ready-made design or upload your own artwork. Note: the Attention Grabber only displays on desktop and only when the widget is online. Learn more here: Enabling the Attention Grabber

Mobile widget settings

Choose the mobile widget type and position so the widget doesn’t interfere with navigation or important buttons on smaller screens. The mobile preview shows how it will appear.

Colors and message styles

These color settings apply to both desktop and mobile previews:

Header: Change the widget background, header, and suggested message colors.
Header Text: Change header text and inner section color for the default design.
Agent Message/Agent Text: Control the background and text color for messages coming from your agents.

Visitor Message/Visitor Text: Control the background and text color for visitor messages. Adjust these so messages are readable and consistent with your brand.

Additional considerations

  • Attention Grabber visibility
    The Attention Grabber appears only on desktop and only when the widget is online. If your widget is set to offline or away, it will not show.

  • Mobile responsiveness
    The widget may adjust its layout on mobile to avoid covering navigation or other UI elements. Test on several devices and screen sizes.

  • Conflicts with site styles
    Custom CSS or scripts on your site can sometimes interfere with the widget’s position or appearance. If you use custom site styles, test thoroughly and check for conflicts.

Related guides

How to modify your widget content

Changing your widget language

Customizing the widget header and body cards

Change how the widget behaves on your site

Changing the widget position

If you have feedback about this article, or if you need more help:

Was this article helpful?

1824 out of 2247 liked this article

Still need help? Message Us