Customizing your widget placement with JavaScript

You can customize the exact placement of your widget using customStyle in tawk.to’s API, with pixel-level control beyond the six default screen positions.

This is useful when:

• You want the widget to avoid overlapping with a menu or footer

• You’re embedding the widget into a custom layout or design

• You want different positions for mobile and desktop views

You can set the widget to appear in any of these six standard positions:

Each position can be further adjusted using offsets and rotation.

Offsets help you shift the widget slightly from its base position:

• xOffset: Moves the widget left or right

• yOffset: Moves it up or down

How offsets work:

• In the bottom right (br), increasing the xOffset will move your widget to the left.

• In the bottom left (bl), increasing the xOffset will move your widget to the right.

• In the top right (tr), increasing the yOffset will shift your widget down.

• At the center positions (cl, cr), adjusting the yOffset will move your widget up and down.

You can also rotate the widget using these values:

Rotation is useful for vertical layouts or creative designs.

Here’s a code sample showing the accepted position, offset, and rotation values:

Here’s a code sample you can copy and paste before the widget code in your website’s HTML:

• Always define customStyle before the widget embed script. Otherwise, your changes won’t take effect.

• Customize the widget layout separately for desktop and mobile to ensure the widget doesn't interfere with your site layout. Test on different screen sizes to confirm everything looks right.

• You don’t have to adjust the dashboard settings, as code-level settings override them.

See other JavaScript API guides for more ways to change the widget’s behavior and appearance.

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