hello Why and How to Add a Live Chat to Drupal

Live chat can improve your website's customer experience and increase sales. Learn how to add the LiveChat module in Drupal to your website.

Your website is your company's digital office that needs to be as welcoming and supportive as possible. Whenever your current or prospective customers want to talk to you to resolve a problem, answer a question, or make a purchase decision, you need to provide this option to them.

Among all customer support channels, a live chat is one that stands out. Customers love it, and it also has a wide range of practical benefits for businesses.

The benefits of live chat

Getting an instant, accurate, relevant, and complete answer in a simple live chat form is often more convenient and less stressful for customers than going through long and tedious email communication, struggling with interactive voice responses (IVR), suffering endless elevator music while waiting in a call center queue, or searching through heaps of documentation. 

This does not mean you must give up on a good FAQ section or other customer support channels suitable for your organization. You can win from a combination of those, but a live chat remains unmatched in many situations and for many clients. 

With live chat enabled on your website, you can increase conversions, improve customer loyalty and retention, provide a spotless brand reputation, maintain a competitive edge, provide better team productivity, better understand your customers, build trust, and provide proactive communication.

How to add a live chat to a Drupal website

Drupal has outstanding third-party integration and customization capabilities, so you can talk to Drupal experts to integrate the live chat software of your choice. In addition, Drupal also has a wide range of free contributed modules that simplify its integration with various services. When it comes to modules for live chats, the LiveChat module is currently the most popular one.

The LiveChat module offers a wide range of capabilities for advanced live chat experiences. Just like all of Drupal's community-created tools, it is absolutely free for everyone to install. The LiveChat software, however, requires a subscription after a 14-day free trial.

The LiveChat app

The LiveChat app

Here's how to add LiveChat to your Drupal website:

1. Install the module

Start by installing the LiveChat module on your Drupal website. The highly recommended way to install modules in Drupal is with the Composer command-line tool: 

composer require drupal/livechat

Once you have installed the module, you can access its settings page by clicking "Configure" next to the module on the Extend tab, or by clicking "LiveChat" in Drupal's main menu under Administration > Configuration > Web services.

How to go to the module's settings page

How to go to the module's settings page

2. Authentication and initial setup

The first thing you will see on the module's settings page are the options to sign in with LiveChat or create an account if you don't have one. You can also quickly sign up using a Google account. LiveChat will just take you through a few sign-up and setup steps.

The module's settings page before authentication

The module's settings page before authentication

During setup, LiveChat will offer you some interesting options. Among them is receiving messages from your Facebook pages, as well as inviting other team members via their email addresses and granting rights to them.

The option to invite people to your team

The option to invite people to your team

Once the steps are completed, you will see a message on the module's settings page that you are now rocking your chat window from your account. The page offers you the option to hide the chat widget on mobile and for logged-in users. By default, it's "no" for both.

The default setup is absolutely ready for you to use. You can also customize the module from the LiveChat dashboard.

The initial setup completion

The initial setup completion

Right out of the box, you should have a chat icon in the right bottom corner of your Drupal website's front-end pages.

The LiveChat icon on your website

The LiveChat icon on your website

Once a visitor clicks the icon, the chat window will open with a welcome greeting. If the visitor clicks "Chat now," they will be asked to add their name and email address to start a conversation. The window will display the support agent's name with a message offering help. If a visitor returns to the page again, they will get a welcome-back message. You should also receive voice notifications about visitors and incoming conversations.

The welcome greeting

The welcome greeting

3. More settings

The above example shows the almost out-of-the-box setup of LiveChat. We have tweaked it just a little bit. Specifically, we have edited the agent's name and added his profile picture by going to the Agents tab of the LiveChat dashboard. We have also changed the top bar message in the chat window to "Welcome, dear visitor!" on the Settings > Language > Customize phrases tab of the same LiveChat dashboard.

Editing the top bar message

Editing the top bar message

The dashboard offers tons of other interesting options to play with, including these:

  • The Settings tab lets you configure every detail as regards the appearance of the web and mobile widget, greetings, notifications, pre-chat and post-chat forms, ratings for agents, distribution of conversations among the agents, security precautions, and so on.
  • You can view all dialogues, reply to them, check traffic, get detailed reports of communication, and more. 
  • The links to add MailChimp, HelpDesk, Instagram for Business, HubSpot, and other services are found directly in the LiveChat menu.

The LiveChat dashboard

The LiveChat dashboard

You can also tweak the design directly on your Drupal site. There is a new and interesting option in LiveChat that you can access by going to Settings > Chat widget > Customization and opening the "Customize widget on website" tab. 

By clicking on the arrow next to your website URL, you will be taken to your Drupal website where you will see the LiveChat Live Editor. It will enable you to customize the colors, the light or dark mode, the maximized and minimized widgets, the alignment, and the spacing of your chat.

Going to the customizing tool on the Drupal website

Going to the customizing tool on the Drupal website

Example of customizations in the Live editor

Example of customizations in the Live editor

A live chat can be configured in different ways to meet your organization's needs and workflows. If you need help, our Drupal team has the expertise and experience to create the most compelling digital experiences for your audience. We can help you add a live chat or any other feature on your website for your successful communication with customers.

This article is adapted from Reaching Out to Users: Why and How to Add a Live Chat to Drupal and is republished with permission from the author.