Tawk.to JavaScript API integration
Tags: javascript, webdev, beginners, tutorial
Published: 2022-09-30 10:08:14

## Introduction.
Calls made by consumers from various time zones cannot be completed. Email responses take too long. The self-service options lack personalization and don't cover all possible scenarios.

Do you know what the alternative is? Live chat apps.

All customer needs are addressed by them. Firstly, they are convenient and easy to use. Second, online communication occurs in real time. Finally, troubleshooting is fast and personal. 

These three factors made live chats the most popular way for customers and companies to communicate.

There's more to it. More than 60% of customers are likely to return to a business if they chatted with them online.

We'll cover how to build up a customer service interface on your website today.

## What is Tawk.to

Tawk.to is a free JavaScript app with messaging and customer management features that provides an interface for you to easily communicate with your customers. Tawk.to added to your website for customer care purposes for free.

## Prerequisite 

To be able to follow along with this tutorial you need to have a website that is live running on a hosting platform.

## Project Setup

First off we need to register for a Twak.to account here. [Twak.to](https://www.tawk.to/)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xia25ard1f0nrnk5xkv3.png) 

Click on sign up free and create an account.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/78528xu9qdcdk8wyftdr.png)

After creating and verifying your account.

Select your preferred language.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ax0fnv0oa0l8t50rf0fc.png)

Now we would enter the details for our Property(Website in this case).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fvueushtksm7ep1c2qzo.png)

We are admin by default. We can also add other admin as Team members.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t72a2tw5xn8uvn69yedr.png)

We will now click on done.

Now we will copy the Script from Tawk.to and paste it before the _</body>_ tag section of every page on our website or alternatively install the plugin for a Content Management system like _WordPress_.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zrtzve8evjv01vcv75fr.png)

We will now go to the file manager section of our hosting service. In this case I am using _Hostinger_.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r7y0i8m9hvhftynq76fc.png)

Open the index.html file and paste your _Tawk.to_ script before the _</body>_ tag of all the pages of your website and save.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wotxf0znkb1kv42zn976.png)

Now the _Tawk.to_ web app will appear in all your website pages on the bottom right corner like this. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5cr620hsh3kvehif2ri6.png)

Now we will copy the Script from Tawk.to and paste it before the _</body>_ tag section of every page on our website or alternatively install the plugin for a Content Management system like WordPress.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hr0suty7x7xm1jjngpjs.png)

We will now go to the file manager section of our hosting service. In this case I am using hostinger.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r8ljzdst8td9l3nb8o6f.png)

Open the _index.html_ file and paste your Tawk.to script before the _</body>_ tag. We will now repeat this for all the pages of your website and save.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jwr7utud20e2ay78i2lq.png)

Now the Tawk web app will appear in all your website pages on the bottom right corner like this. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/849ijwp7s70gpserbi0c.png)

We now have the ability to monitor our website visitors and handle any issues our website users may have instantly offering them a very good user experience.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qfaonp0q6g6czi0vau0u.png)

## Conclusion

In this article, we learned how to register for a Tawk.to account and set up the script that would allow us to interact with website visitors in real time.