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


Free Live Chat Integration Using TAWK.IO


FREE CHAT SYSTEM LIVE CHAT
07th July 2020 4 mins read
Share On     Share On WhatsApp   Buy Me Coffee | StackCoder Buy Coffee


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


  1. Advantages Of Using TAWK.IO
  2. Setup Procedure
  3. Copy Integration Code
  4. Customise Your Chat View
  5. 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


  1. FREE! FREE! FREE! :)
  2. Android App
  3. iOS APP
  4. Web Integration
  5. Admin Panel
  6. Lots Of Paid As Well As Free Plugins
  7. 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

Language Selection - Tawk | Free Live Chat


Select the language your comfortable with. I have selected English


II - Website Details

Website Details | Free Live Chat

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

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

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

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

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

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

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

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.


WHATS NEXT?


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

GitHub Login With PHP Laravel Socialite

Facebook Login With PHP Laravel Socialite

Client-Side Form Validation With Javascript

Dependency Dropdowns With Javascript And PHP

Send SMS With Amazon SNS (Simple Notification Service) Using PHP


Happy Coding :)








Author Image
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