20

Chat Widget Customization

Last Update il y a 25 jours

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

Enabling the Attention Grabber

The instructions below are for desktops and laptops only.

You can encourage more visitors to engage with your tawk.to chat widget by turning on the Attention Grabber feature.


This feature allows you to place an image near your widget to grab visitors attention while letting them know you’re available to chat.

What is the Attention Grabber?

The Attention Grabber is a small image that appears near your chat widget when it's minimized. It helps draw attention to the widget and encourages visitors to start a conversation.

You can choose from dozens of built-in images or upload your own to match your brand or campaign.


Note: The Attention Grabber is only visible on desktop devices. It will not appear on mobile or tablet browsers.

How to enable the Attention Grabber

Follow these steps to enable the Attention Grabber on your site:


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. Click Advanced under Widget Appearance.

6. In the Widget Appearance editor, toggle the switch on under Attention Grabber.

7. Once enabled, you’ll see the default Attention Grabber image appear in the Desktop widget preview on the right. You can click Gallery to change the image.

8. In the Attention Grabber gallery, you can select from the images provided, or you can click Upload to add your own image. After changing the image, click Close.

After selecting a new image, you’ll see the changes in the widget preview.

You can enable Match widget with bubble theme if you’d like your widget to match the colors of your image.
If you uploaded a custom image, you can drag the image in the preview to change its position. You can also rotate the image by clicking 90° CCW or 90° CW. To set the image in front of your widget, check the Place image in front of widget checkbox.

9. When you’re happy with the changes, click Save in the bottom-right corner. Your chat widget updates automatically after saving. No need to update the widget code in your page’s HTML.

Tips for creating a custom Attention Grabber

If you're uploading a custom image:

  • File formats supported: .png, .jpg

  • Maximum file size: 1 MB

  • Ideal dimensions: 100 × 100 pixels

  • Ensure your image is visually appealing and not too distracting.

Important considerations

  • The Attention Grabber is only shown on desktop browsers.

  • Avoid cluttered or overly large images, as they may overwhelm or distract visitors.

  • It’s best to test different images to see which ones attract the most engagement from your visitors.


There are more ways to customize your Attention Grabber. Learn more with these guides:

How to set the position of a custom attention grabber

Adding a seasonal Attention Grabber


See this guide for detailed steps on customizing your chat widget:

Changing the appearance of the tawk.to chat widget

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

Was this article helpful?

289 out of 373 liked this article

Still need help? Message Us