How To Integrate A Live Chat To Magento 2?

integrate live chat in magento 2

Every e-Store 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. 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 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 terminal, type:       sudo rm -rf var

How To Integrate A Live Chat To Magento 2: Step 2
You have just created a live chat menu.

Step 3: Set up 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 terminal, type:       sudo rm -rf var

From live chat menu, click LIVE CHAT > Configuration

How To Integrate A Live Chat To Magento 2: Step 3
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 chatpirate.com and go to chat pirate dashboard.

Second, click Settings > Integrations > Website

How To Integrate A Live Chat To Magento 2: Step 4
integrate live chat in magento 2

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. Before you can finally integrate live chat in Magento 2, perform the the last step below.

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

<?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 terminal, type: sudo rm -rf var

How To Integrate A Live Chat To Magento 2: Step 5

And here is the result.

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

integrate live chat in magento 2

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 question to this blog, feel free to ask us at the commect section.

Don't want to miss out on our latest insights?
Subscribe to our newsletter.

Disclaimer: By clicking submit, you agree to share your information with us to receive news, announcements, and resources when they are available.