Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 10, 2022 09:59 am GMT

Create a Fully Open Source Next.js Ecommerce Store with Live Chat using Chatwoot

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 Chatwoots 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, youll 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 its 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 theyre 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 arent only necessary for return processes. They can also help your customers find what they need faster, especially if theyre reluctant or unsure about what theyre 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 theyre 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:

Image description

Set up the Next.js Storefront

Next, youll 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, youll 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 its 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.

Image description

Create Chatwoot Inbox

Now that you have your server and Next.js storefront up and running its time to integrate Chatwoots live-chat feature.

Start by registering an account with Chatwoot if you dont already have one. Once the account is created, youll 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

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

Once youre done click on Create Inbox.

After that, youll 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

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 Chatwoots Live-Chat with Next.js

In this section, youll 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 thats all you need to add Chatwoots 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. Youll 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

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

Test Our Live Chat as an Agent

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

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

Image description

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

Image description

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


Original Link: https://dev.to/medusajs/create-a-fully-open-source-nextjs-ecommerce-store-with-live-chat-using-chatwoot-1fld

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To