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.
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.
Medusa is hosting a hackathon for Hacktoberfest 2022 and this article is an example of what you can submit. To join this hackathon and stand a chance to win $1,500 amidst other prizes, you can read the guidelines.
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 section to Configuring Rocket.Chat Account.
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,
node --version, in your terminal should return the version of Node that is currently installed in your machine.
To set up a store, you can use the
create-medusa-app package, which creates installs the store frontend, admin panel, and backend application.
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.
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,
zt4ff is the admin username.
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.
In Omnichannel, click on Livechat Installation.
In our case, only the immediately invoked function expression within the
<script> tag is needed, so you can manually copy and paste it within a
Script component’s tag that is exported from the
next/script package in
To run inline scripts using the
Script takes a
strategy prop to determine when Next.js would run the script.
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.