Create a Fully Open Source Next.js Ecommerce Store with Live Chat using Chatwoot
Tags: javascript, opensource, programming, webdev
Published: 2022-05-10 09:59:10



Adding live chat to your ecommerce store lets you communicate with your clients in real-time thus building trust and satisfaction with fast responses.

[Medusa](http://medusajs.com) is an open source headless commerce platform that provides developers with a great experience. It allows them to easily customize their ecommerce platform and integrate third-party services. 

[Chatwoot](http://chatwoot.com) is an open source customer engagement platform that lets you add live-chat support to websites and apps. With Chatwoot’s live-chat on your store, customers are able to get fast and real-time responses for their inquiries thus providing a seamless shopping experience.

In this tutorial, you’ll add live-chat functionality to your ecommerce store using Medusa, Chatwoot, and Next.js.

## **Why Use Medusa**

Medusa provides a great experience for both developers and merchants. As a developer, you have the freedom to customize and reshape the platform as necessary for a better implementation of custom features. 

As a merchant, you don't need to worry about whether it’s possible or not to add your custom features and visions. You are guaranteed much more flexibility in what features or third-party services you can add to your store.

As an open source ecommerce platform, Medusa can be combined with any third-party services to provide your customers with a better user experience and enrich your store with necessary features.

## Why Add Live-Chat to Your Ecommerce Store

Customers often need assurance that they’re purchasing from an ecommerce store that will help them out if they run into any problem before, during, and after their purchase. [Research shows that 92% of consumers](https://www.invespcro.com/blog/ecommerce-product-return-rate-statistics/) will purchase again from a store if their return process is easy to go through.

Although Medusa is one of the few ecommerce platforms that provide fully automated RMA flows for a seamless purchase and return experience, adding live-chat for easy communication with your customers builds trust. Your customers will be more confident purchasing from your brand.

Live-chat widgets aren’t only necessary for return processes. They can also help your customers find what they need faster, especially if they’re reluctant or unsure about what they’re looking for.

## Why Use Chatwoot

Chatwoot gives you all the tools to manage conversations, build relationships and delight your customers from one place irrespective of the platform they’re using.

Chatwoot allows you to add a live chat widget on your websites that you can customize based on your brand. You can automate your conversations with customers for even better response times with automated chatbots.

You can use the free Chatwoot plan which offers generous features and resources, or you are free to self-host Chatwoot as it is an open source service. This provides further ownership of your tech stalk and freedom in your implementation.

## Set Up The Medusa Server

Start by installing the Medusa CLI:

```bash
npm install -g @medusajs/medusa-cli
```

Then, install the Medusa server with the following command

```bash
medusa new my-medusa-server --seed
```

The `--seed` option adds dummy data to your Medusa server.

Next, change to the newly created directory and run the server with the following command.

```bash
medusa develop
```

Your server will run at `localhost:9000`. You can test it out by sending a `GET` request to `localhost:9000/store/products`. You should receive a JSON response of the products in your store:


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

## Set up the Next.js Storefront

Next, you’ll set up the storefront of your ecommerce store. Medusa has 2 ready-made storefronts that you can use: The [Next.js](https://docs.medusajs.com/starters/nextjs-medusa-starter) storefront and the [Gatsby](https://docs.medusajs.com/starters/gatsby-medusa-starter) storefront. For this tutorial, you’ll be using the Next.js storefront.

Run the following command in a different directory to install the Next.js storefront:

```bash
npx create-next-app -e https://github.com/medusajs/nextjs-starter-medusa client
```

Once it’s done change to the newly created directory `client` and run the server for the storefront:

```bash
npm run dev
```

This will run on `localhost:8000`. Make sure that the server is still running or you will see errors when you open your storefront.


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

## Create Chatwoot Inbox

Now that you have your server and Next.js storefront up and running it’s time to integrate Chatwoot’s live-chat feature.

Start by [registering an account with Chatwoot](https://app.chatwoot.com/app/auth/signup) if you don’t already have one. Once the account is created, you’ll need to verify the email sent to you by Chatwoot.

Next, you need to create a new inbox that will hold all customer messages coming from your storefront. Click on “New inbox” on the left side of the page then click on Website.


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

Then, enter your Website Name and set the Website Domain to the domain of your storefront which is `localhost:8000` in this tutorial. You can optionally customize the widget such as changing the widget color and welcome taglines. Any customization changes you make here will be shown on your storefront. 


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

Once you’re done click on “Create Inbox”.

After that, you’ll be prompted to add or choose an existing agent. Agents are responsible for responding to messages coming from the live chat widget on your storefront.


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

After adding one or more agents click on Add Agents to get your inbox ready.

Now that your inbox is ready, Chatwoot will provide you with a code snippet to add to your website:

```jsx
<script>
  (function(d,t) {
    var BASE_URL="https://app.chatwoot.com";
    var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
    g.src=BASE_URL+"/packs/js/sdk.js";
    g.defer = true;
    g.async = true;
    s.parentNode.insertBefore(g,s);
    g.onload=function(){
      window.chatwootSDK.run({
        websiteToken: '<WEBSITE_TOKEN>',
        baseUrl: BASE_URL
      })
    }
  })(document,"script");
</script>
```

Notice that it includes a website token in the place of `<WEBSITE_TOKEN>`.

## Integrate Chatwoot’s Live-Chat with Next.js

In this section, you’ll add the code snippet you obtained in Chatwoot after creating the inbox to your Next.js storefront. Under the `components` folder create a new file `ChatwootWidget.js` with the following content:

```jsx
import { useEffect } from "react";

const ChatwootWidget = () => {  
	useEffect(() => { 
    (function(d,t) {
      var BASE_URL="https://app.chatwoot.com";
      var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
      g.src=BASE_URL+"/packs/js/sdk.js";
      g.defer = true;
      g.async = true;
      s.parentNode.insertBefore(g,s);
      g.onload=function(){
        window.chatwootSDK.run({
          websiteToken: `<WEBSITE_TOKEN>`, //please add your website token here
          baseUrl: BASE_URL
        })
      }
    })(document,"script");
  }, []);

  return null;
};

export default ChatwootWidget;
```

Please remember to replace `<WEBSITE_TOKEN>` with your own token.

Next, import the `ChatwootWidget` component in the `pages/index.js` file:

```jsx
import ChatwootWidget from '../components/ChatwootWidget'
```

and add the `ChatwootWidget` at the end of the div in the returned JSX:

```jsx
return (
	<div>
		...
		<ChatwootWidget />
	</div>
);
```

And that’s all you need to add Chatwoot’s live chat to your ecommerce store!

## **Test Out the Live Chat As a Customer**

If you open your storefront now, you can view the live-chat functionality. You’ll see a bubble at the bottom right of the storefront with either the default blue color or the color you chose when you customized your Chatwoot widget.


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

Click on the blue bubble on your store and try sending a message. For Example *Hi, there is the purple shirt available in a small size?*

You will then be automatically prompted to optionally share your email with the agent so that they can reach you later on if need.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wud50jebaxljsp5ycc2r.png)
## Test Our Live Chat as an Agent

If you open your Chatwoot account, you’ll see all messages that are coming from your Storefront

Here you can immediately respond to clients and get the conversation going.


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

You’ll see all the messages that are coming from your Storefront. Once you respond, the customer gets the replies immediately as well.


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

# **Conclusion**

Live-chat makes it easier to respond to your customers queries in real-time thus saving time and ensuring a positive user experience.

Using open source solutions like Medusa, Chatwoot, and Next.js makes the process of creating your ecommerce store and adding features like live-chat much easier and with no hacky workarounds.

Check out [Medusa’s documentation](https://docs.medusajs.com/) for more information on what you can do with your ecommerce store. You can also learn more about Chatwoot from [their documentation](https://www.chatwoot.com/developers/api/).

> For further queries and concerns on Medusa feel free to join our [Discord.](https://discord.com/invite/F87eGuwkTp)
>