How to Install Free Chat Software Tawk.to on to Your Website

The Live Chat solution by tawk.to is awesome and free. In this video, I’m going to show you how you can integrate Tawk.to onto your website and track the interactions with Google Analytics and Google Tag Manager.

In this video, I’m going to show you how you can use tawk.to, a free chat widget for your website, to engage your customers and measure your interactions with them. All and more coming up right after this. Hi there, and welcome to another video of measureschool.com, where we teach you the data-driven way of digital marketing. My name is Julian, and on this channel, we publish tutorials, how-to videos, and take a look at new marketing tech just like this one.

So if you haven’t yet, consider subscribing. Now recently, I was on the lookout for a new chat tool that we can easily integrate on measureschool.com, and also track the interactions with this widget. Thanks to viewer Matthew, I gave tawk.to a go. It’s quite a little, powerful chat widget that you can install through Google Tag Manager, which I’m a big fan of, but most importantly, it’s free. So I thought I’d make a quick tutorial on what is possible with this little piece of marketing tech. We’ve got lots to cover, so let’s dive in. Today, our journey starts here at the homepage of tawk.to, which you can find at tawk.to. And here’s where you can sign up for completely free chat solution of tawk.to. This will, in the end, look a little bit like this, where you have a chat window where you can also initiate a chat. So once you sign up, you will be greeted with the dashboard of tawk.to and the embed code that you need to install on your website to get this little chat widget onto your website. Now, tawk.to has a lot of different integrations with different CMS systems, so if you want to just install this via an extension or a plugin, you would be able to do this, as well. Please check back with their knowledge base to see if there’s an extension available. But since this is JavaScript, we could also install this via Google Tag Manager on our website, which is my preferred method of doing things. So I would, for example, just copy this code and look onto my website, where I already have Google Tag Manager installed, go over to my Google Tag Manager account, create a new tag, give it a name, choose the custom HTML option, put our code in here, and define a trigger where I want to essentially enable this widget. Then save this, and we can try this all out by going into our preview in debug mode. Back to our page, let’s reload this. And our preview in debug mode obstructs a bit of our view, but we can click on this little arrow here, and we see that a chat widget has been installed onto our website. We can try this out. And we see that there’s a new message here. Somebody just wrote us. We can join this conversation and chat with our user. So this seems to be working really well, and just in a few seconds, we have installed a chat solution on our website. Now, the tawk.to interface gives you a lot more customization options, such as the appearance of the widget, but also, can you program in certain triggers, for example, if the user has visited two or three of your pages, you would be able to actively open up the chat window and start chatting with him, which is great for proactive engagement with your user. So there are a lot of different options within the interface, that there’s also a JavaScript API available. And this JavaScript API features different customizations that you can implement for the code and then be able to pick up certain events or push certain actions, like opening up the chat window automatically through a JavaScript call. So what would this look like? I have made a little demo here that you can download under measureschool.com/chat, and you’ll be able to download our template, which will let you install tawk.to-specific tags and variables that we have created. So just go to Import Container, and choose the file that you want to import, then choose your workspace, and if you’re not sure if this would overwrite anything, just go with the merge option here and the rename conflicting tags, triggers and variables. Then you can confirm that. I have already done this. So in the end, you will get new tags, variables, and triggers into your account. All you need to do then is go onto the main tawk.to widget tag that we have here and implement your tawk.to embed code. So let’s go back and find our tawk.to embed code, copy that, go back to our Tag Manager, and paste this in. The <script> tags are not necessary. And we should be able to save this, refresh our preview in debug mode, refresh our page, and we see that there have been already new messages pushed to the data layer, which will, in the end, push a new event to Google Analytics. This is what these new tags are for. The GA – Event tag is for tawk.to events, and the listener functionalities that you find beneath the embed code. What will this do? It will send over an event to Google Analytics. We can see this in our real-time reporting, as well. Here is a tawk.to event that the chat window opened. So if we try something new here, let’s close this, we should see another event. Here we go. And our tawk.to just had a new event. Two events, actually, Tawk.to Chat ended and Tawk.to Window closed. So all these interactions are now automatically tracked with the help of Google Tag Manager and Google Analytics, and, obviously, the tawk.to JavaScript API. So this can be really useful. Another useful feature is the visitor call. What does that do? Well, if you remember, we had a little form that we had to fill out here at the beginning. What if we could automatically fill that with the user’s information if you already know it? So if a user logs in to our online store and we have his email address and his name available, then we would push this into the data layer, and we could pass that information on to tawk.to, as well. We have done this in this tag template with the ID – user. Please be aware that you need to send in data layer information. This is the data layer variable – email, and the data layer variable – name with a special event key which is called user. So for example, on this website, if you go to this page, we see that user information gets pushed into the data layer. The user’s name is John Doe, and the email is John Doe email. And now the user doesn’t have to go through this whole signup process anymore, but will automatically be recognized with his name and his email address. We would also see this in our dashboard. So here we can see the email address and the name was automatically filled, which can be super helpful if we already have identified the user in our system and now just want to have a more personal conversation with him, because we already have his details ready in this chat window. That way, you could pull in any kind of information that you have available in your CRM and transfer this profile over to tawk.to automatically. So again, this little tag templates with the listener Functionality and the ID can be super useful if you want to track interactions and also identify the user to your chat software, and you can get this below.

Summary

So there you have it. That’s how you can use tawk.to on your website and also measure your interactions with the help of Google Tag Manager.

and install it right away in your Google Tag Manager account, and if you enjoyed this video, then don’t forget to subscribe to our channel. We bring you more videos every Wednesday. My name is Julian. Until next time.

About the author: Julian Juenemann

Julian started and grew venture-backed startups with his unique 'data first' approach to Online Marketing. He then founded MeasureSchool.com to help marketers, like him, the data-driven way of digital marketing.

guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Patrice
Patrice
3 years ago

Thx Julian !
However, im’ looking for the JSON with the following script :
I have some of them (got it from your video), but not the full !
Thx

Tawk_API.onChatStarted = function(){
dataLayerPush(“Chat Started”);
};
Tawk_API.onChatMaximized = function(){
dataLayerPush(“Chat Window opened”);

};
Tawk_API.onChatMinimized = function(){
dataLayerPush(“Chat Window closed”);

PAtrice
PAtrice
3 years ago

Hello Julian, great video and thx you !
However, the link to download the template is broken.
Could you fix it ?
Thx a lot !