How to integrate live chat to Magento 2

Every e-Store owner knows the importance of Live Chat to their site. It provides Real-time Customer Support, boosts sales and generates customer behavior data for further study. Nowadays, there are plenty of Live Chat services for you to choose. In this article, I will guide you through the process of integrating a Live Chat to your Magento 2 site.

Step 1: Create a module

In this section, we set up a module called “LiveChat”.

 

In order to create a module, you need to create a registration file: your_magento_base/app/code/Magenest/LiveChat/resgistration.php

(Magenest is our company name, you can set up with any name)

Then create: your_magento_base/app/code/Magenest/LiveChat/etc/module.xml

Open your terminal, type:       cd /var/www/html/magento2.1.6/

(Note that I’m magento2.1.6, your path to the folder might be different)

 

Then type:                              sudo bin/magento setup:upgrade

and                                          sudo chmod -R 777 var pub

 

Go to your phpmyadmin, if there is “Magenest_LiveChat” in setup_module, your module is installed.phpmyadmin module check

Step 2: Create a menu

Create: your_magento_base/app/code/Magenest/LiveChat/etc/adminhtml/menu.xml

In terminal, type:       sudo rm -rf var

Live Chat at Navbar

You have just created a live chat menu.

 

 

Step 3: Set up configuration

In the previous step, we added an action:

In order to go to the configuration, we need to set up the configuration for that link.

Create: your_magento_base/app/code/Magenest/LiveChat/etc/adminhtml/system.xml

In terminal, type:       sudo rm -rf var

From live chat menu, click LIVE CHAT > Configuration

Your configuration section is set up.

Step 4: Get Widget Code from a live chat website

In this tutorial, we use Chat Pirate. Don’t be afraid, the other live chat websites also work in the same way as Chat Pirate.

First, sign up an account on https://chatpirate.com/ and go to chat pirate dashboard.

Second, click Settings > Integrations > Website

Third, copy these codes and save in Widget field in our live chat configuration.

Final, click Save Config, a Cache Management notification will appear, you need to refresh all cache by Select All and Submit refresh.

Ok, now you have the Widget Codes. All you need to do is running the Widget Codes on the front-end. Let’s finish this integration by doing the last step.

Step 5: Set up front-end.

We need to get the Widget Codes from our Configuration.

Create: your_magento_base/app/code/Magenest/LiveChat/Block/Adminhtml/LiveChatHelper/LiveChatConfig.php

Create:  your_magento_base/app/code/Magenest/LiveChat/view/frontend/layout/default.xml

Create: your_magento_base/app/code/Magenest/LiveChat/view/frontend/templates/livechatwidget.phtml

Finally, in terminal, type: sudo rm -rf var

And here is the result.

If you don’t want to turn on live chat, just disable it in the live chat configuration.

That’s it !! You have finished setting up a live chat integration in Magento 2. The other live chat websites are also based on this operation, so this simple module can be applied easily. If you have any question to this blog, feel free to ask us at the commect section.