Back to Top

Chat System For Magento 2

Updated 22 December 2023

Magento 2 Live chat extension allows you to set up a live chat system in your Magento store. The customers can do live conversations with admin or chat agents.

Customers can use the live chat system for their queries or questions. The admin can create different Chat Agents for better management of customer queries.

All customer queries are automatically assigned to the available chat agents.

To provide a virtual chatbot assistant for your store customers you can also make use of the Magento 2 Chatbot Using OpenAI ( ChatGPT ) LLM.

Please Note-

Searching for an experienced
Magento 2 Company ?
Find out More
  • You need to have Node js already installed on your server to use our Chat System for Magento 2.
  • If you are unable to configure Node js and on Magento Cloud Edition then we will configure it on a separate server.
  • If the wrong host name and required files uploaded then save configuration will take more time (approximately 2-3 minutes).
  • This module requires fsockopen method active on the server.


  • The users can log in or Register from the chat window.
  • The admin can create various chat agents for managing the queries.
  • Users and agents can view their chat history conversation.
  • The admin can view the complete chat system history from the back-end.
  • Chat agents can view & reply to multiple customer queries at once.
  • The admin can set a name for the chat system.
  • Upload an image for the chat profile picture.
  • Customize chat window background using colour or an image.
  • Colour customization available for chat window, header, list and, text.
  • The module supports many language translations.
  • Chat status can be set as Online, Busy or Offline.
  • Sound alert notifications available for any new chat message.
  • Date and time of the message sent and received.
  • Pop-up notifications will appear on top of any new message.
  • Send and receive file attachments for image, document, or zip file.

What is the use of Socket.IO?

Socket.IO allows bi-directional communication between client and server. Bi-directional communications are enabled when a client has Socket.IO in the browser, and a server has also integrated the Socket.IO package. While data can be sent in a number of forms, JSON is the simplest.

Install an Extension from Webkul Store

The installation is quite simple just like the standard Magento 2 extensions.

#1 Download Module

Firstly, you need to log in to Webkul Store, go to My Account>My Purchased Products section, verify and then download and extract the contents of this zip folder on the system.

#2 Upload Folder

Once the module zip is extracted, follow path src>app and then copy the app folder into the Adobe Commerce Cloud root directory on the server as shown below:

Installation Of Show Price After Login for Magento2

#3 Run Commands

After uploading the module folder, you need to run the following commands in the Magento 2 root directory:

php bin/magento setup:upgrade

php bin/magento setup:di:compile

php bin/magento setup:static-content:deploy

php bin/magento indexer:reindex

php bin/magento cache:flush

Server Settings

Environment Setup Guide:

*Please make sure that the node server is already installed on the host.

After the module has been installed please follow the below steps:

Enable the chat option by choosing a Yes option else disable it by choosing the No option. 

Fill configuration details where 

Host = yourdomain (without protocol)

Port = 3000

Save configuration .

In your magento root folder run the following command : 

npm init -y

npm i socketio-file-upload

npm update

npm i forever-monitor

node_modules/forever/bin/forever app.js

Refresh the config page you will see the below message if the server is started.

initial configuration magento 2 live chat system

That’s all you can enjoy chatting now.

*NOTE: Please make sure to upload correct server files if you are using a secured domain.

Module Configuration

To do the module configuration of Chat system for Magento 2 please Log In to the Admin panel. And navigate to Stores->Configuration->Chat System Configuration.

Here the admin needs to do the settings for the chat server, front-end chat window and, admin chat window. Lots of color customization options are available for the chat system.

In the configuration, the first step is admin needs to start the server because without starting the server the chat system will not work on the frontend.

configuration settings Magento 2 live chat system

After starting the server the chat system is available on every page of the store.

Host Name – Enter the hostname of your eCommerce website.

Port Number – Enter the available port number for the chat system and click the Start Server button after saving all the changes.

Admin Chat Profile Image – Upload an image file for the admin chat profile.

Chat Name- Enter the name for the chat window name for the front-end.

Assign New Chat To Any Chat system Manager Automatically – Select Yes to automatically assign the chat system manager to a new chat initiated. Else, select No for manually assigning the chat system manager to a new chat.

Allow Customer To Send Message Offline – Select Yes to allow the customer to send messages even if the chat agent goes offline. These offline messages get saved in the database and can be viewed when the chat agent comes online. Else set No if don’t want the customer to send the messages when the chat agent goes offline.

Allowed Maximum File Size For Attachment In MB – Define the attachment size which the logged-in customer can send while chatting.

HTTPS Enabled – 

Select No to enable the chat system on the local server.

Set Yes to enable the chat system on HTTPS. In addition, the admin needs to upload the mentioned files server.key, server.crt &

1. Upload Server Private Key File:- You can get this file from your host provider, file name must be as: server.key

2. Upload Server Certificate File:- You can get this file from your host provider, the file name must be as server.crt

3. Upload Server CA Bundle File:- You can get this file from your host provider, the file name must be as

Front-End Chat Window Options

Magento 2 Live Chat System

Position – Select the position of the chat window either Left or Right.

Background Type – Select the chat window background type as Image or Colour-based.

Choose Background Color – Here you can select chat window background color.

Header Color – Set the chat window colour header.

Header Text Color – Set the colour for chat window header text.

Admin Chat Window Options

admin chat window settings

Panel Window Background Color –  Select the chat list window background color.

Chat User Panel Window Text Color – Choose chat list window text color.

User List Background Color – Select the chat list window background color.

Chat User List Text Color – Choose the chat list window text color.

Chat Window Background Type – Select the chat window background as Image or Colour-based.

Choose Background Color –  Select the chat window background color.

Chat Window Header Color – Select the chat window header color.

Header Text Color – Set the color for the header text color.

Click the Save Config button, to save your changes.

Now, you can see the chat window according to set configurations at the – 

Storefront –  

Magento 2 Live Chat at Storefrontend

Admin Backend Panel –  

chat window for the admin in backend panel magento 2

Now, the admin can see the available option under the Chat System as shown below.

side panel options

Add Chat Agents

The admin can create various chat agents for its store. The chat agents can answer the customers’ queries from the Magento back-end. To create a new chat agent please navigate to System->All Users.

Click Add New User button as shown in below screenshot.

chat agents

User Info

Enter all the required details for the New User and click the Save User button. After entering the user account information, please click the User Role option on the left.

new user

User Role

There are 2 user roles defined for chat system –

  • ChatManager: Responsible for managing agent assignment, agent rating, chat system configuration & chat with customers.
  • ChatSystem: Responsible for the chat with customers.

user roles

Select the user role option for the new user and click the Save User button to save your changes.

Existing Users

The existing users of the Magento can also be assigned as Chat Agents. Please navigate to System->User Roles and select ChatSystem.

existing users

Click the Role Users option on the left as shown in the below screenshot. Using the checkbox option, select the users who will become the Chat Agents. Click Save Role button to save your changes.

existing users

Front-End User View

Although the chat system is available on every page of the store. But for using the chat system, the users need to log into their account first.

The users can do quick login and Registration from the chat window.

chat window at storefront

For registration, the user needs to enter the details along with the message and tap the Create an Account button thereafter. 

magento 2 live chat registration

After successfully logging into the store, the user can send messages. A user can simply type a message and hit the enter button.  The assigned Chat Agent name is visible on top of the chat window.

chat messages and response from the agent

Customers can also send emojis as required. 

magento 2 live chat system emoji support

Apart from that the customers can also upload attachments and send to the agents. 

add attachments magento 2 live chat system


The module offers various settings to the customer to manage their chat system as shown below –

Give Feedback

The customer can even give the ratings and feedback to the agent by tapping icon before the agent name.


After tapping the Give Feed Back Button the customer can give star rating and feedback for the agent. 

feedback and rating

File Attachment

The customers can send files to the chat agent by clicking the attachment icon. The attachments can include images, documents or zip files.

add attachments magento 2 live chat system


The customer can even send emojis also while chatting as shown below.

magento 2 live chat system emoji support


The customers can even change their status. Apart from that, the customer can end the respective chat, mute notifications, and view the chat history as required.


The customer can also tap the edit button next to the profile name to change the image as required. 

change profile image


The customer can even report to admin directly about the agent.

customer report to admin

Chat History

The users can view their chat conversation history from My Account section. Here the users can view the chat agent name, message and, date & time details.

chat history

Back-End Agent View

The admin or an assigned agent needs to login into the Magento backend for replying the messages.

The agents can view the list of online customers that have been assigned to them.

Every customer is assigned to a chat agent automatically.

The chat agents can also view the email address of the assigned customers in the chat user list.

backend agent chat window view

Note: The chat agents can also send file attachments to the customers. The chat agents can click the attachment icon for sending an image, document or a zip file to the customers.

agent add attachment 

The admin can view the agent list also as shown below.


Here, the admin can –

  • View the complete list of the agents.
  • View the details of an agent by clicking View Details link.

Clicking the View Details link will navigate the agent to the Agent Information page.

agent details

The Agent Information page will have three sections to display the agent information –

  • Agent Details – In this section, the agent can view the rating information.
  • Agent Chats – In this section, the agent can view the chat list of the agent.

chat details

The agent can click the Chat History link to view the complete chat history of that agent.

chat history

  • Agent Feedbacks – In this section, the agent can view the agent feedbacks given by the customers.


Pop-Up Notifications

Whenever someone sends any new message to another person, a pop-up notification will appear. This pop-up notification will be visible on top of the browser window.

The pop-notification will show the message content, sender’s name, and profile picture.

pop-up notification

The same type of pop-up notification will also appear for the chat agents in the backend.

So whenever a customer sends any new message, a pop-up notification will be appearing on top of the window.

For this, you need to enable the pop-up notifications in the browser settings.

chat agent

View All Chat History

The admin can manage the chat system easily. For this, the admin needs to navigate to Chat System menu option as shown below.


Agent List

The admin can view the complete list of the chat agents by navigating to the Chat System->Agent List.

agent list

The admin can even view the agent details by clicking the View Details link.

Assigned Chat

The admin can assign or reassign the chat to agents manually by navigating to Chat System ->Assigned Chat as shown below.

assign chat

From the Action drop-down list, the admin can assign the chat to an agent. And, can also view and search the chat history conversations between the customer and the agent by clicking the History link.

Agent Ratings

The admin can also view the ratings and feedbacks of the agent given by the customers by navigating to the Chat System->Agent Ratings.


Here, the admin can delete, approve and disapprove any rating and feedback from the Action drop-down list.

Chat Reports

The admin also views the chat reports submitted by the customers by navigating to the Chat System->Chat Reports.


That’s all for the Magento 2 Chat System still, have any issue feel free to add a ticket and let us know your views to make the module better

Current Product Version - 5.0.1

Supported Framework Version - Magento 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