Chatwoot生成的SDK插进网页以后，访客消息会进入客服收件箱，后台回复还能返回前台

fruge365

发布于 2026-10-27 08:57:02

290

Chatwoot生成的SDK插进网页以后，访客消息会进入客服收件箱，后台回复还能返回前台

前言

网站需要在线客服时，真正关键的不只是“有没有一个聊天气泡”，而是前台用户发来的消息能不能稳定进入后台、客服能不能继续回复、后续还能不能增加新的坐席一起处理会话。只有这条链真正跑通，客服组件才算接进了现有网站。

Chatwoot适合用来完成这套流程。它先提供独立的客服后台，再通过网站渠道生成一段JavaScript SDK代码，把聊天窗口嵌入现有页面。前台用户发起会话以后，消息进入Chatwoot收件箱，客服直接在后台回复。

这篇以绿联NAS部署Chatwoot为起点。先通过脚本完成服务安装和基础设置，再配置邮件、中文界面和公网访问地址，确保客服后台能够从浏览器稳定打开。

随后正文会创建网站收件箱、选择客服代理、生成SDK代码，把BASE_URL改成当前Chatwoot访问地址，再把整段脚本插入目标网页。刷新页面以后，会实际测试前台发送消息、后台接收会话，再从后台回复到前台。

最后还会继续增加新的客服坐席。整篇真正跑的是部署Chatwoot → 配置公网入口 → 创建网站渠道 → 嵌入JavaScript SDK → 前后台消息互通 → 增加客服坐席这条链。

1 什么是Chatwoot?

Chatwoot 是一款基于 Ruby on Rails + Vue.js 开发的开源全渠道客服系统。它提供网页聊天、邮件和多种外部渠道接入，并把这些会话集中到同一个客服后台中处理。

它最大的亮点是什么？全渠道统一管理。用户无论是从你的网站发起聊天、发邮件咨询、在 Facebook 留言、还是通过 WhatsApp 私信你，所有消息都会汇总到同一个后台界面，客服人员不用在多个平台之间来回切换，一个后台搞定所有渠道的客户对话。而且Chatwoot还支持Android、iOS、PC（pwa）多端支持、让你无需一定得打开电脑，才能处理客户信息！

它能为你做什么？

多渠道接入：支持网页实时聊天、邮件、Facebook、Instagram、Twitter、WhatsApp、Telegram、Line、SMS 等多种渠道
AI 智能客服（Captain）：自动回复常见问题，减轻人工客服负担，让用户秒级获得答案
帮助中心门户：自建知识库和 FAQ，用户可以自助查找答案
团队协作：支持内部备注、@提醒、会话分配、工单系统，多人客服团队协作无缝
客户画像：记录用户信息、历史对话、自定义标签，精准了解每个客户
数据报表：实时统计客服工作量、响应速度、客户满意度（CSAT），数据驱动优化服务
强大集成：对接 Slack、Dialogflow（聊天机器人）、Shopify（电商订单）、Google 翻译等工具

对于希望自己维护客服系统的人来说，Chatwoot可以部署在自有服务器或NAS上，对话和配置也由自己的实例继续管理。

2 一键部署Chatwoot

本教程以在绿联 NAS 上部署 Chatwoot 为例进行演示。其他 NAS 系统（如群晖、极空间、威联通）或 Linux 服务器的操作步骤基本一致，只要能 SSH 连接并支持 Docker 即可。

这里使用一份自动化部署脚本完成镜像下载、数据库和环境变量配置以及服务启动，后续再根据终端提示填写安装目录、访问方式和邮件参数。

2.1 连接 SSH 终端

首先，需要先给绿联Nas开启SSH远程登录功能，点击首页的控制面板：

然后点击终端机图标，点击进入：

点击勾选SSH功能，然后点击应用（注意：SSH密码为登录的密码，建议密码一定要设置强密码，特别是公网环境下！！）：

接着，电脑上摁Win + X键，选择终端（管理员），打开PowerShell终端：

在终端输入如下命令，连接你的绿联Nas终端：

# ssh 你的绿联Nas用户名@你的绿联Nas访问IP地址
ssh susu@192.168.50.99

连接上绿联Nas的终端后，在终端中输入如下命令，切换至root用户：

sudo -i

2.2 部署Chatwoot

连接上你的Nas终端后，在终端输入如下命令，进行一键部署：

curl -fsSL https://gitee.com/jun-wan/script/raw/master/chatwoot_docker/deploy.sh -o /tmp/chatwoot-deploy.sh && chmod +x /tmp/chatwoot-deploy.sh && /tmp/chatwoot-deploy.sh

如下图所示：

配置一个安装目录后回车，或直接回车采用默认目录，然后来到配置项目端口部分：

在项目端口部分，选择访问方式为2，使用服务器的IP地址，当然，也可以选择使用3，直接填写要使用的域名，如穿透后的域名或者您的自定义域名，这里以2为例：

填写当前的绿联Nas访问的IP地址即可，接下来配置邮件服务：

支持多种邮箱服务商，这里以163为例，选择3后回车，会提示输入发件人邮箱地址：

输入完成后，会提示需要邮箱授权码，首先登录到你的163邮箱,然后点击顶部的设置按钮，再选择POP3/SMTP/IMAP点击进入：

https://mail.163.com/

点击后，进入到如下页面，首先需要先开启SMTP服务，然后在下方的授权密码管理点击新增授权密码按钮，进行添加：

点击后，会提示授权码，将授权码复制下来（注意：只会显示一次）：

复制下来后，点击确认按钮，然后回到终端页面，粘贴获取的授权码：

填写完成后，回车，即可开始镜像拉取，等待镜像拉取完毕即可启动(如遇到拉取失败，重新执行脚本从拉取流程走即可)：

部署完成后，会出现如上部署完成提示，输出访问地址，即代表部署完成！

2.3 基础配置Chatwoot

部署完成后，在浏览器中访问该地址：

http://192.168.50.99:4000

填写好表单信息（密码需要设置强密码，否则无法完成设置），然后点击完成设置即可，点击后会跳转登录页面：

使用设置好的邮箱和密码进行登录，登录后即可来到主页：

来到首页后，点击Settings按钮，来到设置页面，将站点语言改为中文：

改为中文后，页面的语言就变成中文啦：

语言和基础账户设置完成后，就可以继续处理公网访问和网站接入。

3 下载安装cpolar

前面的Chatwoot已经能够在局域网中访问，但如果要把聊天窗口嵌入公网网页，Chatwoot本身也需要有一个外部可访问的地址，否则前台页面无法和客服后台建立连接。

这里继续使用cpolar给Chatwoot提供公网入口，后面的JavaScript SDK也会基于这个访问地址来配置。

3.1 什么是cpolar?

cpolar 是一款内网穿透工具，可以将你在局域网内运行的服务（如本地 Web 服务器、SSH、远程桌面等）通过一条安全加密的中间隧道映射至公网，让外部设备无需配置路由器即可访问。
广泛支持 Windows、macOS、Linux、树莓派、群晖 NAS 等平台，并提供一键安装脚本方便部署。

3.2 安装cpolar

回到PowerShell终端，如果还在容器内部，执行exit命令即可退出：

退出Docker容器内部后，执行如下命令，一键安装cpolar：

sudo curl https://get.cpolar.sh | sh

接着输入如下命令，确认cpolar是否启动：

sudo systemctl status cpolar

可以看到显示为active（running），表示为正常在线状态。

接着，我们在浏览器中，输入你的绿联NAS的IP地址+9200端口，进行访问cpolar的web ui控制台：

http://192.168.50.99:9200/

可以发现，成功的访问到cpolar的web ui页面啦！如果没有注册cpolar的小伙伴也可以点击底部的按钮跳转注册！

4 穿透Chatwoot以实现公网访问

4.1 随机域名方式（免费方案）

cpolar 免费版提供了随机域名隧道功能，无需任何费用即可将你的 Chatwoot 服务暴露到公网。随机域名的格式类似 xxxxxx.cpolar.top，非常适合临时测试、功能验证或个人尝鲜使用。

⚠️ 注意：免费版随机域名每 24 小时会自动更换一次，如果你需要长期稳定的访问地址（比如嵌入到正式网站中），建议使用后面介绍的固定域名方式。

注册好账号以后，回到该页面进行登录即可，登录 cpolar 后台后，进入侧边的【隧道管理>隧道列表】，可以看到有2条隧道：

选择website这条隧道，点击编辑进行修改（也可以创建新的隧道），设置一个方便辨识的隧道名称，然后协议选择http,本地地址填写Chatwoot的访问端口4000，地地区这里选择的China Top，最后点击更新：

创建或者更新完成后，接着点击【状态>在线隧道里列表】，可以看到有2条名称为Chatwoot的隧道，一条为http的协议，另一条为https的协议：

复制公网地址，这里以https为例，访问测试一下：

随机地址可以先用来测试Chatwoot是否能够从公网正常访问。对于后面要长期写进SDK代码的场景，如果访问地址会变化，就需要同步修改网页中的BASE_URL。

因此，正文继续配置固定二级子域名，后面的网站集成也直接基于这个固定地址进行，避免SDK里的访问地址频繁变化。

4.2 固定二级子域名方式

要配置固定二级子域名，需要将 cpolar 账号升级至基础套餐或以上。升级后，你将获得保留二级子域名的权限，可以自定义一个专属的、永久有效的公网地址。

首先，进入官网的预留页面：

https://dashboard.cpolar.com/reserved

然后，选择预留菜单，即可看到保留二级子域名项，填写其中的地区、名称、描述（可不填）项，然后点击保留按钮，操作步骤图如下：

列表中显示了一条已保留的二级子域名记录：

地区：显示为China Top。
二级域名：显示为chatwoot01。

注：二级域名是唯一的，每个账号都不相同，请以自己设置的二级域名保留的为主

接着，回到cpolar WebUI的后台页面，进入侧边菜单栏的隧道管理下的隧道列表，可以看到名为Chatwoot的隧道：

点击编辑按钮进入编辑页面，修改域名类型为二级子域名，然后填写前面配置好的子域名，点击更新按钮：

接着来到状态菜单下的在线隧道列表可以看到隧道名称为Chatwoot的公网地址已经变更为二级子域名+固定域名主体及后缀的形式了：

这里以https访问测试一下：

访问成功，接着进行登录测试一下：

可以看到，成功登录！现在你已经拥有了一个永久有效的固定公网地址，无论何时何地，只要访问这个地址就能打开你的 Chatwoot 客服后台。

到这里，Chatwoot 的部署和公网穿透就全部完成了。但这只是客服后台——真正让用户能够在你的网站上发起咨询，还需要把 Chatwoot 的聊天窗口小组件嵌入到网页中。

Chatwoot会为网站渠道生成一段JavaScript SDK代码。把这段脚本插入目标网页以后，页面右下角会出现聊天入口，用户发出的消息会进入对应的Chatwoot收件箱。

下面继续获取这段代码，并把它接进现有网页。

5 将Chatwoot接入你的网站

5.1 配置生成 JavaScript SDK

首先，点击设置菜单下的收件箱菜单，然后点击页面上的添加收件箱按钮：

在选择频道部分，点击网站图标：

接着，填写你要设置的名称，和目标网站的域名，例如，如下为我穿透的本地nginx跑的一个默认页面：

如下图填写：

接着，点击创建收件箱，来到客服代理页面，选择一个客服代理（默认为你注册的账号），然后点击添加：

点击添加按钮后，即可看到如下页面：

如上图，输出了一段 JavaScript代码，我们需要修改启动的BASE_URL为我们当前chatwoot的域名如下：

<script>
  (function(d,t) {
    var BASE_URL="https://chatwoot01.cpolar.top";
    var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
    g.src=BASE_URL+"/packs/js/sdk.js";
    g.async = true;
    s.parentNode.insertBefore(g,s);
    g.onload=function(){
      window.chatwootSDK.run({
        websiteToken: '3EoaEfw7TkcDimTNEWi9T5t7',
        baseUrl: BASE_URL
      })
    }
  })(document,"script");
</script>

将域名改为我们配置的二级子域名的域名即可。更建议在部署时，直接填写域名，后续将不用直接修改，即该部署部分：