Including reside chat to your ecommerce retailer enables you to talk along with your shoppers in real-time thus constructing belief and satisfaction with quick responses.
Medusa is an open supply headless commerce platform that gives builders with an ideal expertise. It permits them to simply customise their ecommerce platform and combine third-party providers.
Chatwoot is an open supply buyer engagement platform that permits you to add live-chat assist to web sites and apps. With Chatwoot’s live-chat in your retailer, prospects are in a position to get quick and real-time responses for his or her inquiries thus offering a seamless buying expertise.
On this tutorial, you’ll add live-chat performance to your ecommerce retailer utilizing Medusa, Chatwoot, and Subsequent.js.
Why Use Medusa
Medusa offers an ideal expertise for each builders and retailers. As a developer, you’ve got the liberty to customise and reshape the platform as crucial for a greater implementation of customized options.
As a service provider, you need not fear about whether or not it’s potential or to not add your customized options and visions. You might be assured far more flexibility in what options or third-party providers you’ll be able to add to your retailer.
As an open supply ecommerce platform, Medusa may be mixed with any third-party providers to offer your prospects with a greater person expertise and enrich your retailer with crucial options.
Why Add Stay-Chat to Your Ecommerce Retailer
Clients typically want assurance that they’re buying from an ecommerce retailer that can assist them out in the event that they run into any downside earlier than, throughout, and after their buy. Research shows that 92% of consumers will buy once more from a retailer if their return course of is simple to undergo.
Though Medusa is likely one of the few ecommerce platforms that present absolutely automated RMA flows for a seamless buy and return expertise, including live-chat for simple communication along with your prospects builds belief. Your prospects can be extra assured buying out of your model.
Stay-chat widgets aren’t solely crucial for return processes. They’ll additionally assist your prospects discover what they want quicker, particularly in the event that they’re reluctant or not sure about what they’re in search of.
Why Use Chatwoot
Chatwoot offers you all of the instruments to handle conversations, construct relationships and delight your prospects from one place no matter the platform they’re utilizing.
Chatwoot permits you to add a reside chat widget in your web sites that you may customise based mostly in your model. You’ll be able to automate your conversations with prospects for even higher response instances with automated chatbots.
You should use the free Chatwoot plan which affords beneficiant options and sources, or you might be free to self-host Chatwoot as it’s an open supply service. This offers additional possession of your tech stalk and freedom in your implementation.
Set Up The Medusa Server
Begin by putting in the Medusa CLI:
npm set up -g @medusajs/medusa-cli
Then, set up the Medusa server with the next command
medusa new my-medusa-server --seed
The --seed possibility provides dummy information to your Medusa server.
Subsequent, change to the newly created listing and run the server with the next command.
medusa develop
Your server will run at localhost:9000. You’ll be able to check it out by sending a GET request to localhost:9000/retailer/merchandise. It is best to obtain a JSON response of the merchandise in your retailer:
Arrange the Subsequent.js Storefront
Subsequent, you’ll arrange the storefront of your ecommerce retailer. Medusa has 2 ready-made storefronts that you should utilize: The Next.js storefront and the Gatsby storefront. For this tutorial, you’ll be utilizing the Subsequent.js storefront.
Run the next command in a distinct listing to put in the Subsequent.js storefront:
npx create-next-app -e https://github.com/medusajs/nextjs-starter-medusa consumer
As soon as it’s performed change to the newly created listing consumer and run the server for the storefront:
npm run dev
This can run on localhost:8000. Ensure that the server continues to be operating or you will note errors while you open your storefront.
Create Chatwoot Inbox
Now that you’ve your server and Subsequent.js storefront up and operating it’s time to combine Chatwoot’s live-chat function.
Begin by registering an account with Chatwoot when you don’t have already got one. As soon as the account is created, you’ll must confirm the e-mail despatched to you by Chatwoot.
Subsequent, it is advisable to create a brand new inbox that can maintain all buyer messages coming out of your storefront. Click on on “New inbox” on the left facet of the web page then click on on Web site.
Then, enter your Web site Title and set the Web site Area to the area of your storefront which is localhost:8000 on this tutorial. You’ll be able to optionally customise the widget corresponding to altering the widget colour and welcome taglines. Any customization modifications you make right here can be proven in your storefront.
When you’re performed click on on “Create Inbox”.
After that, you’ll be prompted so as to add or select an current agent. Brokers are liable for responding to messages coming from the reside chat widget in your storefront.
After including a number of brokers click on on Add Brokers to get your inbox prepared.
Now that your inbox is prepared, Chatwoot will offer you a code snippet so as to add to your web site:
<script>
(operate(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=operate(){
window.chatwootSDK.run({
websiteToken: '<WEBSITE_TOKEN>',
baseUrl: BASE_URL
})
}
})(doc,"script");
</script>
Discover that it features a web site token within the place of <WEBSITE_TOKEN>.
Combine Chatwoot’s Stay-Chat with Subsequent.js
On this part, you’ll add the code snippet you obtained in Chatwoot after creating the inbox to your Subsequent.js storefront. Below the elements folder create a brand new file ChatwootWidget.js with the next content material:
import { useEffect } from "react";
const ChatwootWidget = () => {
useEffect(() => {
(operate(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=operate(){
window.chatwootSDK.run({
websiteToken: `<WEBSITE_TOKEN>`, //please add your web site token right here
baseUrl: BASE_URL
})
}
})(doc,"script");
}, []);
return null;
};
export default ChatwootWidget;
Please bear in mind to switch <WEBSITE_TOKEN> with your personal token.
Subsequent, import the ChatwootWidget part within the pages/index.js file:
import ChatwootWidget from '../elements/ChatwootWidget'
and add the ChatwootWidget on the finish of the div within the returned JSX:
return (
<div>
...
<ChatwootWidget />
</div>
);
And that’s all it is advisable to add Chatwoot’s reside chat to your ecommerce retailer!
Take a look at Out the Stay Chat As a Buyer
For those who open your storefront now, you’ll be able to view the live-chat performance. You’ll see a bubble on the backside proper of the storefront with both the default blue colour or the colour you selected while you personalized your Chatwoot widget.
Click on on the blue bubble in your retailer and take a look at sending a message. For Instance Hello, there may be the purple shirt accessible in a small measurement?
You’ll then be mechanically prompted to optionally share your e mail with the agent in order that they’ll attain you in a while if want.
Take a look at Our Stay Chat as an Agent
For those who open your Chatwoot account, you’ll see all messages which are coming out of your Storefront
Right here you’ll be able to instantly reply to shoppers and get the dialog going.
You’ll see all of the messages which are coming out of your Storefront. When you reply, the shopper will get the replies instantly as nicely.
Stay-chat makes it simpler to reply to your prospects queries in real-time thus saving time and guaranteeing a optimistic person expertise.
Utilizing open supply options like Medusa, Chatwoot, and Subsequent.js makes the method of making your ecommerce retailer and including options like live-chat a lot simpler and with no hacky workarounds.
Take a look at Medusa’s documentation for extra data on what you are able to do along with your ecommerce retailer. It’s also possible to be taught extra about Chatwoot from their documentation.
For additional queries and considerations on Medusa be at liberty to affix our Discord.