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
Before knowing the implementation of TAWK.IO lets see what benefits we are getting
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.
Select the language your comfortable with. I have selected English
SiteName - Add the name of your website
Enter Site URL - Website URL you want to integrate
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.
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.
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
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.
TAWK gives you a variety of options to customise the look and feel of your website chat.
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.
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
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
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.
Hope you enjoyed the article. Please share it with your friends.
Create Zip File On The Fly With Streaming Download In PHP Laravel
Securely SSH Your Server & Push Files With FileZilla
Generate Sitemap in PHP Laravel
Run Raw Queries Securely In Laravel
SummerNote WYSIWYG Text Editor Save Images To Public Path In PHP Laravel
Factory States For Clean And Fluent Laravel Testing
Generate RSS Feeds in PHP Laravel
Install Packages Parallel For Faster Development In Composer
Send SMS With Amazon SNS (Simple Notification Service) Using PHP
Multiple GIT Key Pairs Or Account In The Same Computer
What Is Composer? How Does It Work? Useful Composer Commands And Usage