Updated on July 20, 2022

Add live chat plugin in 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.


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.


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:


    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;


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;



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.

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.

Write A Comment


Devashish Mamgain

I hope you enjoyed reading this blog post.

If you want the Kommunicate team to help you automate your customer support, just book a demo.

Book a Demo

You’ve unlocked 30 days for $0
Kommunicate Offer

Upcoming Webinar: Conversational AI in Fintech with Srinivas Reddy, Co-founder & CTO of TaxBuddy.