Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Add Kommunicate Live Chat to a Website

DZone's Guide to

How to Add Kommunicate Live Chat to a Website

In this post, we learn how to quickly set up chat functionality in a web app and customize the way it appears on the page using CSS.

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Nowadays, every website is being powered by live chat plugins. Live chat provides a far better experience than your age-old contact forms. In this post, we are going to talk about how you can add a live chat plugin to your websites.

In this article, I will take the example of Kommunicate, a live chat powered customer support platform. You can signup for free here and get the plugin script in a matter of seconds.

Let’s walk you through a few simple steps for adding the live chat plugin to your websites:

Navigate to Dashboard →Settings. Click on Install under the Configuration section.

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

Example Below:

Customize Chat Widget Design:

Launcher Icon:

Passing ' chatLauncherHtml 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.

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
web dev ,plugins ,web application development ,css

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}