Good content takes time and effort to come up with.

Please consider supporting us by just disabling your AD BLOCKER and reloading this page again.

Free Live Chat Integration Using TAWK.IO

06th July 2020 4 mins read

Share On

Hello! In this article, I will show you how to integrate free live chat with TAWK.IO. I am using their services to integrate for my customers from quite a long time.

We will cover the following

Advantages Of Using TAWK.IO
Setup Procedure
Copy Integration Code
Customise Your Chat View
Widget Code From Settings

Step 1 - Advantages Of Using TAWK.IO

Before knowing the implementation of TAWK.IO lets see what benefits we are getting

FREE! FREE! FREE! :)
Android App
iOS APP
Web Integration
Admin Panel
Lots Of Paid As Well As Free Plugins
Easy Installation

Step 2 - Setup Procedure

Let's see how to integrate the same in our website

First, go ahead and SignUp. Once you SignUp you will be able to see the following page.

You can totally SKIP the setup step and do it later too.

I - Language Selection

Language Selection - Tawk | Free Live Chat

Select the language your comfortable with. I have selected English

II - Website Details

Website Details | Free Live Chat

SiteName - Add the name of your website

Enter Site URL - Website URL you want to integrate

III - Team Members

Team Members | Free Live Chat

Now if you have team members you can invent them using their email id and can select their role as Admin / Agent.

For time being I am not selecting any team members and skipping it.

IV - Integration Code

Integration Code | Free Live Chat

Make sure to copy the website integration code as shown in the above image. If your not the developer then you can send the details to multiple developers with comma-separated.

Step 3 - Copy Integration Code

Now you have the integration code. Add it at the end of your website HTML <body> tag as shown below

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tawk Integration</title>
</head>
<body>
    
    YOUR WEBSITE HTML GOES HERE

    <!--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/5f03f0d2760b2b560e6fddca/default';
            s1.charset='UTF-8';
            s1.setAttribute('crossorigin','*');
            s0.parentNode.insertBefore(s1,s0);
        })();
    </script>
    <!--End of Tawk.to Script-->
</body>
</html>

Once you add as shown in the above image go to the browser and load your website you must be able to see small live chat notification popup on the right bottom corner of your website like the following

Chat Notification PopUp | Free Live Chat

Oh! Yes, it's simple as that. In the next step, lets see how we can customise the look and feel of our chat icon.

Default View

Default View | Free Live Chat

Step 4 - Customise Your Chat View

TAWK gives you a variety of options to customise the look and feel of your website chat.

Widget Settings

Widget Settings | Free Chat Live

1 (Settings) - Click on the gear icon of the left sidebar for settings

2 (Chat Widget) - Since I want to change the colour of the widget and modify a few things

3 (Advanced) - If you only want to change the colour of the widget from green to other than just change the colour directly. If you are really concerned about the way it looks and every other thing then make sure to click on the Advanced button.

Widget View Settings | Free Live Chat

One of the best features about TAWK is you can make the changes to the widget on the left side and be able to see the changes on the fly on the right panel side.

1 (Chat Position) - You can make the widget placed anywhere in your page by selecting the options

2 (Attention Grabber) - Bt default you will be able to see "We Are Here" text on top of the chat widget. You can customise as per your needs or even disable it. I have disabled the widget as shown on the above image.

3 (Header Colour) - You can select the header colour from green to your website preference

4 (Agent Message Colour) - You can even make the customisation on how the agent message should be able to see

Step 5 - Widget Code From Settings

By chance, if you failed to copy the widget code from Step 2 then no need to worry. In this, I will show you where to find it

Widget Settings -> Chat Settings | Free Live Chat

First click on the settings on the left bottom corner then you will be able to see the above page

1 (Chat Widget) - First click on chat widget link

2 (Widget Code) - On the right side you will be able to see the widget code. Once you hover your mouse you can copy it and use it on your website page.

Conclusion

Hope you enjoyed the article. Please share it with your friends.

Articles For You

Generate SSH Key with ssh-keygen In Linux / Unix

Upload Files In PHP?

Generate Sitemap in PHP Laravel

Laravel Custom Maintenance Page

What Is Method Chaining In PHP?

Install RabbitMQ in Ubuntu 22

Composer Install v/s Composer Update

File Upload In Laravel PHP

Google, Twitter, GitHub, Facebook & Many Other Social Generic Logins With PHP Laravel Socialite

Prevent Multiple Form Submits

Select2 Dropdown

Integrate Google Translate Into Your Website

Accessors And Mutators In PHP Laravel

Free SSL Certificate In cPanel With ZeroSSL & Certbot

Localization In Laravel REST API

AUTHOR

Channaveer Hakari

I am a full-stack developer working at WifiDabba India Pvt Ltd. I started this blog so that I can share my knowledge and enhance my skills with constant learning.

Never stop learning. If you stop learning, you stop growing