Delaying the tawk.to widget using JavaScript
The instructions below are for desktops and laptops only.
By default, the tawk.to chat widget loads as soon as a visitor’s browser finishes loading your page. In some cases, you might want the widget to appear after a delay — for example, a few seconds after page load or after a specific visitor action.
This guide explains how to delay the widget using JavaScript. It assumes you’re adding the widget manually (not via a CMS plugin) and that you have access to edit your website’s HTML.
This guide explains how to delay the widget using JavaScript. It assumes you’re adding the widget manually (not via a CMS plugin) and that you have access to edit your website’s HTML.
Before you start
To delay the widget, you need the Property ID and Widget ID for your chat widget. These two IDs are unique identifiers that tell your site which tawk.to widget to load.
See this guide to learn where to find both IDs:
Where can I find the property and widget IDs?
You also must install the widget manually by embedding its JavaScript snippet directly in your site’s HTML. This method won’t work if you’re using a WordPress (or similar) plugin that auto-injects the widget code.
To learn more about adding the widget to your site, see this guide:
Adding the tawk.to widget to your website
See this guide to learn where to find both IDs:
Where can I find the property and widget IDs?
You also must install the widget manually by embedding its JavaScript snippet directly in your site’s HTML. This method won’t work if you’re using a WordPress (or similar) plugin that auto-injects the widget code.
To learn more about adding the widget to your site, see this guide:
Adding the tawk.to widget to your website
Steps to delay the widget
Instead of using the standard tawk.to embed script, wrap it in a function that waits before inserting it.
Here’s a basic example:
- Open your website’s HTML where you plan to load the widget (usually near </body>).
- Replace the default widget script with this JavaScript block:
How it works
- widgetDelay: The number of milliseconds to wait before loading the widget.
- The function inside setTimeout creates and inserts the tawk.to script after the specified delay.
- Replace <property> and <widget> with your actual Property ID and Widget ID.
Additional considerations
- Delay timing
You can adjust the delay to match your goals. A short delay (e.g., 2–5 seconds) is ideal for giving visitors time to view your content first. Longer delays are useful when the widget should appear later in the browsing session.
- Page load vs user interaction
If you prefer to trigger the widget based on a user action (like clicking a button), you can run the script in response to that event instead of using a delay.
- Consent and privacy
If your site requires user consent before loading third-party scripts (such as for GDPR compliance), delay loading the widget until the user gives consent.
- CMS plugins
If your site uses a plugin or theme integration that auto-injects the standard tawk.to script, you must disable that before adding this custom code. Plugins generally don’t support delayed loading by default.
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