Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

How to Add Live Chat Complete in WordPress

by
Length:ShortLanguages:

Online shopping has revolutionized nearly every industry. Having a chat feature on your business website not only provides an avenue for customers to contact you, but it also helps build confidence and trust.

A real-time chat feature on a website lets customers get instant answers to their questions or concerns, without having to make a phone call or fill out a contact form.

Do You Need a Chat Feature on Your Website?

Let's look at some of the key reasons why having a chat feature might be beneficial to your business.

Provide Real-Time Feedback

Customers don't have to wait to obtain any information they are seeking. For example, if a new customer visits your site and they are looking to purchase an item, they can use the live chat to get more information about the product and also get recommendations about other products.

A live chat also gives you an opportunity to get feedback from customers: another important aspect of customer support.

Customer Convenience

Many customers are busy and impatient and expect you to value their time. A chat system ensures that customers don't spend time waiting and searching for a way to contact you to solve their issues. A chat feature also means customers are able to multitask.

Higher Conversion Rates

In the digital age, customers have access to lots of products and information. Any delay when responding to customers means they might go elsewhere and you will lose money. Live chat is the fastest way to respond to customers before they leave your site—hence leading to higher conversion rates.

Reduce Customer Support Costs

The traditional way of handling customer calls means that an agent can only respond to one customer at a time. But with live chat, an agent can respond to multiple customers at once, saving support costs.

Build Trust and Confidence

Customers are still skeptical of purchasing from people they don't know. Having live chat is the perfect way to build trust by providing human interaction.

Understand Customers Better

Live chat allows you to collect customer data by analyzing questions that are frequently asked by customers. You can then prepare a FAQ that answers them better. You can also use the data to better your marketing strategy. Some chat features provide other advanced details about a customer such as country of origin, browser, and device.

Getting Started

In this section, we are going to look at the Live Chat Complete plugin and how to add it to your WordPress site.

Live Chat Complete is an advanced live chat solution that allows you to talk directly to your customers. It enables you to give your customers needed human interaction. It also allows visitors to see previous conversations when they come back to your website.

Customers can also send messages even when you are offline.

Features

  • multilingual
  • ability to customize the design to fit your brand
  • ability to archive chats
  • message encryption between operator and users
  • ability to get email notifications when a user is online
  • different people can reply to the same user

Add Live Chat Complete to Your WordPress Site

We will start by downloading the plugin from CodeCanyon. You can purchase the plugin from the product page. If you don't have an account yet, you can create one first.

Once you purchase the plugin, you will get a link to the downloadable files. Alternatively, you can find them in the download section of your account with your other purchased items.

Once you download the WordPress files, log in to your WordPress site, go to Plugins > Add New, and upload the zip file. After uploading, click Install Now, wait a few seconds, and then click Activate. You can now start using the plugin.

The first step is to set up a real-time database. Live Chat Complete uses Firebase for chat transmissions. Firebase is a mobile and web application development platform that lets you create apps without worrying about how to manage servers. It provides everything you need to get your apps ready.

Firebase provides many services such as the Realtime Database, which will let us store and sync chats between visitors in real-time.

Head over to the Firebase site, create a free account, and create a project as shown below.


Create a new Firebase project

You will need the following data to configure the live chat on your WordPress site:

  • your Google email 
  • project ID 
  • web API key 
  • private key 
  • security rules 

First, click on Settings and select Project Settings, copy the Project ID and Web API Key, and paste them into the plugin settings as shown below.

Paste project id and web API key into WordPress settings

The next step is to generate a private key from the Firebase project. Go to Project Settings > Service accounts and click Generate new private key.

Generate new private key for Firebase

Open the JSON file you just downloaded and copy and paste the contents to the private key field provided for the live chat plugin configuration in your WordPress site.

You will then configure security rules for your chat. Security rules make your connection more secure and the information safe. In the Firebase project, go to Database, click Rules, and paste the security rules provided in the plugin settings pages for your site. Save the changes by clicking the Publish button.

Edit the security rules for live chat in Firebase

The last step is to configure the sign-in method. Go to Authentication and click Sign-in method. From there, enable Email/PasswordGoogle, and Anonymous. Don't forget to add your domain name on Authorized domains on the same page.

Configure the sign-in method and authorized domains

The setup is now complete, so save your changes. The chat feature should now be showing at the bottom right of your site.

Live chat feature running on the WordPress site

Customization

You can also modify the chat box to fit your brand's themes and colors. You do this by navigating to the chat options. Here you can change attributes such as colors, or add your own custom CSS. See how I've customized the color in the examples below.

Live chat color options

You can also set personal avatars of the available operator agents, making the chat feel more personalized.

Live chat also allows you to set up automated messages to introduce your team. Or you can set messages that let the user know when their queries will be answered.

Live chat automated messages configuration

The Chat Console

The chat console is a simple yet powerful interface that lets you see visitor chats and their details, such as name and contact information. You can also see which page they are looking at on your website. It makes chatting with customers very easy, leading to more satisfied customers.

Chat console for Live Chat plugin

Conclusion

Having a real-time chat is the perfect way to retain customers, especially if you are running an online store or an online service business. Since these kinds of businesses deal with a lot of customer queries, this plugin can help you retain customers. It also helps improve accessibility since most people feel that submitting emails is too much work. But with a live chat, it only takes a few seconds to get in touch with support staff.

Another advantage is that the Live Chat Plugin is only purchased once, so you don't have to worry about recurring payments.

Also, if you want to use custom plugins but you're not comfortable tinkering with servers and prefer to have someone do it all for you, consider managed WordPress hosting. Thanks to Envato's partnership with SiteGround, you can get up to 60% off managed WordPress hosting.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.