How to Add Live Chat Plugin to Website?

Updated on July 19, 2024

Before live chat came into existence in the 1970s, the primary modes of communication between businesses and customers were limited to phone calls, letters, and in-person interactions. These traditional methods often involved long wait times, delays in responses, and limited availability, leading to frustration and inconvenience for both parties. 

Live chat addressed these challenges and transformed the customer service landscape by introducing instant messaging, offering users immediate assistance and support right on their screens. While the initial adoption was slow, in the last one decade Live Chat saw explosive growth in terms of adoption. 

Some of the reasons for this  growth included – 

• Improved internet speeds, widespread adoption of smartphones, and the development of user-friendly chat platforms
• Shift in the customer preferences for real-time support and assistance leading to instant gratification
• Low Cost – compared to traditional customer support channels such as phone support or in-person interactions, live chat proved to be more cost-effective for businesses
• Growing demand for data – Live chat platforms provided valuable data and analytics that businesses could leverage 

Today, although chatbots have become prevalent, live chat remains highly effective for user engagement, particularly for handling complex queries.

Here are some stats – 

• 52% of consumers are more likely to remain loyal to a company that offers live chat support. (Source)
• A study by Comm100 revealed that 73% of customers feel more comfortable interacting with customer service via live chat compared to email (61%) or traditional phone support (44%)
• Companies that offer live chat support report a 48% increase in revenue per chat hour, showcasing the positive impact live chat can have on sales and conversions (Source)

Now that we have understood how Live Chat is still very very relevant, let’s see how you can integrate a live chat plugin into websites and site builder platforms like WordPress, Squarespace, Wix, and others.

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:

• Kommunicate.io
• Zendesk Chat
• Intercom
• Drift

Step 1: Choose a live chat plugin

Choose a live chat plugin you would like to install on your website. I will take the example of Kommunicate, a live chat, and AI-powered customer service platform. 

Step 2: Add Live Chat Plugin to Website

(i) Installing a live 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.

(ii) Navigate to Kommunicate Dashboard, select Settings. Click on Install under the Configuration 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.

Now that you have deployed the live chat widget on your website, its time to add your agent into the platform who will assist your customers.

Step 3: Add Support Agents

Go to Kommunicate dashboard, navigate to the settings panel, and choose ‘Invite Team’ under Company section. Here you can add/remove agents and assign roles.

Additionally, you can create distinct teams and allocate conversations to them. Each team can establish unique conversation rules tailored to their specific requirements.

Roles

• Superadmin: The account owner who created the account. Superadmin has all the permissions.
• Admin: Have all the permissions to manage the account, can’t delete super admin or change the role.
• Agent: Basic permissions are provided to handle and reply to customer conversations smoothly.
• Operator: Have limited access, can respond to conversations assigned to them, and update their profile, and won’t be able to see other’s conversations.

Step 4: Add Integrations

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

• Squarespace Chat Integration
• WordPress Chat Integration
• Wix Chat Integration
• Shopify Chat Integration
• GoDaddy Chat Integration
• Meteor Chat Integration
• Tumblr Chat Integration
• Drupal Chat Integration

Step 5: Customize your chat widget

Chat 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.

The Misconceptions about Live Chat

Live Chat are still one of the most effective way to engage with your customers. Though widely adopted, there are still some misconceptions about Live Chat – 

• Live Chats are impersonal – Some people mistakenly believe that live chat interactions lacks personalization compared to phone calls or face-to-face interactions – which is totally incorrect. Live chat allows for real-time, one-on-one communication, enabling businesses to provide personalized assistance tailored to each customer’s needs.
•  Limited Usefulness – There’s a misconception that live chat is only suitable for basic inquiries and cannot handle complex issues. In reality, live chat can effectively address a wide range of customer queries, including technical support, product troubleshooting, and sales assistance.
• High Implementation Cost – Some businesses may assume that implementing live chat is costly and resource-intensive – which is again not correct. There are many free and affordable solutions available in the market now which provides both Live Chat and Chatbot capabilities at an affordable price.
• Low Customer Satisfaction – Contrary to popular belief, live chat often leads to higher levels of customer satisfaction when implemented correctly.

To summarize..

Live chat remains an effective and cost-efficient method to enhance your customer service efforts. Nowadays, platforms offer both live chat and chatbot capabilities in one integrated solution, allowing businesses to leverage the benefits of both technologies seamlessly. While chatbots can efficiently handle routine inquiries as the first line of defense, more complex queries can be seamlessly transferred to a live agent, offering the best of both worlds.

So, go ahead and give it a try to up your customer service game! Get started Free.

---

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.