How I built a live chat with my Ecommerce Store Using Medusa and Rocket.Chat
Tags: javascript, webdev, programming, opensource
Published: 2022-10-13 11:29:03

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](https://medusajs.com/) is an extensible and customizable open source ecommerce engine. [Rocket.Chat](https://www.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](https://medusajs.com/blog/medusa-hackathon). 

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](https://github.com/zt4ff/integrate-medusa-with-rocketchat).


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmd385qrzparwdaxb9nu.gif)

> 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](https://nodejs.org/en/download/) 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:

```bash
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:

```bash
cd medusa-store/backend
```

Then run the command below to start the server:

```bash
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:

```bash
cd medusa-store/storefront
```

```bash
npm run dev
```

Now, you should have a running store on [http://localhost:8000](http://localhost:8000/).

## Configure a Rocket.Chat Account

If you don’t already have a [Rocket.Chat](http://Rocket.Chat) account, head over to [their website](https://www.rocket.chat/) 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zsgiwphrbinr76twupq6.png)

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eq37rmsxopcy4o9iwg8j.png)

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5oxw2pe241iamse1wrgz.png)

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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yuosv6xmogavkgi4lagz.png)

In the omnichannel settings page, click on the **Livechat** dropdown and update the **Email Address to Send Offline Messages** and **Offline Success Message** options. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/52p5nygvqpw1ur2my394.png)

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](http://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.**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2tade3oemr1agwgrqkz2.png)

In **Omnichannel**, click on **Livechat Installation.**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bcdpafl8gt2hssxeh1i5.png)

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:`

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7r1fbzywjtyfqzpvhr5u.png)

If you chat using the live chat widget, you can see the messages on your [Rocket.Chat](http://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](https://docs.medusajs.com/) 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](https://discord.gg/F87eGuwkTp).