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
Available positions
You can set the widget to appear in any of these six standard positions:

Each position can be further adjusted using offsets and rotation.
Using offsets and rotation to fine-tune widget placement
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.
Code samples
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:
Important considerations
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