Medusa won the Golden Kitty Award for Best Ecommerce Product ✨  Learn More

Medusa Logo
  • Developers
  • Blog
  • Pricing
  • Community
  • About
  • Careers
  • Get Started
  • Developers
  • Blog
  • Pricing
  • Community
  • About
  • Careers
  • Get Started
Community

Ecommerce Customer Support: Set up Medusa with Rocket.Chat

Learn how to set up a new store with Medusa and integrate a Rocket.Chat omnichannel live chat feature.

Ecommerce customer support: Set up Medusa with Rocket.Chat

Share

Person photo
Kayode OluwasegunOct. 13, 2022• 4 min.

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.

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

Share

Medusa Newsletter

Stay up to date

In our Newsletter you get the most important Medusa news directly in your inbox

Up Next

Deploy a Medusa Server on AWS with Microtica

A Step-by-Step Tutorial on How to Deploy a Medusa Server on AWS

Learn how to deploy Medusa on AWS with Microtica

Person photo
Marija NaumovskaJan. 16, 2023• 3 min.

You may also like

Use ChatGPT to Automate Product Description Writing

Use ChatGPT to Automate Product Description Writing

Never think about product descriptions. Automate product description creation with ChatGPT and Medusa

Person photo
Ashutosh KrishnaJan. 19, 2023• 7 min.
Roadmap update - Jan 2023

Roadmap update - Jan 2023

Keep reading to learn about what’s in store for future versions of Medusa.

Oliver Juhl
Oliver JuhlJan. 17, 2023• 4 min.
Inspired by Git: How we Designed our Order-Editing Feature

Inspired by Git: How we Designed our Order-Editing Feature

This article covers how we adopted principles from the Git version control system and GitHub in our Order Editing API design.

Oliver Juhl
Oliver JuhlJan. 25, 2023• 4 min.
Order Edits and Payment Collections are now available

Order Edits and Payment Collections are now available

Learn more about Medusa’s new order-editing feature and how it works

Person photo
Sebastian RindomJan. 25, 2023• 2 min.
Ecommerce APIs: What they are and how they work

Ecommerce APIs: What they are and how they work

This article first discusses the basics of ecommerce APIs and an in-depth evaluation of an open source ecommerce API-first solution —Medusa.

Person photo
Esther ChristopherJan. 23, 2023• 7 min.
Use ChatGPT to Automate Product Description Writing

Use ChatGPT to Automate Product Description Writing

Never think about product descriptions. Automate product description creation with ChatGPT and Medusa

Person photo
Ashutosh KrishnaJan. 19, 2023• 7 min.
Roadmap update - Jan 2023

Roadmap update - Jan 2023

Keep reading to learn about what’s in store for future versions of Medusa.

Oliver Juhl
Oliver JuhlJan. 17, 2023• 4 min.
Inspired by Git: How we Designed our Order-Editing Feature

Inspired by Git: How we Designed our Order-Editing Feature

This article covers how we adopted principles from the Git version control system and GitHub in our Order Editing API design.

Oliver Juhl
Oliver JuhlJan. 25, 2023• 4 min.
Order Edits and Payment Collections are now available

Order Edits and Payment Collections are now available

Learn more about Medusa’s new order-editing feature and how it works

Person photo
Sebastian RindomJan. 25, 2023• 2 min.
Medusa Logo

Product

Medusa for B2BIntegrationsGet StartedCareers
We're hiring

Developers

DocsAPI ReferencesCommunityDiscussions

Medusa

BlogPricingAboutContact Us

Newsletter

Get a summary of what we’ve shipped during the last month, behind the scenes updates, and team picks. Unsubscribe any time.

© 2023 MedusaJS, Inc.