1. Home
  2. Knowledge Base
  3. How to's
  4. Add Tawk.to chat widget

Add Tawk.to chat widget

In our newest themes we have included the Tawk.to chat widget. The reason we’ve added this option is because it’s free. Since this program is free you may hit limitations so depending on your customer service needs you may choose a different widget.

This article assumes that you already have a Tawk.to account

When you already have an account you probably already have your dashboard created.

Tawk.to will say you have to copy the widget code and you have to place that just before your closing</body> tag. We already did that.

However there’s a little piece of code you’ll need to have the widget attached to your theme. To get that piece of code do the following:

1. Log in to the Dashboard.

2. Go to the Admin section at the bottom of the left-hand sidebar.

3. Choose the site from the Properties menu (if you have more than 1 site).

4. Select the Chat Widget option in the menu.

5. Hover the cursor to the Widget Code section. Select Copy to Clipboard to copy the code.

6. Paste that widget code in for example Notepad or Wordpad or any other text editor.

The piece of code you have to paste in your theme settings is found in the bold text in below code:

<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/611a72afd6e7610a49b06dec/1fd7kvvn7';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->

Offcourse your code will look a bit different, but you will need this piece of code:

https://embed.tawk.to/611a72afd6e7610a49b06dec/1fd7kvvn7

Copy above code and place that in the appropiate theme setting of your theme

Place the string in the theme settings

You have now enabled the Tawk.to chat app in your webshop. However for the best result you have to tweak a few settings inside your Tawk.to dashboard. Do the following:

1. Log in to the Dashboard.

2. Go to the Admin section at the bottom of the left-hand sidebar.

3. Choose the site from the Properties menu (if you have more than 1 site).

4. Select the Chat Widget option in the menu.

5. Look for the Widget Behaviour – Visibility Settings. And switch the following options to “on”

This will make sure the widget is hidden on page load. So it will not interrupt the rest of the site. If all went well you will see the following in your shop (Theme Deviant v2):

If you want to get rid of the flashing message in your browser tab (we personally find it annoying) switch the “disable browser tab notification” setting to “on”:

Ok all done! Happy chatting 🙂

Updated on August 16, 2021

Was this article helpful?

Related Articles