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

npm install -g @medusajs/medusa-cli

Then, install the Medusa server with the following command

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.

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:

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 storefront and the Gatsby 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:

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:

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.

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

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.

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.

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:

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

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:

import ChatwootWidget from '../components/ChatwootWidget'

and add the ChatwootWidget at the end of the div in the returned 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.

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.

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.

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

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 for more information on what you can do with your ecommerce store. You can also learn more about Chatwoot from their documentation.

For further queries and concerns on Medusa feel free to join our Discord.