How to Add Live Chat in WordPress? (Just 8 Steps)

Adding a live chat to your website improves your overall site performance and customer engagement. The main reason for adding a live chat is to make communication with the customers more personal and make them comfortable to approach you.

If there is a live chat option on your website, customers do not need to search for the contact form or contact number on your website to initiate a query. They can immediately drop a message to the chat widget and wait for the response. So, which is the best live chat for your WordPress website? How can you add live chat in WordPress? Let us discuss it in this article.

Which is the Best WordPress Live Chat Plugin?

When you plan to add live chat to the WordPress website, it is better to do research on all available live chat extensions in the market and their specifications. Every live chat plugin offers a different set of features, hence it is important to choose the one that satisfies all the requirements you are looking for.

If you are looking for a live chat plugin with a handful of advanced features and helps to integrate AI (Artificial Intelligence) in your communications, WSChat – ELEX WordPress Live Chat Plugin would be the right option. To know more about the features of this robust plugin, go through an article – The Best WordPress User Chat Plugin.

How to Add Live Chat in WordPress | WSChat-–-ELEX-WordPress-Live-Chat-PluginNow, let us check how to add this plugin to your WordPress website.

How to Add Live Chat in WordPress?

Step 1: Installation and activation

The first step is to visit the product page, subscribe, install, and activate the plugin in your WordPress dashboard.

To know more about the procedures to configure and manage the tabs, refer to its documentation.

Step 2: Configure the chat widget to be displayed on the website

The next step is to set up how the chat widget will be displayed on your WordPress website. To do the same, go to WSChat > Settings > Chat Settings.

By default, a sound notification will be triggered to the customers as well as agents when a message is received. You can choose a sound from the drop-down list to be set as the notification sound for both of them.

You can turn on the live chat widget and set the status as Online or Offline as and when you require. And, if the chat widget needs to be displayed exclusively for selected user roles, you can choose the user roles from the list. If you do not want to display the chat widget on all pages in your WordPress website, you can choose the pages on which you need to display the widget.

You can choose a font from the list of Sans-serif, Monospace, Fantasy, Roboto, or Cursive besides a default auto font to be used on the chat widget. And you have an option to set a custom Header Text.

Set chat header options

You can set the options for the customers for helping them to clarify the issue or doubt they are facing. By default, there will be an option to mute the chat notification. Other options available on this plugin are as follows.

  • Attachment: An option to attach and send files.
  • Video Recorder: Customers can record and send a video instantly.
  • Send chat history: They can enter the desired email ID and send the entire chat to that mail ID.
  • Chat rating: Customers can rate the chat communication and your support service using the like and dislike buttons.

All these 4 options are totally optional. You can enable the required options according to your needs.

How to Add Live Chat in WordPress | Chat-Widget-header-options

This is how it will look if you enable all the 4 chat header options.

Step 3: Set up a pre-chat form

Setting up a pre-chat form is important to collect the details of a customer before proceeding with a conversation with them. It will be very useful to get information about unregistered users before starting the conversation with them. Simply enable this option when you are offline to get the details and get back to them when you are online. You can use the same when you are online as well.

How to Add Live Chat in WordPress | pre-chat-form-settings

By default, there are 3 fields you can enable by activating them such as Name, Email, and Phone number. You can create custom fields and make them mandatory fields to be filled up by the customers.

Check the below screenshot that depicts how it will look when a customer skips to fill up a mandatory field.

Step 4: Set up the theme color of the chat widget

To make the chat widget to be in sync with your WordPress website, you can choose the colors for each option. To set up the colors, go to WSChat > Settings > Widget Appearance.

You can simply choose the color from the tab or use the default colors by clicking Reset to Default.

You can set the colors of the options listed below.

  • Header Background
  • Header Text Color
  • Chat Background
  • Agent Message Background
  • Visitor Message Background
  • Message Text Color

How to Add Live Chat in WordPress | widget-colors

Check the image that marked all options and where the colors will reflect on the widget.

How to Add Live Chat in WordPress | widget-colors-1

Step 5: Set up features for agents

Agents are assigned to reply to the customers. WSChat plugin allows you to add unlimited agent profiles and even helps you to import agent profiles from WSDesk – ELEX WordPress Helpdesk & Customer Support Ticket System Plugin since both plugins are highly compatible with each other.

For creating an agent profile, you can enable the Create New User option, add the email, and password. Then click Submit.

The created profiles will be listed on this tab. You can remove the agents if required.

How to Add Live Chat in WordPress | Creating-an-Agent-Profile

Step 6: Configure email notifications to be triggered to customers

This option is to trigger an email notification to the customers from the pre-chat form. You can enter the details like a sender name, sender email address, and a common subject line.

How to Add Live Chat in WordPress | Email-Settings

After enabling the Email Notification option, an email notification will be sent to the configured ‘from’ email ID when a chat is initiated.

Step 7: Integrate Artificial Intelligence for an advanced chatting experience

If you need to provide responses to customers when you are offline or not available, you can make use of this option. This plugin is compatible with Google’s Dialogflow, a machine learning tool that helps to trigger automated responses.

With this option, you can add training phrases by adding the queries that would be asked by the customers, and set corresponding responses in the form of text, image, audio, video, or any other file format.

After configuring these on Dialogflow, you can fetch the Project ID and Google service account private key file and add it to the corresponding field to activate the automating options. You can even choose a language for the convenience of agents.

For adding the details, go to WSChat > Settings > Chatbot AI.

How to Add Live Chat in WordPress | WSChat-Chatbot-AI-Setting (3)

To know the process in detail refer to the article – Detailed Guide on Setting up Dialogflow – Artificial Intelligence Based NLP, Optimized for the Google Assistant and Chatbot Development.

Step 8: Start chatting with customers

You can either start a chat from your side for presale assistance or continue with a conversation initiated by the customers.

If you want to initiate a message from your side, go to the Live Visitors tab and click on the link of users listed over there. This tab will display the visitors of your website, the page they are viewing, the OS of their device, and the time they spend on your website.

After clicking the link of each visitor, you will be redirected to the chat dashboard wherein you can send a message to them.

Go to WSChat > Active Visitors.

How to Add Live Chat in WordPress | live-chat-visitors

If you want to reply to the message sent by the customers, go to WSChat > Live Chat > Active tab.

How to Add Live Chat in WordPress | incoming-chat-from-customers

You can see the messages received on the Active tab. From there you can click the thread and reply to them after clicking the Join option (if it is a new conversation).

If you are offline, you can take up the chat from the Missed Chats tab.

The chat will be moved to the Recent tab after the session ended. All assigned chats to the agents will be listed under the Assigned tab.

You can monitor the details of customers in real-time while chatting with them. You can check their name, last seen, email ID, phone number, location, the current page they are viewing on your website, and the date & time in their country or location by clicking the 3 dots on the right side corner.

How to Add Live Chat in WordPress | Customer-details

If you are a WooCommerce store owner, you can easily track the products in the customer’s shopping cart and the all order details they made from your store till date.

And, you can directly search for a product in your store and send it to the customers in one click. When a customer clicks the link, they will be redirected to the Cart page.

How to Add Live Chat in WordPress | Sending-products-to-customers

You can also convert a chat to a ticket, invite an agent to reply to the chat, and send the conversation to an entered email ID if your website is integrated with WSDesk – ELEX WordPress Helpdesk & Customer Support Ticket System plugin.


This is how you can add live chat in WordPress using WSChat – ELEX WordPress Live Chat Plugin. This feature-rich plugin allows you to customize the chat widget and the options to be offered to your customers seamlessly. Better communication with customers always drives sales and improves ROI.


Further Reading:

Popular Tags

Blog Business Case Code Snippet Documentation ELEX Address Validation & Google Address Autocomplete Plugin for WooCommerce ELEX Amazon Payments Gateway for WooCommerce ELEX Payment Gateway for WooCommerce ELEX Bulk Edit Products, Prices & Attributes for WooCommerce ELEX Dynamic Pricing and Discounts Plugin for WooCommerce ELEX EasyPost Auto-Generate & Email Labels Add-On ELEX EasyPost Shipping Method Plugin for WooCommerce ELEX Google Product Feed Plugin ELEX Hide WooCommerce Shipping Methods Plugin ELEX ShipEngine Multi-Carrier Shipping & Label Printing Plugin for WooCommerce ELEX Shipping Plugin with USPS Postage for WooCommerce ELEX USPS Auto-Generate & Email Labels Add-On ELEX WooCommerce Abandoned Cart Recovery with Dynamic Coupons ELEX WooCommerce Australia Post Bulk Label Printing Add-On ELEX WooCommerce Australia Post Shipping Plugin with Print Label & Tracking ELEX WooCommerce Catalog Feed for Facebook & Instagram ELEX WooCommerce Catalog Mode, Wholesale & Role Based Pricing ELEX WooCommerce Choose Your Delivery Date Plugin ELEX WooCommerce DHL Express / eCommerce / Paket Shipping Plugin with Print Label ELEX WooCommerce DHL Express Bulk Label Printing Add-On ELEX WooCommerce Discount per Payment Method Plugin ELEX WooCommerce EasyPost Bulk Label Printing Add-On ELEX WooCommerce EasyPost Return Label Add-On ELEX WooCommerce Name Your Price Plugin ELEX WooCommerce Product Price Custom Text (Before & After Text) and Discount Plugin ELEX WooCommerce Bulk Label Printing Add-On ELEX WooCommerce USPS Shipping Plugin with Print Label ELEX WooCommerce Request a Quote plugin for WooCommerce ELEX WordPress Embed YouTube Video Gallery ELEX WordPress Embed YouTube Video Gallery Plugin FAQ Getting Started Knowledge Base Open Source HelpDesk & Customer Support Ticketing System – Simple & Flexible Plugin Integrations ReachShip WooCommerce Multi-Carrier & Conditional Shipping Plugin Shipping Plugins Uncategorized WooCommerce WSChat - WordPress Live Chat Plugin WSDesk - WordPress Helpdesk Plugin