How To Integrate A Live Chat To Magento 2?

Every eStore owner knows the importance of Live Chat to their site, but perhaps using just words cannot describe how important it is to integrate Live Chat in Magento 2. 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 from. In this article, we will guide you through the process to integrate Live Chat in Magento 2 sites.

How To Integrate A Live Chat To Magento 2 with 5 steps

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 it up with any name)

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Magenest_LiveChat',
    __DIR__
);

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

<?xml version="1.0"?>
<config xmlns:xsi="//www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Magenest_LiveChat" setup_version="1.0.0">
</module>
</config>

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.

Step 2: Create a menu

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

<?xml version="1.0"?>
<config xmlns:xsi="//www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
    <menu>
        <add id="Magenest_LiveChat::menu"
             title="Live Chat"
             module="Magenest_LiveChat"
             sortOrder="25"
             resource="Magento_Backend::system" />
        <add id="Magenest_LiveChat::memberMenu"
             title="Live Chat Setting"
             module="Magenest_LiveChat"
             sortOrder="10"
             parent="Magenest_LiveChat::menu"
             resource="Magenest_LiveChat::config_livechat" />
        <add id="Magenest_LiveChat::configuration"
             title="Configuration"
             module="Magenest_LiveChat"
             sortOrder="15"
             action="adminhtml/system_config/edit/section/magenest_livechat/"
             parent="Magenest_LiveChat::memberMenu"
             resource="Magenest_LiveChat::config_livechat" />
    </menu>
</config>

In the terminal, type:       sudo rm -rf var

Step 3: Set up the configuration

In the previous step, we added an action:

action="adminhtml/system_config/edit/section/magenest_livechat/"

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

<?xml version="1.0"?>
<config xmlns:xsi="//www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="magenest" translate="label" sortOrder="200">
            <label>Magenest</label>
        </tab>
        <section id="magenest_livechat" translate="label" type="text" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1">
            <class>separator-top</class>
            <label>Live Chat</label>
            <tab>magenest</tab>
            <resource>Magenest_LiveChat::config_livechat</resource>
            
            <group id="livechat" translate="label" type="select" sortOrder="30" showInDefault="1" showInWebsite="1"
                   showInStore="1">
                <label>Live Chat</label>
                <field id="enabled" translate="label comment" type="select" sortOrder="10" showInDefault="1"
                       showInWebsite="1" showInStore="1">
                    <label>Enable</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="widget" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="0"
                       showInStore="0">
                    <label>Widget</label>
                    <validate>required-entry</validate>
                    <depends>
                        <field id="enabled">1</field>
                    </depends>
                </field>
            </group>
        </section>
    </system>
</config>

In the terminal, type:       sudo rm -rf var

From the live chat menu, click LIVE CHAT > Configuration

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 for an account on chatpirate.com and go to chat pirate dashboard.

Second, click Settings > Integrations > Website

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

Finally, click Save Config, and 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 run the Widget Codes on the front end. Before you can finally integrate live chat in Magento 2, perform the last step below.

Step 5: Set up the 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

<?php
namespace Magenest\LiveChat\Block\Adminhtml\LiveChatHelper;
class LiveChatConfig extends \Magento\Framework\View\Element\Template
{
    protected $scopeConfig;
    const XML_PATH_ENABLED = 'magenest_livechat/livechat/enabled';
    const XML_PATH_WIDGET = 'magenest_livechat/livechat/widget';
    public function __construct(
        \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig,
        \Magento\Framework\View\Element\Template\Context $context
    )
    {
        $this->scopeConfig = $scopeConfig;
        parent::__construct($context);
    }
    public function isEnabled() {
        $storeScope = \Magento\Store\Model\ScopeInterface::SCOPE_STORE;
        return $this->scopeConfig->getValue(self::XML_PATH_ENABLED, $storeScope);
    }
    public function getWidget()
    {
        $storeScope = \Magento\Store\Model\ScopeInterface::SCOPE_STORE;
        return $this->scopeConfig->getValue(self::XML_PATH_WIDGET, $storeScope);
    }
}

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

<?xml version="1.0"?>
<page xmlns:xsi="//www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magenest\LiveChat\Block\Adminhtml\LiveChatHelper\LiveChatConfig"
                   name="front_livechat"
                   template="Magenest_LiveChat::livechatwidget.phtml" />
        </referenceContainer>
    </body>
</page>

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

<?php
if($block->isEnabled()) {
    echo $block->getWidget();
}
?>

Finally, in the 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! Now you can integrate live chat 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 questions about this blog or face any problems in the process of integrating live chat into your Magento 2 store, feel free to contact our Magento experts.