Magento 2 WhatsApp Contact

Home > Magento Extension User Guides > Magento 2 WhatsApp Contact

 

Magento 2 WhatsApp Contact allows customers to instantly contact you via WhatsApp. Have an immediate one to one conversation with your store users and provide them with the better user experience.

 

Table of Content

  1. Extension Installation
  2. Configuration
  3. WhatsApp Contact Button Settings
  4. Manage WhatsApp Chat Agents
  5. WhatsApp Contact in Frontend

 

  1. Extension Installation
  • For Magento Marketplace Customers
  • Create a folder structure in Magento root as app/code/Meetanshi/WhatsappContact
  • Download and extract the zip folder and upload our extension files to the app/code/Meetanshi/WhatsappContact  via FTP.
  • Login to your SSH and run below commands step by step:
  • php bin/magento setup:upgrade
  • For Magento version 2.0.x to 2.1.x - php bin/magento setup:static-content:deploy
  • For Magento version 2.2.x & above - php bin/magento setup:static-content:deploy –f
  • php bin/magento cache:flush
     
  • For Meetanshi Customers
  • Extract the zip folder and upload our extension to the root of your Magento 2 directory via FTP.
  • Login to your SSH and run below commands step by step:
  • php bin/magento setup:upgrade
  • For Magento version 2.0.x to 2.1.x - php bin/magento setup:static-content:deploy
  • For Magento version 2.2.x & above - php bin/magento setup:static-content:deploy –f
  • php bin/magento cache:flush

 

  1. Configuration
    For configuring the extension, login to Magento 2, move to Stores > Configuration > WhatsApp Contact where you can find various settings to enable the extension.
  • WhatsApp Contact: Enable WhatsApp Contact extension from here.
  • Enable WhatsApp Contact On: Select option to enable WhatsApp Contact either in desktop, mobile or both.
  • Default Chat Message: Enter the default chat message to share when users click the contact button.


  

  1. WhatsApp Contact Button Settings
  • Icon Type Button
    • Button Type: Select the WhatsApp contact button type, here, icon.
    • Contact Mobile Number: Enter the mobile number of admin to allow users to contact to.
    • Button Hover Text: Enter text to show on hover of WhatsApp Contact button.
    • Button Background Color: Set button background color to show in frontend.
    • Icon Color: Set icon color to show in frontend.
    • Button Display From & Button Display To: Select dates to show contact button only for a specific date range.
    • Top Position: Set the pixels for the top position to place the contact button on the frontend screen.
    • Right Position: Set the pixels for the right position to place the contact button on the frontend screen.
    • Bottom Position: Set the pixels for the bottom position to place the contact button on the frontend screen.
    • Left Position: Set the pixels for the left position to place the contact button on the frontend screen.
    • Button Animation Effect: Select button animation effect from the drop-down menu.
    • Close Button: Enable to allow users to click close to hide contact button.


 

 

  • Box Type Button
    • Button Type: Select the WhatsApp contact button type, here, box.
    • Button Text: Enter text to show on WhatsApp Contact button.
    • Information Text on Button Click: Enter text to show on click of WhatsApp contact button to show additional information.
    • Button Background Color: Set button background color to show in frontend.
    • Icon Color: Set icon color to show in frontend.
    • Button Display From & Button Display To: Select dates to show contact button only for a specific date range.
    • Top Position: Set the pixels for the top position to place the contact button on the frontend screen.
    • Right Position: Set the pixels for the right position to place the contact button on the frontend screen.
    • Bottom Position: Set the pixels for the bottom position to place the contact button on the frontend screen.
    • Left Position: Set the pixels for the left position to place the contact button on the frontend screen.
    • Button Animation Effect: Select button animation effect from the drop-down menu.
    • Close Button: Enable to allow users to click close to hide contact button.


 

  •  
  • QR Code Type Button
    • Button Type: Select the WhatsApp contact button type, here, QR Code.
    • Upload QR Code Image: Upload QR code image to show in the frontend.
    • Button Hover Text: Enter text to show on hover of QR code type button.
    • Button Display From & Button Display To: Select dates to show QR code button only for a specific date range.
    • Top Position: Set the pixels for the top position to place the QR code button on the frontend screen.
    • Right Position: Set the pixels for the right position to place the QR code button on the frontend screen.
    • Bottom Position: Set the pixels for the bottom position to place the QR code button on the frontend screen.
    • Left Position: Set the pixels for the left position to place the QR code button on the frontend screen.
    • Button Animation Effect: Select QR code button animation effect from the drop-down.
    • Close Button: Enable to allow users to click close to hide QR code button.

 

  1. Manage WhatsApp Chat Agents
    The extension facilitates to add multiple chat agents for the box WhatsApp contact button type. If you have selected Box button type, you can add chat agents from WhatsApp Contact à Manage WhatsApp Chat Agents. You can see already created chat agents enlisted along with the agent information.


  

  • Add New Chat Agent
    On click of “Add New” from the “Manage WhatsApp Chat Agents” grid, you can add new chat agent.
    • Name: Add the name of the agent.
    • Department Name: Enter the name of the department in which the agent belongs.
    • Mobile Number: Enter WhatsApp enabled mobile number of the chat agent.
    • Default Message: Enter the default chat message of the agent.
    • Photo/QR Code Image: Upload the photo of the chat agent or QR code image of the WhatsApp Chat agent’s number.
    • Status: Activate or deactivate the status of the chat agent.
    • Store View: Select the store view for which you want to enable the chat agent.


 

  1. WhatsApp Contact in Frontend
    Once you configure the above settings, the WhatsApp Contact button will be enabled in the frontend based on the button type, set from the backend.
  • Icon Type Button
    On click of the icon button, the user will be redirected to the chatbox of admin in WhatsApp. If the visitors don’t want to see the contact button, they can close it if enabled by admin from backend. Moreover, the text is also displayed on the hover of the button.


 

  • Box Type Button
    Box type button is shown along with the text. On click of the button, a popup is opened with the information text and list of chat operators. QR code or photo (whichever is added), Department name and default chat message are also displayed along with the agent list. User can scan the QR code or click on one of the chat operators to start a chat in WhatsApp.


  

  • QR Code Type Button
    On hover of the QR Code button, hover text is shown. Customers can scan the QR code to start a chat in WhatsApp.

 

  • Contact Opened in WhatsApp
    When the user is redirected to WhatsApp chat with the admin or the selected chat agent, the default message is shown where he can add more text for the query, question, feedback or any other information.


 

Updated:

Other Articles

and 238 more ...