WhatsApp Chat: Add Magento 2 Whatsapp Extension

In this article, we are going to tell you how you can create a free Magento 2 WhatsApp Chat Set extension for instant communication with customers and allow them to share your product with their contact details.

Magento 2 WhatsApp Chat Button

 

Magento 2 WhatsApp Chat Features

  • Easy to use
  • You can customize your message from the Magento admin.
  • Allow you to set button sizes like small, medium, large from the admin setting.
  • Gives you the option to change the default WhatsApp mobile number from the Magento admin.
  • Easy customization option from admin as per your requirements.
  • Easy to Install and configure

WhatsApp Chat Admin Configuration

 

Magento 2 WhatsApp Chat Module Basic File

Wishuscess Magento expert developer developed a free whats app chat extension which allows changing the setting from admin side like its's provide the options to change the number from admin and set the default message.

So for that, you need to create some basic files and that basic files are:

app/code/Wishusucess/WhatsAppChat/registration.php

app/code/Wishusucess/WhatsAppChat/etc/module.xml

app/code/Wishusucess/WhatsAppChat/etc/config.xml

app/code/Wishusucess/WhatsAppChat/adminhtml/system.xml

app/code/Wishusucess/WhatsAppChat/Helper/Data.php

app/code/Wishusucess/WhatsAppChat/view/frontend/layout/default.xml

app/code/Wishusucess/WhatsAppChat/view/frontend/templates/button.phtml

app/code/Wishusucess/WhatsAppChat/view/frontend/web/css/whatsapp-chat.css

app/code/Wishusucess/WhatsAppChat/view/frontend/web/images/button.png

 

Register Your WhatsApp Chat Module

app/code/Wishusucess/WhatsAppChat/registration.php

<?php
/*
|--------------------------------------------------------------------------
| Wishsucess WhatsAppChat Module
|--------------------------------------------------------------------------
|
| WhatsAppChat Extension To Share Product in Magento 2
|
| @author Hemant Singh
| http://www.wishusucess.com/
*/
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Wishusucess_WhatsAppChat',
__DIR__
);

 

Give The Basic Information of Module

app/code/Wishusucess/WhatsAppChat/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
<module name="Wishusucess_WhatsAppChat" setup_version="1.0.0"></module>
</config>

 

Set Default WhatsApp Chat Number in Magento 2

This file allows you to set the default setting for your What's App Chat Extensions. Here you can set the default Whats App number and default message.

app/code/Wishusucess/WhatsAppChat/etc/config.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
<default>
<contact>
<whatsapp_chat>
<status>1</status>
<phone_number>+91-79922XXXXX</phone_number>
<message>Hello! I am interested in your product</message>
</whatsapp_chat>
</contact>
</default>
</config>

 

Manage Configuration From Magento 2 Admin

In Wishusucess What's App Chat Extension this system.xml file allows you to manage your module configuration from the Magento backend.

app/code/Wishusucess/WhatsAppChat/adminhtml/system.xml

<?xml version="1.0"?>
<!--
/**
* Wishsucess WhatsAppChat Module
* WhatsAppChat Extension To Share Product in Magento 2
* See COPYING.txt for license details.
* http://www.wishusucess.com/
* @author Hemant Singh
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
<system>
<section id="contact" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
<class>separator-top</class>
<label>Contacts</label>
<tab>general</tab>
<resource>Wishusucess_WhatsAppChat::contact</resource>
<group id="whatsapp_chat" translate="label" type="text" sortOrder="51" showInDefault="1" showInWebsite="1" showInStore="1">
<label>WhatsApp Chat</label>
<field id="status" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="0" canRestore="1">
<label>Status</label>
<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
<comment>Enable/ disable Whats App Chat</comment>
</field>
<field id="phone_number" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
<label>Phone Number</label>
<comment>Full phone number in international format. Example: +91xxxxx</comment>
<depends>
<field id="status">1</field>
</depends>
</field>
<field id="message" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
<label>Message</label>
<comment>Pre-filled message that will automatically appear in the text field of a chat</comment>
<depends>
<field id="status">1</field>
</depends>
</field>
</group>
</section>
</system>
</config>

 

Get WhatsApp Chat Data in Magento 2

Through the Data.php file, you can get your mobile number and text message in your what's app chat extension.

This class provides you the functionalities to use your class anywhere on the website, You can call this in view/frontend templates as well as block, controller files.

app/code/Wishusucess/WhatsAppChat/Helper/Data.php

<?php
/*
|--------------------------------------------------------------------------
| Wishsucess WhatsAppChat Module
|--------------------------------------------------------------------------
|
| WhatsAppChat Extension To Share Product in Magento 2
|
| @author Hemant Singh
| http://www.wishusucess.com/
*/
namespace Wishusucess\WhatsAppChat\Helper;

class Data extends \Magento\Framework\App\Helper\AbstractHelper
{

public function __construct(
\Magento\Framework\App\Helper\Context $context
) {
parent::__construct($context);
}

/**
* Return status
*
* @return string
*/

public function getStatus(){
return $this->scopeConfig->getValue('contact/whatsapp_chat/status', 
\Magento\Store\Model\ScopeInterface::SCOPE_STORE);
}

/**
* Return phone
*
* @return string
*/

public function getPhone(){
return $this->scopeConfig->getValue('contact/whatsapp_chat/phone_number', 
\Magento\Store\Model\ScopeInterface::SCOPE_STORE);
}

/**
* Return message
*
* @return string
*/

public function getMessage(){
return $this->scopeConfig->getValue('contact/whatsapp_chat/message', 
\Magento\Store\Model\ScopeInterface::SCOPE_STORE);
}
}

 

Set Default Chat Button for Everywhere

app/code/Wishusucess/WhatsAppChat/view/frontend/layout/default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="Wishusucess_WhatsAppChat::css/whatsapp-chat.css" />
</head>
<body>
<referenceContainer name="before.body.end">
<block class="Magento\Framework\View\Element\Template" name="dangs_whatsapp_chat" 
template="Wishusucess_WhatsAppChat::button.phtml" 
before="before.body.end" cacheable="false">
</block>
</referenceContainer>
</body>
</page>

 

Create Chat Template File

app/code/Wishusucess/WhatsAppChat/view/frontend/templates/button.phtml

<?php $helper = $this->helper('Wishusucess\WhatsAppChat\Helper\Data');?>

<?php if($helper->getStatus()): ?>
<div id="wachat">
<a href="https://web.whatsapp.com/send?phone=<?php echo $helper->getPhone(); ?>&amp;text=<?php echo $helper->getMessage(); ?>" onclick="gtag('event', 'WhatsApp', {'event_action': 'whatsapp_chat', 'event_category': 'Chat', 'event_label': 'Chat_WhatsApp'});" target="_blank" class="btn-web">
<img src="<?php echo $this->getViewFileUrl('Wishusucess_WhatsAppChat::images/button.png'); ?>" alt="WA button">
</a>

<a href="https://wa.me/085236725506?text=<?php echo $helper->getMessage(); ?>" onclick="gtag('event', 'WhatsApp', {'event_action': 'whatsapp_chat', 'event_category': 'Chat', 'event_label': 'Chat_WhatsApp'});" target="_blank" class="btn-mobile">
<img src="<?php echo $this->getViewFileUrl('Wishusucess_WhatsAppChat::images/button.png'); ?>" alt="WA button">
</a>
</div>

<style type="text/css">
@media(max-width: 768px) {
#wachat .btn-web{
display: none;
}
}
@media(min-width: 768px) {
#wachat .btn-mobile{
display: none;
}
}
</style>
<?php endif; ?>

 

Apply CSS on Your What's App Chat Button

app/code/Wishusucess/WhatsAppChat/view/frontend/web/css/whatsapp-chat.css

#wachat a {
position: fixed;
z-index: 9999;
right: 0;
float: right;
top: 40%;
margin-top: -25px;
cursor: pointer;
min-width: 50px;
max-width: 150px;
color: #fff;
text-align: center;
padding: 10px;
margin: 0 auto 0 auto;
background: #20b038;
-webkit-transition: All .5s ease;
-moz-transition: All .5s ease;
-o-transition: All .5s ease;
-ms-transition: All .5s ease;
transition: All .5s ease;
}

#wachat a img{
width: 50px;
}

Add Your Favorite What's App Chat Button

app/code/Wishusucess/WhatsAppChat/view/frontend/web/images/button.png

 

Now, Run Following Command:

php bin/magento setup:upgrade

php bin/magento setup:di:compile

php bin/magento setup:static-content:deplpy -f

php bin/magento cache:clean

 

Magento 2 WhatsApp Chat Convert Prospects into Customers

We have developed this product in such a way that this Wishsuccess Magento 2 What's App chat module will boost your store sales and attract a wider audience for your store.

And we have also given the functionality which will give you the flexibility to change the message while sharing the product and customers can share a product with URLs along with your customized messages and the product title, description, etc.

You can Hire Magento 2 Developer to add more functionality as per your needs.

 

Download Link:

Wishusucess What's App Chat Extension in Magento 2

 

Related Post:

Wishusucess AdminMenu: How to Create Magento 2 Admin Menu Module

Search AutoComplete: Magento 2 Module Add All Category for Search

Sort By Price: Add Sort By Price High to Low & Low To High in Magento 2

 

Recommended Post:

Magento 2.4 Installation Guide: How to Install Magento 2.4.2

Magento Store: Best 36 Magento Websites Example in The World

SEO Packages: How Much Do SEO Packages Cost in India, SEO Pricing

 

 

Leave a Reply