User Guide of Chat System For Magento 2
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-
- 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 socket.io on Magento 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).Please check the module overview and functionality with the below link-
Features
- 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 root directory on the server as shown below:
#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 = your domain (without protocol)
Port = 3000
Save configuration.
In your magento root folder run the following command :
npm init -y
npm i socket.io socketio-file-upload nodemon
npm update
npm install forever -g
forever start app.js
forever stopall
Refresh the config page you will see the below message if the server is started.
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.
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 & server.ca-bundle.
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 server.ca-bundle
Front-End Chat Window Options
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
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 –
Admin Backend Panel –
Now, the admin can see the available option under the Chat System as shown below.
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.
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.
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.
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.
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.
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.
For registration, the user needs to enter the details along with the message and tap the Create an Account button thereafter.
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.
Customers can also send emojis as required.
Apart from that the customers can also upload attachments and send to the agents.
Settings
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.
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.
Emoji
The customer can even send emojis also while chatting as shown below.
Status
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.
Report
The customer can even report to admin directly about the agent.
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.
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.
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.
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.
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.
The agent can click the Chat History link to view the complete chat history of that agent.
- 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.
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.
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.
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.
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 https://webkul.uvdesk.com.