The Real-Time Chat add-on allows your customers to securely exchange messages with vendors in real time (no need to refresh the page). Customers can contact vendors by clicking Contact vendor on the product details page or by clicking Contact vendor on the vendor products page.
![]()
It will definitely come in handy when customers want to clarify details about a product, know more about your promotions, ask questions about shipping or payment or anything else.
![]()
Your customers will find it especially convenient to exchange messages from their mobile devices.
![]()
The add-on introduces the Forbidden words feature. You can forbid certain text in outgoing messages. Such words will be replaced with ***. Forbidding certain words could help store owners control communication of vendors with customers, for example, you don’t want vendors to give out their contact info to customers directly, so you may want to forbid words like ‘email, ‘phone number’, etc.
![]()
Messages containing forbidden words will be marked with exclamation icon in the list of messages in the admin panel.
![]()
Stay helpful to your customers and increase sales with our Real-Time Chat add-on.
Important
The add-on configuration is provided on a paid basis. Please contact us for help.
The add-on is compatible with CS-Cart and Multi-Vendor 4.9 and above, but only versions 4.12.x and above are supported. Minimum required PHP version is 5.6.
See more information about compatibility of our add-ons here.
- SSL certificate and HTTPS enabled.
- PHP extension
zmq
is required.
You are guaranteed a quality add-on supported by the future versions. If you need help, please contact us via our help desk system.
The add-on allows customers to contact a seller from the product details page in case they have any questions or need any clarification about the product.
![]()
Clicking the Contact seller button will take the customer to the Messages page to start a conversation. Text messages are exchanged in real-time.
![]()
Anyway, the customer will be notified of new messages by email.
![]()
The communication history can be viewed on the Messages page (My account > Messages). New messages are highlighted.
![]()
The customer can contact the vendor from the vendor page as well.
![]()
The Contact vendor button is also available on the order details page.
![]()
The vendor can manage messages by going to Website > Messages. Unread messages are a light blue.
![]()
Clicking the Ticket ID will open the conversation.
![]()
The vendor can also contact the customer from the order details page (Orders > View orders).
![]()
Note
Vendors are not notified of new messages, only vendor’s administrators. See Vendor’s administrator notifications for more details.
Install the Real-Time Chat add-on on the add-ons list page (Add-ons → Manage add-ons). Click the + button in the top right corner, select an archive and click Upload & install. You can now find the installed add-on in the list of installed add-ons, just make sure it is set to Active.
Note
When you install the add-on, the default Customer-to-Vendor Communication add-on will be disabled.
Here are available settings for the add-on:
![]()
The first three settings, Websocket Port, Pusher Port and Websocket URL, are related to the implementation of a special WebSocket protocol on the server. These parameters are necessary to correctly exchange messages between the recipient and the sender.
Note
The Websocket protocol implementation requires developer skills. We will take it upon ourselves to configure it on your server. Please contact us for help.
Decide where you want to show the Contact vendor button. The settings concern the storefront.
- Show the “Contact vendor” button on the order details page
![]()
- Show the “Contact vendor” button on the product details page
![]()
- Show the “Contact vendor” button on the company page
![]()
- “Contact vendor” button type—Select the button type that will be displayed on the product details page. The options are:
1. Icon
![]()
2. Icon and text
![]()
3. Text
![]()
- Button color—Select the color you would like to apply for the Contact vendor button on the product details page (primary, secondary, tertiary) or choose text.
- Message length—The maximum number of characters in the message shown on the conversation history page before it will be truncated with ellipses(…).
![]()
The root administrator can allow other administrators to manage messages by selecting the Allow to manage messages setting on the administrator’s details page.
![]()
The administrator can also restrict access to messages to vendors. To do so, go to Vendors > Vendors, select the necessary vendor, then switch to the Add-ons tab and set Status to Disabled.
![]()
The ability to send and receive messages can be provided within a vendor plan. To enable it, go to Vendors > Vendor plans, select the necessary plan and select the Messenger box.
![]()
You can specify forbidden words by going to Website > Messenger: Forbidden words. Here, you can add new words or phrases, edit them or delete them.
![]()
The forbidden words will be replaced with “***” (3 stars) in the messages on the storefront and in the admin panel.
![]()
The same concerns messages in the admin panel. Such messages will also be highlighted red.
![]()
In the list of messages, the exclamation mark icon will appear next to the message if it contains any of the forbidden words.
![]()
The add-on creates a Messages page for customers. It can be accessed by going to My account > Messages and selecting a particular thread.
![]()
You can customize the layout of this page by going to Design > Layouts. Switch to the Messages tab.
![]()
Tip
Set custom configuration hides the header or the top panel.
USE DEFAULT BLOCK CONFIGURATION shows the header or the top panel.
The default colors of the message background may not match the theme in your store.
![]()
In this case you can change the background colors.
Note
The color scheme can be changed only on the storefront, not in the admin panel.
Here’s how:
- Go to Design > Themes and click Theme editor next to the theme you are using.
![]()
- In the opened Theme editor, select Custom CSS and copy/paste the following part of code into the input field:
/* Author messages color */ .author-message .ty-sd_messaging_system-all:before { background-color: #ea621f; } .author-message .ty-sd_messaging_system-all { background-color: #ea621f; } /* Recipient messages color */ .ty-sd_messaging_system-all { background-color: #eceff1; } .recipient-message .ty-sd_messaging_system-all:before { background-color: #eceff1; }
- Next, change the hex codes of colors you want to use for background.
![]()
Tip
Hex color code has the format of a hash (#) followed by 6 numbers or letters. For example, #eceff1 or #ea621f. There are plenty of websites where you can pick suitable colors for your store, like HTML Color Codes or Paletton.
- Click Save
If you are changing the default theme, you will need to create a copy of the theme after you make the changes. So, right after you click Save, a pop-up will appear:
![]()
Enter a new name for the style and click OK. The copy of the theme will be created automatically.
Make sure it is selected as your current theme.
![]()
Here’s the result:
![]()
Both customers and vendor’s administrators are notified of new messages by email. You can easily edit the email template.
Administrator notifications are sent to vendor’s administrators to inform them about a new message or a new thread.
Here’s the default template.
![]()
To edit the template:
- Go to Design > Email templates.
- In the Administrator notifications tab, select the necessary template.
![]()
- Edit the template and click Save.
![]()
Here are the steps for server configuring:
php-zmq
with dependent packages.supervisor
package, then enable it (start on boot)[program:messenger]
command=<PATH_TO_PHP> <SERVER_ROOT>/app/addons/sd_messaging_system/bin/push-server.php
autostart=true
autorestart=true
numprocs=1
startsecs=0
exitcodes=0,1,2
stopsignal=KILL
log_stdout=true
log_stderr=true
logfile=/var/log/messanger.log
logfile_maxbytes=1MB
logfile_backups=10
user=<WEB_USER>
Replace <PATH_TO_PHP> with the path to PHP interpreter, <SERVER_ROOT> with the path to CS-Cart directory, <WEB_USER> with the user (the user can be switched on if the supervisor was started as the root user).
http {
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
server {
...
location /ws {
proxy_pass http://127.0.0.1:8091;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
Sample httpd config is:
SSLProxyEngine on
ProxyPass "/ws" "ws://127.0.0.1:8091/"
ProxyPass "/wss" "wss://127.0.0.1:8092/"
Websocket Port: 8091
Pusher Port: 8092
Websocket URL: mysite.com/ws
Replace mysite with your site domain name.
Questions & Feedback
Have any questions that weren't answered here? Need help with solving a problem in your online store? Want to report a bug in our software? Find out how to contact us.