How to make the widget appear after a trigger
The instructions below are for desktops and laptops only.
Using tawk.to’s API, you can keep the chat widget hidden when a page loads and then show it only after a trigger message fires (for example, when a particular event happens on the page).
This is useful when you want the widget to appear only after a visitor performs a specific action or after your site sends a “trigger” message.
The method below combines an onBeforeLoad call with hideWidget() (keeps the widget invisible at first) and an onChatMessageSystem callback that calls showWidget() (makes the widget visible once a trigger occurs).
Get your widget code
For mobile steps, see these guides:
Where to find your widget code on iOS
Where to find your widget code on Android
1. Log in to your tawk.to account.
2. Select the correct property.
3. Click Administration in the top menu.
4. Click Chat Widget under Channels in the left menu.
5. Copy the Widget Code and paste it just before your site’s </body> tag.
Insert the API snippet into your widget script
Add the following code snippet to your embedded widget code before the end of the script tag (i.e., inside the existing widget snippet, before its </script>). The snippet below hides the widget on load, then shows it when a system chat message arrives (the “trigger”):
How it works
onBeforeLoad runs before the widget fully initializes; calling hideWidget() keeps the UI invisible to visitors.
onChatMessageSystem fires when the widget receives a system message (your “trigger” message). Calling showWidget() makes the widget visible to the visitor.
Customize the trigger behavior (optional)
If you only want to show the widget for particular system messages, check the message parameter inside onChatMessageSystem and only call showWidget() when it matches your criteria.
Example:
Additional considerations
Position the snippet correctly
Add the code inside the site’s existing tawk.to widget script (before its </script> and before </body>) so the API methods are available when the widget loads.autoStart and start()
If you prefer toggling the socket connection rather than hiding the UI, the API supports autoStart and start() options that affect when the widget connects and can display. If autoStart is disabled, the widget will be hidden by default on load.Testing
Test on several browsers and devices to ensure the widget behaves as expected. Clear caches or use an incognito window when testing changes to the snippet.Consent & privacy
If your site requires consent before loading tracking or third-party scripts (e.g., for GDPR), ensure your implementation respects that — do not display or initialize the widget before consent if required.
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