Back to Top

WhatsApp Contact for Magento 2

Updated 8 August 2024

Magento 2 WhatsApp Contact extension allows the customers to contact and communicate with the store admin via WhatsApp.

This can be done quickly just by a single tap on the WhatsApp button present in multiple pages of the store.

This module will help the customer for contacting the admin in a better and faster way.

The customers can easily quote the product and get a revert on the same via a smart communication path that is WhatsApp.

Watch the video tutorial below to understand the Magento 2 WhatsApp extension workflow:

Searching for an experienced
Magento 2 Company ?
Find out More
ika7s869mCk

Check the working of the plugin at the android device end –

GchdJXHARrU

Features

  • The admin can enable/disable the WhatsApp sharing feature.
  • Admin will manage the visibility of the buttons present in multiple pages separately.
  • The admin can set custom button title for WhatsApp sharing buttons.
  • Admin can set Customized messages.
  • The customer can quote the product from any of the pages i.e product page, cart page, and the order success page.
  • The customer easily requests for a quotation on WhatsApp regarding the product.
  • Customers can easily share order details with admin for faster processing of the order.
  • Magento 2 WhatsApp Contact is compatible with the Hyva Theme.

Note –

  • The customer and admin both must have an active WhatsApp account.
  • It is a must for the customer to add their WhatsApp to the Web.

Installation Steps

For installing WhatsApp Contact for Magento 2 extension, follow the steps mentioned below:

Step 1: The customers will get a zip folder and they have to extract the contents of this zip folder on their system. Please select the correct folder according to your Magento version (2.1.x, 2.2.x, or 2.3.x ).

Now, unzip the respective extension zip and then move the “app” folder (inside “SRC” folder) into the Magento root directory on the server.

filezilla

Step 2: After the above step, run the below mentioned commands in the Magento 2 root directory via terminal.

#Run Commands

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy

Step 3: Lastly, flush the cache and re-index all by navigating through System->Cache Management.

Webkul Coupon Listing for Magento 2 - Flush Cache

Translation Steps

For translating the module language, navigate through app>code>Webkul>WhatsApp Sharing>i18n and edit the en_US.csv file.

Now, translate the words on the right and upload the modified file to the same location. The filename of the translated file should be according to the language and region code like de_DE.csv.

translation1

Admin End Configurations

After the successful installation of the Magento 2 WhatsApp Contact module, the admin can now configure it from the backend. For this, the admin will navigate to Stores > Configurations > WhatsApp Sharing.

Whatsapp Sharing Configuration
Whatsapp sharing other configuration

Under the WhatsApp Sharing Configurations, the admin will enter the following details:

Enable: With this, the admin can Enable/ Disable the functionality of the module at once.

Country: The admin can choose the country from the drop-down.

WhatsApp Number: The admin will add the Active WhatsApp number via which communication will be done with the customer.

Guest Communication: The admin will restrict the guest customers to use this feature:

  • Yes: The guest customer will be able to scan the Whatsapp code for adding it to the web.
  • No: The guest customer needs to create the account first, for that the customer will navigate to the sign-in page.

Settings Associated To Buttons

Display Button On Product Page: The admin will select Yes to display button on the Product page, and No to hide the same

Button Title For Product Page: The admin will enter the button title that will appear on the button present on the product page.

Custom Message For Product Page: The admin will enter the custom message, this message will be receive by the admin when the customer clicks on the WhatsApp Button present in the Product Page.

Display Button On Cart Page: The admin will select Yes to display the button on the Cart page, and No to hide the same.

Only Share Custom Message Via Cart Page: If the admin selects Yes to this field then only the custom message will be send to the admin, whereas when the customer selects No then the cart details will be send with the custom message.

Button Title For Cart Page: The admin will enter the button title that will appear on the button present on the Cart page.

Custom Message For Cart Page: The admin will enter the custom message, this message will be received by the admin when the customer clicks on the WhatsApp Button present in the Cart Page.

Display Button On Order Success Page: The admin will select Yes to display the button on the Order Success page, and No to hide the same

Button Title For Order Success Page: The admin will enter the button title that will appear on the button present in the Order Success page.

Custom Message For Order Success Page: The admin will enter the custom message, this message will be received by the admin when the customer clicks on the WhatsApp Button present in the Order Success Page.

Front End Visibility

After the Configurations are completed from the admin end,the feature will be visible to the customer in the front end.

However, the buttons will be visible on one of the three pages of the store:

  • Product Page
  • Cart Page
  • Order Success Page

Enable WhatsApp Web

Firstly, it is important for the customers to enable their WhatsApp web for their whatsapp number, so that they can use it in their laptops as a website.

Whenever the customer clicks on any of the buttons presents anywhere in the header of the page or any specific page a WhatsApp window will appear as shown in the image below:

WhatsApp

The customer can also get the same QR Code by clicking on the link: https://web.whatsapp.com/

Further, the customer is require to scan their WhatsApp QR Code. After that, customer can access their WhatsApp from the web browser and now they can communicate with the admin.

*Note: If the guest customers are allowed to communicate with the admin then by clicking on this they can directly scan the code. Whereas, if they are not allowed, they need to create an account first to contact the admin.

Whatsapp Contact Button On Product Page

Further, the WhatsApp button will be visible on the product page if the admin allows from the backend. The customer can quickly tap on it for contacting the admin of the store. Firstly, let’s see the view of the button on the product page of the store:

testdevmage.com_11155_joust-duffle-bag.htmlscreenshot

For connecting to the admin, the customer will click on the WhatsApp button, After that, the customer will navigate to the WhatsApp chat window.

Else, if the WhatsApp is not added to the web, they need to scan the QR Code present there to add the WhatsApp to the web. The process to add the Whatsapp to the web is available above in this user guide.

Under the WhatsApp chat window, the customer will send the message to the admin that will be automatically present in the typing box. The message will appear as shown in the image below:

web.whatsapp.com_screenshot-3

When the customer contacts the admin from the product page only the product name and link will be sent to the admin.

web.whatsapp.com_screenshot-1-1

The admin can then reply to the customer as required.

web.whatsapp.com_screenshot-2-1

Whatsapp Contact Button On Cart Page

Just in case, the customer wants to quote the product or to discuss something regarding the product to the admin from the cart page, then the system also provides a Whatsapp button under the cart page:

testdevmage.com_11155_checkout_cart_screenshot

After clicking on the Whatsapp button under the cart page, the customer will navigate to the WhatsApp Chat Window.

In case, WhatsApp is not added to the web, they need to scan the QR Code present there that will add the WhatsApp to the web. The process to add the WhatsApp to the web is available above in this user guide.

Further, the customer can see the message pre-fill in the message box, the window will look like the image below when the customer sends that message:

screenshot_from_2023_07_19_11_55_41

When the customer contacts admin from the cart page, the custom message, product details, and the product link gets share with the admin.

WhatsApp Contact Button On the Order Success Page

The most interesting point in this module is that the customer can also contact the admin from the order success page. For this, the customer will click on the WhatsApp button, as shown in the image below:

testdevmage.com_11155_checkout_onepage_success_screenshot

After clicking on the Whatsapp button under the Order success page, the customer will navigate to the WhatsApp Chat Window.

In case, the WhatsApp is not present on the web, the customer can follow the steps of the Add Whatsapp to Web section in the above user guide.

Further, the customer will send the pre-fill message that is present in the message typing box by pressing the enter button. The window will appear in the image below:

web.whatsapp.com_screenshot-3-1

When the customer contacts admin from the order success page, the custom message, Order details, product details, and the product link gets share with the admin.

Also, the buttons of Contact On WhatsApp will be visible on the Header And Footer of the store

Contact On WhatsApp Button – Header View

The customer can also click on the WhatsApp button available on the top of the page i.e. header. After clicking on the button the customer will navigate to the WhatsApp window, there they can type the message as per their concern.

webkul-magent2-whatsapp-sharing-custo-mer-whatsapp-button-on-header

Contact On WhatsApp Button – Footer View

The customer can also click on the WhatsApp button available on the bottom of the page i.e. footer. After clicking on the button the customer will navigate to the whatsapp window, there they can type the message as per the concern.

Magento 2 WhatsApp Contact

Note: The guest and registered customers’ rules will be the same. As present in the above blog for other buttons in the store.

Mobile View

Now, customers can quote/enquire regarding the products. This can be done from the product page, cart page and from the order success page via mobile as well.

After tapping on the quote/enquire WhatsApp button, you will redirect to the WhatsApp application on your mobile device. Now you can start to enquire about the respective products from your WhatsApp application.

Support – Issues/Suggestions

That was much about the Magento 2 WhatsApp Contact plugin. For more information or customization requests send an email to [email protected] or raise a ticket at our HelpDesk system.

Current Product Version - 4.0.7

Supported Framework Version - Magento 2.0.x, 2.1.x, 2.2.x,2.3.x, 2.4.x

Blog Version - Magento 2.0.x, 2.1.x, 2.2.x,2.3.x, 2.4.x
  • Version 2.0.x , 2.1.x , 2.2.x , 2.3.x
  • Version 2.0.x , 2.1.x , 2.2.x , 2.3.x, 2.4.x
  • Version 2.0.x , 2.1.x , 2.2.x , 2.3.x , 2.4.x
. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home

Table of Content