Customizing your widget placement with the JavaScript API
The Widget Appearance menu in the Dashboard allows you to easily change where the widget is positioned on your website. If you'd like to customize the position further, you can use the following JavaScript API code to fine-tune the exact position of the widget down to the pixel.
This allows you to set the location of the widget on both desktop and mobile along with the location and rotation of the Attention Grabber.
Accepted values for position:
- tl (top left)
- tr (top right)
- cl (center left)
- cr (center right)
- bl (bottom left)
- br (bottom right)
Accepted values for rotation:
- 90deg (rotate 90 degrees clockwise)
- -90deg (rotate 90 degrees counterclockwise)
- 0 (no rotation)
xOffset:
The xOffset refers to the distance in pixels the object will be moved along the horizontal X-axis. The direction of the movement is decided by the starting position value.
If the widget is set to the bottom right, increasing the xOffset will move the widget to the left.
If the widget is set to the bottom left, increasing the xOffset will move the widget to the right.
yOffset:
The yOffset refers to the distance in pixels the object will be moved along the vertical y-axis. The direction of the movement is decided by the value of the starting position.
If the widget is set to the top right, increasing the yOffset will lower the widget.
If the widget is set to the bottom right, increasing the yOffset will raise the widget.
If the widget is set to either center left or right, a negative yOffset value will raise the widget, while a positive yOffset value will lower it.
The following code positions the chat widget in the bottom right on both desktop and mobile, with the bubble aligned and not rotated.
Feel free to copy the code below. Paste it below your Widget Code and make changes to test the position of your widget until you have it the way you want it.
For more ways to change the widget’s behavior and appearance, check out our other JavaScript API articles in the tawk.to Help Center.
Need help customizing the widget header and body cards? Reach out to our support team or schedule a call.