This amazing module 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.
- 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 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.
After extracting the downloaded zip file and you will get the src folder. Inside the src folder, you will find the app folder, copy the app folder to the Magento2 root directory. Please view the below screenshot.
After the successful installation, you have to run these commands in the Magento2 root directory.
First command- php bin/magento setup:upgrade
Run the following commands from the root directory of your Magento to install socket.io on your server.
First, you have to install the npm on your server for that to run the command –
sudo apt-get update
sudo apt-get install npm
To install socket.io run command-
npm install socket.io socketio-file-upload
After running the commands, you need to flush the cache and reindex all from the Magento2 admin panel. Navigate through System->Cache Management. Click Flush Magento Cache button as shown below:
Installation using composer:
If the module is purchased from the official Magento Marketplace then please follow the below process.
Add the extension’s name and version to your
- Navigate to your Magento project directory and update your composer.json file.
|1||composer require <composer name>:<version>|
For example: To install 5.0.0 version for this extension we need to run the following command.
|1||composer require webkul/chat-system:5.0.0|
- Enter your authentication keys. Your public key is your username; your private key is your password.
- Wait for Composer to finish updating your project dependencies and make sure there aren’t any errors.
Verify the extension
To verify that the extension installed properly, run the following command:
|1||php bin/magento module:status Webkul_MagentoChatSystem|
By default, the extension is probably disabled:
|1||Module is disabled|
The extension name is in the format
<VendorName>_<ComponentName> ; this is a different format from the Composer name. Use this format to enable the extension. If you are unsure of the extension name, run:
|1||php bin/magento module:status|
and look for the extension under “List of disabled modules”.
Enable the extension
Some extensions won’t work properly unless you clear Magento-generated static view files first.
option to clear static view files when you’re enabling an extension.
1.Enable the extension and clear static view files:
|1||php bin/magento module:enable Webkul_MagentoChatSystem –-clear-static-content|
2.Register the extension:
|1||php bin/magento setup:upgrade|
3.Recompile your Magento project: In Production mode, you may receive a message to “Please rerun Magento compile command”. Magento does not prompt you to run the compile command in Developer mode.
|1||php bin/magento setup:di:compile|
4.Verify that the extension is enabled:
|1||php bin/magento module:status Webkul_MagentoChatSystem|
You should see output verifying that the extension is no longer disabled:
|1||Module is enabled|
5. Clean the cache:
|1||php bin/magento cache:clean|
6. Configure the extension in Admin as needed.
For Multilingual support, please navigate. Store->Configuration->General ->Locale Options. And select your desired language from the Locale option.
If you need to do the module translation, please navigate the following path in your system. app/code/Webkul/MagentoChatSystem/i18n. Open the file named en_US.CSV for editing as shown in below screenshot.
Once you have opened the file for editing. Replace the words after the comma(,) on the right with your translated words.
After editing the CSV file, save it and then upload it to the same path as before. app/code/Webkul/MagentoChatSystem/i18n. The module will now get translated into your desired language. It supports both the LTR and RTL languages.
To do the module configuration of Chat system for Magento2 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 be not working on the frontend.
After starting the server then 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.
Header Color – Set the chat window colour header.
Header Text Color – Set the colour for chat window header text.
Chat User Panel Window Text Color – Select chat list window text colour.
List Background Color – Select chat list window background colour.
List Text Color – Select chat list window text colour.
Background Type – Select the chat window background as Image or Colour-based.
Header Color – Select chat window header color.
Header Text Color – Set the color for the header text color.
Click the Save Config button, to save your changes.
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.
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.
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.
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.
After successfully logging into the store, the user can send a message. A user can simply type a message and click the send button. The assigned Chat Agent name is visible on top of the chat window.
The module offers various settings to the customer to manage their chat system as shown below-
Chat Profile Picture – The customer can easily upload/update the profile picture by clicking Profile Setting button. Click the image to browse an image file from your computer and then click the Upload button.
End Chat – The customers can end the chat whenever they feel like by clicking the End Chat button.
Give Feedback – The customer can even give the ratings and feedback to the agent by clicking the Give Feedback button.
The customers can send files to the chat agent by clicking the attachment icon. The attachments can include images, documents or zip files.
The customer can even send emojis also while chatting as shown below.
The customers can even change their status as per the below image.
The customer can even report to admin directly about the agent.
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.
It can also use the search option to find any specific message using agent name or message date.
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 agent 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.
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.
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.
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.
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.
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.
The admin also views the chat reports submitted by the customers by navigating to the Chat System->Chat Reports.
That’s all for the 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.
Current Product Version - 5.0.0
Supported Framework Version - Magento 2.0.x, 2.1.x, 2.2.x,2.3.x, 2.4.x