Chat System for Magento2

Chat System for Magento2

This amazing module allows you to set up live chat system in your Magento store. The customers can do live conversations with the admin or the chat agents. Customers can use 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.

Features

  • The users can Login 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 chat system.
  • Upload an image for the chat profile picture.
  • Customize chat window background using color or an image.
  • Color 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 for any new message.
  • Send and receive file attachments for image, document or zip file.

Installation Process

Step 1:

After extracting the downloaded zip file and you will get the src folder. Inside src folder, you will find the app folder, copy the app folder to the Magento2 root directory. Please view the below screenshot.

Magento2 Admin Buyer Chat Installation

Step 2:

After copying the app folder, you need to run the commands in the Magento2 root directory. Please view the below screenshots:

php bin/magento setup:upgrade

Magento2 Admin Buyer Chat command

php bin/magento setup:static-content:deploy

Magento2 Admin Buyer Chat command

#Please make sure Node is already installed on your server.

Step 3:

Run the following commands from the root directory of your Magento to install socket.io on your server.

npm install
npm install socket.io

Step 4:

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:

Magento2 Cache Management

Multi-Lingual Configuration

For Multilingual support, please navigate. Store->Configuration->General ->Locale Options. And select your desired language from the Locale option.

Magento2 Change Language

Language Translation

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.

Magento2 Change CSV language file

Once you have opened the file for editing. Replace the words after the comma(,) on the right with your translated words.

Magento2 Change Language

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.

Magento2 Change CSV Language file

Module Configuration

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.

After doing all the settings, click Save Config and then click Start Server button.

Server Settings

Host Name – Enter the host name of your eCommerce website.

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

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

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

Server Settings

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 Color based.

Header Color – Set the chat window color header.

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

Frontend Chat options

Admin Chat Window Options

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

List Background Color – Select chat list window background color.

List Text Color – Select chat list window text color.

Background Type – Select the chat window background as Image or Color 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.

Admin chat window 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

Select the ChatSystem role option for the new user. Please view the below screenshot. Click Save User button to save your changes.

user role

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 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 Log In and Registration from the chat window.

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 users can also upload an image file for their profile picture. Change the chat status as Online, Busy or Offline.

The users can enable or disable sound alert notifications for the new message.

Assigned Chat Agent name is visible on top of the chat window.

Chat user window - update

Chat Profile Picture

The customers can browse and upload a custom image file for the chat profile. To update and edit the chat profile image, click the Settings icon on the chat window and select Profile Setting option.

Click the image to browse an image file from your computer and then click the Upload button.

chat user profile picture

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.

From the below screenshot, the customer has sent an image file to the chat agent. The customer can view the sent image file preview with sent time in the chat window.

The customers can send a zip file to the chat agent. The customer can also download the sent zip file.

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.

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.

chat agent backend view

File Attachment

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.

backend view file attach

Chat History

The agents can view their chat conversation history by navigating to Chat System Menu->Assigned Chat. Click the History link under Actions column. The agent can view all the chat history conversation of a customer.

agent chat history

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 for chat

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.

pop-up notification for chat

View All Chat History

The admin can view and search the chat history conversations. It can view the complete chat history between the customer and the agent. Navigate to Chat System->Assigned Chat to view the Chat History.

admin chat history

Thank you for reading this blog, please feel free to reach out for any queries http://webkul.uvdesk.com/