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
Push Files To CPanel / Remote Server using FTP Software FileZilla
What Is Method Chaining In PHP?
Client-Side DataTable, Adding Super Powers To HTML Table
Move Uploaded Files From Local Computer Or Server To Amazon S3 Bucket In PHP
Localization In Laravel REST API
Free SSL Certificate With Lets Encrypt/Certbot In Linux (Single / Multiple Domains)
Cache Static Files With NGINX Server
Basic Server Security Setup For Ubuntu / Linux
Generate SSH Key with ssh-keygen In Linux / Unix
Multiple GIT Key Pairs Or Account In The Same Computer
Securely Connect Server MYSQL DB From Sequel Pro / MYSQL Workbench
@stack @push and @prepend In Laravel Blade
What Is Composer? How Does It Work? Useful Composer Commands And Usage
