21

Chat Widget Customization

Last Update sehari yang lalu

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

How to set the position of a custom Attention Grabber

The instructions below are for desktops and laptops only.

An Attention Grabber is an image displayed next to your chat widget to attract visitors’ attention and encourage them to start a conversation.

You can upload your own custom Attention Grabber image and adjust its position so it appears exactly where you want it around the widget.

This guide shows how to upload a custom Attention Grabber and set its position using both the Widget Appearance editor and the JavaScript API.

Position a custom Attention Grabber with the Widget Appearance editor

Follow the steps below to upload your custom Attention Grabber and adjust its position around the chat widget.

1. Log in to your tawk.to account, and select the correct property.

2. Click Administration on the left navigation bar.

3. Click Chat Widget in the left submenu.

4. Under Widget Appearance, click Advanced.

5. This opens the Widget Appearance editor. Under Attention Grabber, turn the Enabled switch on.

6. Click Gallery.

7. On the Select Attention Grabber pop-up, click Upload in the bottom right corner. Then, select an image from your computer.


For best results:
- File formats supported: .png, .jpg

- Maximum file size: 1 MB
- Ideal dimensions: 100 × 100 pixels

Tip: Keeping the image simple and clear helps draw attention without distracting visitors.

8. After uploading, you’ll see the image appear in the preview on the right of the editor.

You can now adjust how the image appears:
  • Enable or disable Place image in front of widget to control whether the image appears in front of or behind the widget.
  • Rotate the image — click 90° CW (clockwise) or 90° CCW (counterclockwise).
  • Click and drag the image in the preview to position it around the widget. You can move the image anywhere within the grey box surrounding the widget.

9. When you're happy with the position, click Save.


Your chat widget updates automatically after saving. No need to update the widget code in your page’s HTML.

Position a custom attention grabber with JavaScript API

You can also set the position of a custom attention grabber using the `customStyle` object in the JavaScript API.

Add the code below to your existing widget code, and update the `xOffset` and `yOffset` values based on the position you want.

Note: Do not place this object inside a function. These values must be available before the widget script is downloaded. Changing them after the widget script has been downloaded will not update the widget’s style.

Additional considerations

  • Attention Grabbers are shown only on desktop browsers
    Visitors using mobile phones or tablets will not see the Attention Grabber.
  • The Attention Grabber only appears when the widget is online
    If your widget is offline or no agents are available, the image will not be displayed.

Related guides

Enabling the Attention Grabber
Adding a seasonal Attention Grabber
How to set the position of a custom attention grabber
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?

28 out of 40 liked this article

Still need help? Message Us