仅需几行代码！把最强开源客服 SDK 塞进你的网页，体验真的绝了！

前言

你是不是也遇到过这种情况：网站刚上线，想加个在线客服功能方便用户咨询，结果一搜索全是要付费的 SaaS 平台？Intercom、Zendesk、美洽、智齿…随便一个都是每月几百上千的订阅费，免费版本功能阉割到只能看不能用，想要多渠道接入、想要数据报表、想要 AI 客服？对不起，请升级企业版。更要命的是，所有对话记录都存在人家服务器上，哪天平台倒闭或者涨价，你只能乖乖接受。

但转折点就在这里——有一款叫 Chatwoot 的开源全渠道客服系统火了！GitHub 上 24K+ Star，被全球无数开发者称为”最强 Intercom 开源替代品”。它不仅完全免费、功能强大（网页聊天、WhatsApp、Facebook、Instagram、邮件、Telegram 全渠道统一管理），而且部署简单到令人惊讶——Docker 一条命令启动，前端集成只需复制粘贴 几行 JavaScript 代码，就能在你的网站上拥有一个顶级的客服聊天窗口。数据完全存储在自己服务器上，想怎么用就怎么用！

接下来，本文将手把手教你用 Docker 在本地快速部署 Chatwoot，然后演示如何用 几行 JavaScript 代码 把它集成到任意网页。最后，我们还会通过 cpolar 内网穿透实现公网访问，并配置固定二级子域名，打造一个”局域网部署、全球可用”的私有化客服中心。无论你是个人博客、企业官网、还是电商平台，从此都能用零成本、完全自主的客服系统接待全球用户！

1 什么是Chatwoot?

Header light mode

Chatwoot 是一款基于 Ruby on Rails + Vue.js 开发的开源全渠道客服系统。你可以把它理解为开源版的 Intercom 或 Zendesk——那些大厂花大价钱购买的企业级客服平台，现在你可以免费部署在自己的服务器上了。

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

它能为你做什么？

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

更重要的是，所有这些功能都是完全免费的，不像那些 SaaS 平台把核心功能锁在付费版。你只需要有一台服务器（甚至是家里的 NAS），就能拥有一套企业级的客服系统！

2 一键部署Chatwoot

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

为了让部署过程简单到极致，我特地编写了一个自动化部署脚本。你只需要复制一行命令，粘贴到终端回车，脚本就会自动完成所有配置工作——下载镜像、创建数据库、配置环境变量、启动服务…全程无需太多的手动干预，真正做到一键部署！

2.1 连接 SSH 终端

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

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

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

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

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

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

image-20260116181936035

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

sudo -i

image-20260116183450018

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

如下图所示：

image-20260201191026426

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

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

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

image-20260201202328797

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

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

https://mail.163.com/

image-20260201202644836

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

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

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

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

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

2.3 基础配置Chatwoot

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

http://192.168.50.99:4000

image-20260201204015882

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

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

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

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

基础设置就做好啦！

3 下载安装cpolar

由于 Chatwoot 目前部署在你的局域网内，只能通过内网 IP 地址访问。这意味着只有连接同一 Wi-Fi 的设备才能使用你的客服系统——手机一旦切换到 4G/5G 网络，或者朋友想通过外网访问你的网站咨询问题，都会直接连接失败。更关键的是，当你把嵌入代码部署到公网服务器上的网页时，用户根本无法与你的客服系统建立连接。

要让 Chatwoot 真正发挥作用，你需要让它能够被公网访问。传统方法需要购买云服务器、配置公网 IP、申请域名备案…一套流程下来不仅费钱费时，还容易踩坑。但借助 cpolar 内网穿透，你可以零成本、几分钟内就把本地的 Chatwoot 服务映射到公网，生成一个任何人都能访问的 HTTPS 地址。

接下来，我们就来配置 cpolar，让你的私有客服系统走向全球！

3.1 什么是cpolar?

image-20250910114418412

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

3.2 安装cpolar

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

image-20260122161449695

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

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

image-20260118213804470

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

sudo systemctl status cpolar

image-20260118213830382

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

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

http://192.168.50.99:9200/

image-20260118213922836

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

4 穿透Chatwoot以实现公网访问

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

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

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

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

隧道列表

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

image-20260201205544373

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

image-20260201205629006

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

image-20260201205927913

可以发现，成功访问到啦！不过正如前面提到的，随机域名每 24 小时会自动更换。这对于临时测试来说问题不大，但如果你想把 Chatwoot 嵌入到正式网站中，每天都要更新嵌入代码里的地址，那简直是噩梦。而且随机域名看起来也不够专业，类似 3a7x9k.cpolar.top 这种地址，用户一看就知道是临时链接。

所以，如果你是认真想用 Chatwoot 做客服系统的，强烈建议配置一个固定的二级子域名。这样不仅地址永久不变，还能自定义成类似 chatwoot.cpolar.cn 这种简洁好记的格式，嵌入网站后也显得更加专业。

接下来，我们就来配置固定二级子域名，后续的网站集成也将基于这个固定地址进行！

4.2 固定二级子域名方式

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

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

https://dashboard.cpolar.com/reserved

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

image-20260201210741799

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

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

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

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

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

image-20260201210929420

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

image-20260201211006742

这里以https访问测试一下：

image-20260201212406717

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

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

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

好消息是，Chatwoot 提供了极简的 JavaScript SDK，只需要复制几行代码粘贴到你的网页里，一个漂亮的客服聊天气泡就会出现在页面右下角。用户点击就能直接发起对话，消息会实时推送到你的 Chatwoot 后台——整个过程不超过 5 分钟！

接下来，我们就来演示如何获取嵌入代码，并把它集成到任意网站中。

5 将Chatwoot接入你的网站

5.1 配置生成 JavaScript SDK

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

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

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

image-20260203162148870

如下图填写：
image-20260203162317267

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

image-20260203162414673

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

如上图，输出了一段 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>

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

5.2 将 JavaScript SDK接入网站

来到你的目标网站入口页面，在body标签前将SDK代码插入保存即可，如下图：
image-20260203163701640

添加后，回到你的网站上，使用ctrl + f5强制刷新页面，然后即可看到右下角多出了一个小图标：

image-20260203163827092

点击图标即可查看到刚才配置的欢迎信息了：
image-20260203163916358

点击开始会话，测试发送消息，查看后台是否能够接收到：

image-20260203164127012

回到后台，点击我的收件箱，会话，即可查看到会话列表了：
image-20260203164225594

后台回复消息，然后回到前台查看，是否能接收到消息：
image-20260203164329852

可以看到，成功的显示了回复的消息！

6 客服坐席添加

业务量大了，一个人聊不过来怎么办？Chatwoot 天生就是为团队设计的。你可以轻松添加多个客服坐席，让团队成员共同协作处理客户消息。

点击左侧菜单底部的 设置（齿轮图标），选择 客服代理 标签页，然后点击右上角的 添加客服 按钮。

image-20260203165258619

在弹出的窗口中填写新客服的信息：

  • 名称：填写同事的昵称或真名。
  • 角色：
    • 客服：只能查看和回复分配给他们的对话，适合普通客服人员。
    • 管理员：拥有所有权限，可以配置收件箱、管理团队和系统设置。
  • 电子邮箱：输入要加入的客服的邮箱地址，系统会发送邀请邮件。

image-20260203165500067

点击 添加代理 后，新成员登录邮箱就可以收到邀请邮箱啦：
image-20260203165636378

点击确认账号按钮，然后就会跳转新的页面，设置你的密码：
image-20260203165713537

设置完成后，即可进行登录啦！在收件箱页面添加或者编辑网站：
image-20260203170404122将新的客服添加进去，即可看到新的客服坐席啦：

image-20260203170617055

这样，你的客服团队就组建完成了！当海量咨询涌入时，大家可以协同作战，支持消息转接、内部备注讨论，服务的响应速度和专业度将直接提升一个台阶！

总结

本教程带你从零搭建了一个功能强大的 Chatwoot 客服系统，利用 Docker 实现了快速私有化部署，并通过 cpolar 内网穿透 为其配置了固定的公网地址，最后仅用几行代码就将其接入了现有网页。

  • 完全免费：部署在自有设备上，没有任何订阅费用，数据安全可控。
  • 配置简单：借助一键脚本和 cpolar，复杂的网络配置变得轻而易举。
  • 体验专业：固定二级子域名配合官方 SDK，给用户提供如大厂般的咨询体验。

现在，你的网站已经拥有了一个全天候在线的智能客服。无论是解答用户疑问，还是收集客户反馈，它都能帮你轻松搞定。如果想进一步提升效率，还可以探索 Chatwoot 的自动回复和聊天机器人功能，让服务更上一层楼！

感谢您阅读本篇文章，有任何问题欢迎留言交流。 cpolar官网-安全的内网穿透工具 | 无需公网ip | 远程访问 | 搭建网站

Share:

鸽子

鸽子

我是鸽子，是这个网站的文章编辑之一！喜欢研究各种有趣的开源项目。希望大家喜欢我的文章！

发表回复

目录

On Key

推荐文章