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 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
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(); ?>&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