将实时聊天添加到您的电子商务商店可让您与客户实时沟通,从而通过快速响应建立信任和满意度。

Medusa是一个开源的无头商务平台,为开发者提供了绝佳的体验。它使他们能够轻松定制他们的电子商务平台并集成第三方服务。

Chatwoot是一个开源客户参与平台,可让您向网站和应用程序添加实时聊天支持。借助 Chatwoot 在您的商店中的实时聊天功能,客户能够获得快速、实时的查询响应,从而提供无缝的购物体验。

在本教程中,您将使用 Medusa、Chatwoot 和 Next.js 将实时聊天功能添加到您的电子商务商店。

为什么要使用美杜莎

Medusa 为开发者和商家提供了绝佳的体验。作为开发人员,您可以根据需要自由定制和重塑平台,以更好地实现自定义功能。

作为商家,您无需担心是否可以添加您的自定义功能和愿景。您可以在可以添加到商店的功能或第三方服务方面获得更大的灵活性。

作为一个开源电子商务平台,美杜莎可以与任何第三方服务相结合,为您的客户提供更好的用户体验,并为您的商店提供必要的功能。

为什么将实时聊天添加到您的电子商务商店

客户通常需要保证他们是从电子商务商店购买的,如果他们在购买之前、期间和之后遇到任何问题,这将帮助他们解决问题。研究表明,如果退货流程容易通过,92% 的消费者会再次从商店购买。

尽管 Medusa 是少数提供全自动 RMA 流程以实现无缝购买和退货体验的电子商务平台之一,但添加实时聊天以轻松与客户沟通可以建立信任。您的客户将更有信心从您的品牌购买。

实时聊天小部件不仅是退货流程所必需的。他们还可以帮助您的客户更快地找到他们需要的东西,尤其是在他们不情愿或不确定他们正在寻找什么的时候。

为什么使用 Chatwoot

Chatwoot 为您提供管理对话、建立关系和取悦客户的所有工具,无论他们使用何种平台。

Chatwoot 允许您在您的网站上添加一个实时聊天小部件,您可以根据您的品牌对其进行自定义。您可以使用自动聊天机器人自动化与客户的对话,以获得更好的响应时间。

您可以使用免费的 Chatwoot 计划,该计划提供丰富的功能和资源,或者您可以自由地自行托管 Chatwoot,因为它是一项开源服务。这为您的技术提供了进一步的所有权和实施中的自由。

设置美杜莎服务器

首先安装 Medusa CLI:

npm install -g @medusajs/medusa-cli

进入全屏模式 退出全屏模式

然后,使用以下命令安装 Medusa 服务器

medusa new my-medusa-server --seed

进入全屏模式 退出全屏模式

--seed选项将虚拟数据添加到您的 Medusa 服务器。

接下来,切换到新创建的目录并使用以下命令运行服务器。

medusa develop

进入全屏模式 退出全屏模式

您的服务器将在localhost:9000运行。您可以通过向localhost:9000/store/products发送GET请求来测试它。您应该会收到商店中产品的 JSON 响应:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--5R0OuIp7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/qcvofkhznux4oxss2uvd.png)

设置 Next.js 店面

接下来,您将设置电子商务商店的店面。 Medusa 有 2 个现成的店面可供您使用:Next.js店面和Gatsby店面。对于本教程,您将使用 Next.js 店面。

在不同的目录中运行以下命令以安装 Next.js 店面:

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

进入全屏模式 退出全屏模式

完成后更改到新创建的目录client并为店面运行服务器:

npm run dev

进入全屏模式 退出全屏模式

这将在localhost:8000上运行。确保服务器仍在运行,否则在打开店面时会看到错误。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--6xJNzioc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/96rmf633fyavgv0a4lbf.png)

创建 Chatwoot 收件箱

现在您的服务器和 Next.js 店面已启动并运行,是时候集成 Chatwoot 的实时聊天功能了。

如果您还没有账户,请从开始在 Chatwoot注册一个账户。创建帐户后,您需要验证 Chatwoot 发送给您的电子邮件。

接下来,您需要创建一个新的收件箱,用于保存来自您店面的所有客户消息。点击页面左侧的“新建收件箱”,然后点击网站。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--zYWlJyU6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/0iwd66ctx9ey85nd7uzq.png)

然后,输入您的网站名称并将网站域设置为您店面的域,在本教程中为localhost:8000。您可以选择自定义小部件,例如更改小部件颜色和欢迎标语。您在此处所做的任何自定义更改都将显示在您的店面中。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--ri3lSGF---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/uploads/articles/gybviojdbgkh8biz4rhi.png)

完成后点击“创建收件箱”。

之后,系统将提示您添加或选择现有代理。代理负责响应来自您店面实时聊天小部件的消息。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--C9wzdrNV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/pcm8s0gqjpjqt33ufq4m.png)

添加一个或多个代理后,单击添加代理以准备好您的收件箱。

现在您的收件箱已准备就绪,Chatwoot 将为您提供一个代码片段以添加到您的网站:

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

进入全屏模式 退出全屏模式

请注意,它包含一个网站令牌来代替<WEBSITE_TOKEN>。

将 Chatwoot 的实时聊天与 Next.js 集成

在本节中,您将在创建收件箱后将在 Chatwoot 中获得的代码片段添加到 Next.js 店面。在components文件夹下创建一个新文件ChatwootWidget.js,其内容如下:

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;

进入全屏模式 退出全屏模式

请记住将<WEBSITE_TOKEN>替换为您自己的令牌。

接下来,在pages/index.js文件中导入ChatwootWidget组件:

import ChatwootWidget from '../components/ChatwootWidget'

进入全屏模式 退出全屏模式

并在返回的 JSX 中的 div 末尾添加ChatwootWidget:

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

进入全屏模式 退出全屏模式

这就是将 Chatwoot 的实时聊天添加到您的电子商务商店所需的全部内容!

以客户身份测试实时聊天

如果您现在打开店面,您可以查看实时聊天功能。您会在店面的右下角看到一个气泡,该气泡具有默认的蓝色或您在自定义 Chatwoot 小部件时选择的颜色。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--MwO8Roox--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/93jg208w1w5g8xa3hst2.png)

单击商店上的蓝色气泡并尝试发送消息。例如_嗨,有小号的紫色衬衫吗?_

然后将自动提示您选择与代理共享您的电子邮件,以便他们稍后可以在需要时与您联系。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--97FPipLq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/wud50jebaxljsp5ycc2r.png)

测试我们作为代理的实时聊天

如果您打开您的 Chatwoot 帐户,您将看到来自您的店面的所有消息

在这里,您可以立即回复客户并进行对话。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--5jmvQLtO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/u6t08nzo4ifjoelsee3h.png)

您将看到来自您的店面的所有消息。一旦您回复,客户也会立即收到回复。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--mkM-nTHB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/uploads/articles/xw4jangs633ke4ljhqsl.png)

结论

实时聊天可以更轻松地实时响应客户查询,从而节省时间并确保积极的用户体验。

使用 Medusa、Chatwoot 和 Next.js 等开源解决方案可以使创建电子商务商店和添加实时聊天等功能的过程变得更加容易,并且没有任何变通办法。

查看Medusa 的文档,了解有关您可以使用电子商务商店做什么的更多信息。您还可以从他们的文档中了解有关 Chatwoot 的更多信息。

有关美杜莎的更多疑问和疑虑,请随时加入我们的Discord。