How to Add Live Chat Plugin to Website?

Live chat is a faster, personalized and economical way for your customers to talk to you. Live chat provides a far better experience than your age-old contact forms.

Nowadays, every website is being powered by live chat plugins. In this post, we are going to talk about how you can add live chat plugin to websites and site builder platforms such as WordPress, Squarespace, Wix etc.

Can't wait to try out the demo? 

Click here to get your live chat script

Live Chat Plugin Providers

Live chat software provides plugins which can be added within your website in a matter of a few minutes. These plugins place a chat widget in your website, which your website visitors can use to communicate with you. There are many products available in the market, following are some of the advanced customer support software providers:

Firstly, choose a live chat plugin which you want to install on your website. I will take an example of Kommunicate, a live chat powered customer support platform.

Add Chat to Website

Installing support chat widget is only a matter of copy-pasting JavaScript code snippet into your website page. You can get your code snippet from Kommunicate.

Copy the code snippet by signing up for free account in kommunicate.

 

Navigate to Kommunicate Dashboard, select Settings. Click on Install under the Configuration section.

Live Chat Plugin Javascript Code Snippet on Kommunicate Dashboard Install section

 

Copy the JavaScript code from Install section and paste it in just above the </head> tag in every page where you want the chat widget to appear.

That’s it! Your customers can now start chatting with you right from your website.

Support Agent Panel

Go to Kommunicate dashboard -> Conversations to reply to the incoming customer conversations.

Integrations

Kommunicate can be installed into website builders and other platforms. See the list of supported platforms for adding live chat software:

Didn't find your favourite site builder integration? Let us know in the comments below.

Customizations

Launcher Icon

PassingchatLauncherHtml’ in kommunicateSettings’ allows you to change the chat launcher icon which is displayed on the page bottom right corner.

var kommunicateSettings = {

"appId": appId,

      "isAnonymousChat": true,

      "chatLauncherHtml": "<img src='https://api.kommunicate.io/img/logo02.svg' width='70px' height='70px'/>",

       "agentId": agentId,

      "groupName": groupName,

      "email": email

};
Theme Color

Add the below code to change the color of the top header color in your CSS file:

.mck-box-top {

      background-color: green;

}
Start New Conversation Button Color

Add the below code to change the color of the ‘Start new conversation’ button in your CSS file:

#mck-msg-new.mck-btn{

    background-color: green!important;

}
Received Messages Color

Add the below code to change the color of the received messages in your CSS file:

.mck-msg-right .mck-msg-box{

     background-color: green;

     color:white;

}
Sent Messages Color

Add the below code to change the color of the sent messages in your CSS file:

mck-msg-left .mck-msg-box{

   background-color: white;

   color:black;

}

 

Refer to the Kommunicate docs for more details.

Kommunicate also supports integrations with Helpdocs and DialogFlow and things like an FAQ bot can be easily integrated without writing any code.

 


 

Subscribe here to get the good stuff — we solemnly swear to deliver top of the line, out of the box and super beneficial content to you once a week.

At Kommunicate, we are envisioning a world-beating customer support solution to empower the new era of customer support. We would love to have you onboard to have a first-hand experience of Kommunicate. You can signup here and start delighting your customers right away.

Post created 10
193 Views

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.