WhatsApp Contact for Magento 2

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:

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

• 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.

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.

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.

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.

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.

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.

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

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:

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.

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:

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:

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

The admin can then reply to the customer as required.

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:

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:

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

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:

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:

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.

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.

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.

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.