Using a text link or button to open the widget
The instructions below are for desktops and laptops only.
First, get your widget code
3. Click Administration on the top menu.
4. Click Chat Widget under Channels in the left menu.
5. Copy the Widget Code and paste it just before the closing </body> tag of your site.
6. Refresh your page to ensure the widget loads correctly.
Add a button or text link
Add a button, image, or text that visitors can click to open the chat:
For text links:
For images:
Hide the widget on page load
To make the widget appear only when clicked:
1. Go to your Chat Widget settings.
2. Under Widget Behavior, go to Visibility Settings and enable Hide widget on load in desktop.
Your changes are saved immediately. Now the chat appears only after the visitor clicks your button or link.
Show custom images or text based on status (Optional)
Now that you’ve added text or image links to open your widget, you can display different buttons or images depending on whether agents are online or offline.
First, add a specific <div> placeholder in your HTML, in the position where you would like the button or text to display. You do not need to add anything inside the div — just copy the following code exactly:
Next, add and modify the following code, and place it just before the </body> tag:
This allows you to give visitors a more tailored experience based on your team’s availability.
Additional considerations
This setup works best on desktop browsers or the tawk.to web dashboard. It’s not supported in the mobile app.
Ensure Tawk_API is fully loaded before calling Tawk_API.toggle(). If needed, wrap the function in an onLoad handler to avoid errors.
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