Using a text link or button to open the widget
[Desktop]
As an alternative to using the standard embed or inline chatbox, you can call a chat window from any text or button on your website.
NOTE: The instructions below can only be completed from a browser or the tawk.to desktop apps. They cannot be completed in the tawk.to mobile app.
You can do this in four steps:
1. Add the widget code to your site just before the closing </body> tag.
2. Add custom text or an image to your server with the click event.
3. Modify the widget behavior, so that it "Hides widget on load" (optional).
4. Display a custom image or text based on your status (optional).
Step 1 - Copy the Widget code
NOTE: If you've already installed the tawk.to plugin and widget on your site, you can skip this step and start with Step 2.
Log in to the Dashboard and make your way to ⚙️Administration ➞ Channels ➞ Chat Widget.
Next, hover over the Widget Code section and select Copy to Clipboard to copy the code.
Paste the widget code into your website HTML just before the </body> tag.
Then, refresh your website to ensure you see the widget.
Step 2 - Create a button or text on your site
Create a button or text and add the following code before it:
For a text link use:
For an image use:
Step 3 - Hide widget on load and pop out
Log in to the Dashboard and make your way to ⚙️Administration ➞ Channels ➞ Chat Widget
.
Scroll down to Widget Behavior - Visibility Settings.
Then, switch on Hide Widget On Load to hide the widget before it is clicked.
Step 4 - Display a custom image or text based on your status
If you followed Steps 1 through 3, you should now have an image or text on your site that pops out the chat when clicked.
An advanced option is to show different images based on the status of your widget. For example, show one image when your widget is offline and show another when your widget is online.
1. Add the div code below into your website's 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 and paste it exactly as is.
2. Add and modify the code below with your custom images and text and place it just before the </body> tag.
Need help? Reach out to our support team or schedule a call.