Magento WhatsApp Contact

Home > Magento Extension User Guides > Magento WhatsApp Contact

 

Magento WhatsApp Contact is a perfect tool to improve user experience as it lets customers to directly contact store owner via WhatsApp!

 

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
  • Upload or copy all folders in the zip package to your Magento root folder. It doesn’t overwrite any existing files but just adds new files to the folder structure.
  • Once done, log in your Magento admin panel, go to System > Cache Management, select all caches and refresh.
  • Navigate to System > Configuration, if you can see the extension tab, it is installed properly.
  • If you get Access denied error, you need to log out admin panel and log in again.

 

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


  

  1. WhatsApp Contact Button Settings
    The extension facilitates to set one of the two types of contact buttons. Configure the following settings for WhatsApp Contact Button.  
     
  • 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.


 

  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 a mobile number of the chat agent.
    • Default Message: Enter the default chat message of the agent.
    • Photo: Upload the photo of the chat agent.
    • Status: Activate or deactivate the status of the chat agent.


 

  1. WhatsApp Contact in Frontend
    Once you configure the above settings, WhatsApp Contact button will be enabled in the frontend as shown below
  • 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. Department name and default chat message are also displayed along with the agent list. User can click on one of the chat operators 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 228 more ...