Having a good support channel is important in the development and growth of a business. A good support channel provides a feedback loop between a business and its customers.
Medusa is an extensible and customizable open source ecommerce engine. Rocket.Chat is a secure and compliant communications platform with features like omnichannel customer service.
Adding a live-chat widget in an ecommerce website makes it easier for your customers to ask any questions they have and receive instant responses. It builds your relationship with your customers and leads to a better user experience.
In this tutorial, you will set up a new store with Medusa and integrate a Rocket.Chat omnichannel live chat feature in the storefront.
You can find the code for this tutorial in this repository.
If you have a store already set up, skip the next sections to Configuring Rocket.Chat Account.
Why Use Rocket.Chat with Medusa?
As established in the introduction of this article, having a good customer support channel is very important. Rocket.Chat is an open source and fully customizable communication system design with high standards of data protection.
Using Rocket.Chat with Medusa, you can acquire and retain customers in an omnichannel environment to build relationships with customers, provide a valuable experience to users, and create a feedback loop between your store and customers.
With Medusa, you can integrate any third-party services using its extendible architecture and its plugins system. This allows developers and merchants to choose the best-in-breed solutions for every feature.
Medusa also provides many important ecommerce features including automated RMA flows, advanced pricing options with price lists, order and product management, and much more.
To follow this tutorial, you need to have Node.js installed.
Medusa requires at least version 14 of Node.js. You can follow the instructions on Node.js’s official download page to learn how to install it. Running the command,
, in your terminal should return the version of Node that is currently installed in your machine.Copy to clipboard
Set up an Ecommerce Store with Medusa
To set up a store, you can use the
package, which creates and installs the store frontend, admin panel, and backend application.Copy to clipboard
Run this command in any directory of your choice to install all these three components:
Then, you’ll be asked some questions:
- Select the default for “Where should the project be installed”.
- Select “medusa-starter-default” for “Which Medusa starter would you like to install?”.
- Then select “Next.js Starter” for “Which storefront starter would you like to install?”.
After complete installation, three directories will be created for you which include the backend, storefront, and admin.
To start the backend server, change your directory to the backend directory in your terminal by running the command below:
Then run the command below to start the server:
To start the storefront server, you need to start a new terminal session (open a new window in your terminal) and change the directory to the storefront folder.
Then start the server on the storefront by running the command below:
npm run dev
Now, you should have a running store on http://localhost:8000.
Configure a Rocket.Chat Account
If you don’t already have a Rocket.Chat account, head over to their website to create an account. Rocket.Chat requires a work email to create an account.
After successful account creation, you need to create an agent. Click on your avatar icon ⇒ Omnichannel ⇒ Agents button.
Under Agents settings, in the username input, select your username and proceed to add yourself as an agent. In my case,
is the admin username.Copy to clipboard
Since you added your username as an agent, you need to set your status to be available for live chat. Ensure the button pointed out below is green to indicate that you are available for online chats.
Then, you need to enable the Rocket.Chat embed to run in an iframe on a different domain. Click on your account avatar again, then open the pages in this sequence: Administration ⇒ Settings ⇒ General. Disable the Restrict access inside any iframe option:
Finally, for basic configurations, you need to set up a destination email for offline messages (when an agent is not available for live chats) and a confirmation message that is displayed when an offline message is sent.
To do this, click on your avatar icon and click on the Administration button, then open the Settings page.
In the settings page, search for “omnichannel” and open its setting page.
In the omnichannel settings page, click on the Livechat dropdown and update the Email Address to Send Offline Messages and Offline Success Message options.
Then proceed to save the changes you made.
Note: Not configuring these offline message options would result in the chat widget in your storefront reporting an “invalid email” error which can confusing to your store visitors.
Integrate Rocket.Chat with Next.js Starter
In Omnichannel, click on Livechat Installation.
In our case, only the immediately invoked function expression within the
tag is needed, so you can manually copy and paste it within aCopy to clipboard
component’s tag that is exported from theCopy to clipboard
package inCopy to clipboard
Copy to clipboard
To run inline scripts using the
takes aCopy to clipboard
prop to determine when Next.js would run the script.Copy to clipboard
Now, you can see that the live chat widget is functional and visible on the storefront.
If you chat using the live chat widget, you can see the messages on your Rocket.Chat dashboard and reply to them instantly.
In this tutorial, you successfully integrated a Rocket.Chat live chat widget in your Medusa store and created agents to handle real-time chats.
Make sure to check out Medusa’s documentation to learn more about Medusa’s features and what can you do using it.
Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via Discord.
Share this post
You may also like
May 25, 2023
Good Chef & Webbers: Powering subscriptions with Medusa’s commerce modules
Shahed and Nicklas
On this page