Changing the widget position
The instructions below are for desktops and laptops only.
You can easily change the position of the tawk.to chat widget to match your website’s layout and branding. By default, the widget appears in the lower-right corner of the screen. But, you can select from six standard positions (top, middle, or bottom on the left or right side of the screen) directly from your dashboard — no coding required.
Steps to change your widget position
3. Click Administration on the top menu.
4. Click Chat Widget under Channels in the left menu. Then, click Advanced under Widget Appearance (next to Widget Color).
- Top Left
- Top Right
- Center Left
- Center Right
- Bottom Left
- Bottom Right (default)
6. Click Save in the bottom-right corner. The widget updates automatically on your website.
Adjust widget position using code (Optional)
If the six preset options don’t fit your layout — for example, if the widget overlaps a sticky footer or navigation bar — you can fine-tune its placement using the tawk.to API.
The customStyle method allows you to set pixel-specific offsets, rotation, and separate positioning for desktop and mobile. Make sure to define customStyle before the embed script for it to take effect.
For detailed instructions, see this guide: Customizing your widget placement with the JavaScript API
Additional considerations
Mobile responsiveness
On mobile devices, the widget may automatically reposition itself to avoid overlapping navigation elements or important buttons. Always test changes on multiple devices.
Custom CSS or scripts
If your site includes custom CSS or third-party scripts, these may override dashboard settings. Check for positioning or z-index rules if the widget doesn’t appear where expected.
Dashboard vs. code-level settings
Dashboard changes control standard positions. If you’ve added custom placement through the JavaScript API, those code-level settings will override the dashboard.
Testing
After updating the widget’s position, view several pages on desktop and mobile to ensure the widget doesn’t interfere with other site elements.
Related guides
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