How to Add Live Chat Support to WordPress Website
Posted in: Plugins, Widget, WordPress

How to Add Live Chat Support to WordPress Website

In this guide, we will add a live chat widget to a WordPress site where the visitors can send their messages in real-time.

Here, we will create a simple custom plugin to add tawk.to chat widget in your WordPress site. Tawk.to is a live chat software for websites and is also free of cost.

First of all, sign up at tawk.to or you can log in if you already have an account.

Next, add a property to your tawk.to account. In this case, the property will be your brand name or website name where you want to integrate the tawk.to widget.

After adding the property, go to “Administration” (left bottom icon) > “Channels” > “Chat Widget” to get the widget code. Next, copy this widget code, we will use this code in our custom WordPress plugin.

Chat Widget Code - Tawk.to
Chat Widget Code – Tawk.to

Creating Custom tawk.to Chat Widget Plugin

Create a file with plugin’s name, let’s call it “tawk-to-chat-widget.php”.

Next, paste the following code in this file and save it. Here, we use the WordPress action hook “wp_footer” to inject the widget code in the footer of your WordPress site.

<?php
/*
 * Plugin Name: tawk.to Chat Widget
 * Version: 1.0
*/

defined( 'ABSPATH' ) || die();

function tawk_to_chat_widget() {
?>
<!--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/5cc43chfd6e05b767b448ar3/default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
<?php
}
add_action( 'wp_footer', 'tawk_to_chat_widget' );

In the above file, you will also need to replace the following widget code with your widget code that you have copied earliar.

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

Now, we have the plugin file ready and we just need to install it to WordPress and activate it. Here, we have two options:

Create a zip file of “tawk-to-chat-widget.php”, so it will be “tawk-to-chat-widget.zip”. Then, upload this zip file to your WordPress by going to your WordPress admin area “Plugins” > “Add New”, and “Upload Plugin”. After, choose the zip file and click “Install Now”.

Lastly, activate the plugin by going to “Plugins” > “Installed Plugins”. Then find the plugin with name “tawk.to Chat Widget” and activate it.

The other way of installing a plugin is to directly place the “tawk-to-chat-widget.php” to the “plugins” directory which is inside of your WordPress installation directory > “wp-content” > “plugins”. So, it will look like “plugins/tawk-to-chat-widget.php”.

Finally, after activating the plugin, you can check if chat widget appear on your site. Also, you can monitor active chats and live visitors from your tawk.to dashboard.

Customizing the Widget Color, Behavior, and Position

For customizing the widget’s color, behavior, or position, you can do so by going to tawk.to administration settings. Here, you can also add more property members or agents who can monitor and respond to visitor’s queries.

There is also a mobile app available. So, you can monitor and control the administration directly from your mobile phone.

And, instead of monitoring in a web browser, there is a desktop app available which you can download.

If you face any trouble when integrating tawk.to to your WordPress site, then you send your query to us via our contact form and we will get back to your email as soon as possible.

Leave a Reply

Your email address will not be published. Required fields are marked *