Back to Top

Opencart WhatsApp Live Chat

Updated 11 October 2023

In today’s world providing live support on Whatsapp is one of the best ways to solve the queries of the end-user instantly and by keeping this in mind we have introduced the Opencart WhatsApp Live Chat module.

This module allows admin to enable live Chat support on WhatsApp. Customers can ask their queries and get solutions for those queries over WhatsApp chat.

As a result, the customers don’t need to wait for the reply over the mail and can chat over the WhatsApp during the given time interval.

Note:

1. This module supports all templates and themes including the Journal theme.

2. Opencart WhatsApp Live Chat module supports the Multi-Store feature of default Opencart.

Searching for an experienced
Opencart Company ?
Find out More

Watch the below video tutorial to understand the extension workflow:

Features

  • The admin can configure this module for a particular store from multiple created stores.
  • Layout settings for the chat support window will be configured by the admin.
  • Multiple chat support agents can be created.
  • This module supports multi-lingual feature.
  • The admin can create multiple chat support agents and assign created member types to those support agents.
  • The title and description for the chat support window can be configured by the admin.
  • The admin can choose the image of the support team member for the chat support window.
  • A welcome message can be entered and will be seen at the chat support window.
  • The admin can enter the initial message for each support agent which will be sent to the customer after scanning the QR code.
  • The customers can chat with the support agents from the WhatsApp application on their mobile devices.
  • The customers can also use the WhatsApp Web feature to chat with the support agents from desktop.

Installation

Upload Files

Firstly, the admin will need to extract the downloaded zip file. After that, open the correct Opencart Version Folder.

According to Opencart Version installed in your system upload the admin and catalog to the Opencart root directory.

installation-1

Once the admin has uploaded the file, then admin will have to log-in to the admin panel and then go to Extensions> Extension installer and upload the ZIP file. The ZIP file can be found on the ocmod folder under the module directory. Under the ocmod folder, you will find the wk_whatsapp_chatbots.ocmod.zip file.

installer

Refresh Modifications

The admin can then navigate to Extensions > Modifications and click the Refresh button as visible in the below screenshot.

modification

Edit User Groups

After that, go to System > Users > Usergroups and then edit ‘Administrator’. Click Select All for both Access Permission and Modify Permission and Save it.

Opencart_WhatsApp_user_group

Install

Now navigate to Extensions > Extensions > Modules. Find the OpenCart WhatsApp Chatbot Module from the list. Click the Install button as visible in the screenshot below.

Opencart_WhatsApp_modules

Module Configuration

After the module installation gets completed, the admin needs to navigate to Extensions > Module > Opencart WhatsApp Chatbot to configure the WhatsApp Chatbot by clicking on the Edit option. There the admin will get two sections General and Design/Layout.

Opencart_WhatsApp_General_config

General Section:

Now the Admin will need to configure the below-mentioned options of general section:

  1. Select Store: The Admin can select any of the store from multiple created stores.
  2. Status: Set the status as enable or disable for the module.
  3. Heading Title: The Admin will have to enter heading title for multiple languages. Also, these entered heading titles will be displayed on the top of the chat support window.
  4. Description: Enter a description for multiple languages and the entered description will be displayed on the chat support window.

Design/Layout Section:

Opencart_WhatsApp_Design_config

Now the Admin will need to configure the below-mentioned options of design/layout section:

  1. Position: The admin can decide the position of WhatsApp chat icon and window by selecting any one of the given positions. The positions given are -Right Top, Right Bottom, Right Middle, Left Top, Left Bottom, Left Middle.
  2. Button Color: Select the color of the Whatsapp icon.
  3. Popup Background Color: The admin can select the Background color for the WhatsApp window.
  4. Heading Color: Select the color of the heading.
  5. Text color: The admin can select the color of the text.
  6. Extension: Here the admin can select the time and member type which will display in the WhatsApp window by clicking on the checkbox.

Manage WhatsApp Configuration

Under the WhatsApp section the admin can manage the following :

  • Configuration
  • Support Team
  • Member Type

Configuration

Now, the admin can change the configuration by navigating through the configuration in the WhatsApp section.

Further, from here also the admin can change the configuration settings.

Opencart_WhatsApp_congif

Support Team

Here, the admin can either create a new support agent, delete the existing agent or can even edit the multiple chat support agents for the WhatsApp module.

Also, the admin can filter the support agent on the basis of name, contact number, member type and status of a support agent.

Opencart_WhatsApp_team

Add WhatsApp Support Agent

Also, here the admin can create support agents by configuring various options.

Opencart_WhatsApp_add-support-team
  1. Status: Enable or disable the status of a support agent.
    If enabled the support agent will display on the WhatsApp chat window.
  2. Name: Here the admin can enter the name of the support agent which will be visible on the WhatsApp chat window.
  3. Member Type: Select any of the member types from the created member types.
  4. Image: The admin can select the image to be displayed in the WhatsApp chat window.
  5. Contact Number: Select the country name and also enter the contact number of a support agent.
  6. Select Time: Here the admin will have to select the time at which the support agent will be available for a chat in the WhatsApp window.
    Also, the given time will display on the WhatsApp chat window.
  7. Message: The admin has to enter the message which will display whenever the customer first scans the QR code.
  8. Sort: Here the admin will enter the sort order according to which support agent will be displayed on the WhatsApp chat window.
    After entering all these details the admin will have to save the entered details.

Manage Member Type

Here the admin can add and delete multiple member types.

member_type

Here, the admin can add member type by clicking in the add icon option.

mamber type
  1. Member Type: Here admin will have to add the name of the member, which will be selected at the time of creating a support agent.
    Then the admin will have to save the entered member type.

WhatsApp Customer View

In Opencart WhatsApp live Chat module, whenever the customer will visit the website, a WhatsApp icon will be shown on the given position to the customer.

Further, by clicking on that icon the WhatsApp window will open where customers can chat with the desired support agent.

Now let us see how the customer view of this module looks like,

Opencart_WhatsApp_frontend

Here the customer will click on the desired support agent who the customer wants to chat with. For example: when the customer clicks on Peter Doe, the page below will open up in a new window tab.

whatsapp-chat

Now, clicking on CONTINUE TO CHAT button will further open the page below.

whatsapp-chat-login

The customer can either Download the App or use WhatsApp Web. On clicking WhatsApp Web, the WhatsApp window to scan QR code will arrive.

Opencart_WhatsApp_scan_QR

Now the customer will scan the QR code and will be able to chat with the Support agent.

WhatsApp_live_chat

That is all about the Opencart WhatsApp Live Chat module, for any issues feel free to add a ticket and let us know your views to make the module better https://webkul.uvdesk.com/.

Current Product Version - 3.3.0.1

Supported Framework Version - 2.x.x.x,3.x.x.x

. . .

Leave a Comment

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


4 comments

  • Rasim Aghayev
    • Jyotsna Gautam (Moderator)
  • Jimmy
    • Archana Tiwari (Moderator)
  • 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