How I built a live chat with my Ecommerce Store Using Medusa and Rocket.Chat

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.

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.

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.

Prerequisites

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.

Set up an Ecommerce Store with Medusa

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:

npx create-medusa-app

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:

cd medusa-store/backend

Then run the command below to start the server:

npm start

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:

cd medusa-store/storefront

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, 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.

Integrate Rocket.Chat with Next.js Starter

To integrate Rocket.Chat with Next.js, you need to copy some JavaScript code from Rocket.Chat to your storefront.

To integrate Rocket.Chat into your store, you need to copy some JavaScript code from Rocket.Chat by clicking on the avatar icon and then Omnichannel.

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 /storefront/src/pages/index.tsx:

import Head from "@modules/common/components/head"
import FeaturedProducts from "@modules/home/components/featured-products"
import Hero from "@modules/home/components/hero"
import Layout from "@modules/layout/templates"
import { ReactElement } from "react"
import { NextPageWithLayout } from "types/global"
import Script from "next/script"

const Home: NextPageWithLayout = () => {
  return (
    <>
      <Script id="rocket-chat" strategy="afterInteractive">
                {`
                    // paste the javascript code here
                    // the immediately invoked function is just an example
                    (function() {
                        // ...
                    })();
                `}
            </Script>
      <Head
        title="Home"
        description="Shop all available models only at the ACME. Worldwide Shipping. Secure Payment."
      />
      <Hero />
      <FeaturedProducts />
    </>
  )
}

Home.getLayout = (page: ReactElement) => {
  return <Layout>{page}</Layout>
}

export default Home

To run inline scripts using the Script component, they must be written by placing the JavaScript code within template literals (`) and outer curly braces.

The Script takes a strategy prop to determine when Next.js would run the script.

Test it

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.

Conclusion

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.