SealReply
登录 免费试用 进入工作台

网站怎么添加在线客服：HTML、WordPress、Shopify 通用教程

只要把一行代码贴到网站的公共页脚里，每个页面就都有了在线客服。下面按普通 HTML、WordPress、Shopify 分别讲怎么贴，以及装好后怎么确认能用。

作者：Admin

给网站加在线客服，只需要一行代码：把一段很小的脚本贴到页面 </body> 前面，每个页面右下角就会出现聊天按钮。注册、贴代码、验证域名、测试，大多数网站（包括 WordPress 和 Shopify 独立站）5 分钟左右就能做完。

下面以 SealReply 为例一步步讲。其他在线客服工具的思路也基本一样。

准备

  • 能修改网站：能改 HTML 文件，或者能登录 WordPress / Shopify 后台。
  • 一个 SealReply 免费账号。免费版没有使用期限，可以先装好试用，不用付款。
  • 5 分钟左右。如果用 DNS 验证域名，记录生效可能还要多等几分钟。

第 1 步：添加你的网站

注册后，工作台会打开一个简短的“设置在线客服”引导。

  1. 在“你的网站”里，“站点名称”填一个你自己认得出的名字，例如“我的小店”。
  2. “网站地址”填访客访问的网址，例如 shop.example.com。
  3. 点“继续”。

聊天插件只会在这里填的域名（以及它的子域名）上显示。别人就算把你的代码复制到他的网站上，也不会出现聊天窗口。

设置在线客服引导的第 1 步 你的网站, 已填好站点名称和网站地址

第 2 步：复制嵌入代码

下一步“安装插件”会显示你的代码，大概是这样：

<script src="https://cdn.sealreply.com/widget.js" data-site-key="sk_…" async></script>

data-site-key 是你这个站点专属的。点“复制”。

这段脚本约 38 KB，异步加载，不阻塞页面显示。如果你希望页面其他内容都加载完再加载聊天插件，勾选“页面加载完再加载聊天插件”，复制那一版代码。

第 3 步：把代码贴到网站上

按你的建站平台选一种。原则都一样：只贴一次，贴在所有页面共用的地方，放在 </body> 前面。

普通 HTML，或带“页脚代码”设置的建站工具

  1. 打开网站页脚所在的模板或文件。纯静态网站就是每个 .html 页面；大多数建站工具有“自定义代码”或“页脚代码”设置。
  2. 把代码贴在 </body> 前面。
  3. 发布。

WordPress

有两种做法。第一种更稳，主题升级不会把代码冲掉。

方法 A：用插件加代码（推荐）

  1. 在 WordPress 后台安装一个可以往页脚加代码的插件，例如 WPCode。
  2. 新建一段页脚代码，贴进去，保存。

方法 B：直接改主题

  1. 打开“外观 → 主题文件编辑器”，找到 footer.php。
  2. 把代码贴在 </body> 前面，点“更新文件”。

直接改主题的话请用子主题，否则主题一升级代码就没了。

Shopify 独立站

  1. 在 Shopify 后台进入“在线商店 → 模板”。
  2. 在当前模板旁边点“…” → “编辑代码”。
  3. 打开 layout/theme.liquid。
  4. 把代码贴在 </body> 前面，点“保存”。

贴好后，theme.liquid 的结尾是这样的：

    …
    <script src="https://cdn.sealreply.com/widget.js" data-site-key="sk_…" async></script>
  </body>
</html>

第 4 步：验证域名

为了防止有人把聊天插件放到不属于自己的网站上，在你证明域名是你的之前，插件不会显示。只需要验证第一个域名，做一次就行。

在“站点 → 你的站点 → 域名验证”里任选一种：

  • 添加 DNS TXT 记录：把页面上的名称和值填到域名服务商的 DNS 设置里，几分钟后生效。
  • 上传一个文件：把一个小文本文件放到页面上显示的地址。如果你能往网站上传文件，这种通常更快。

然后点“立即检查”。

第 5 步：给自己发一条测试消息

打开你的网站。引导页每隔几秒自动检查一次，看到插件后会显示“插件已经在你的网站上加载”。

接着做一次测试对话：

  1. 点“打开我的网站”，聊天窗口会自动打开。
  2. 假装自己是访客，发一条消息。
  3. 消息出现后，在工作台里回复。

这样两边你都看过了：访客看到什么，你在哪里回复。测试对话不计入每月会话数，也不进报表。

插件没出现怎么办

引导页会告诉你它检测到了什么。最常见的几种：

工作台提示 怎么办
还没有检测到插件 你打开的页面上没有代码。确认已经保存并发布，并清一下缓存插件或 CDN 的缓存。
请先验证域名 完成第 4 步。DNS 记录可能要几分钟才生效，稍后再点“立即检查”。
插件加载在了其他域名上 你打开的网址没有添加过（比如带不带 www.，或者测试环境的地址）。在“修改允许域名”里加上。

如果你的网站设置了内容安全策略（CSP），还需要放行插件用到的地址，清单见插件文档。

装好之后

聊天已经能用了。再做三件事，效果会好很多：

  1. 让聊天窗口和网站风格一致：上传 Logo、改主题色和欢迎语，旁边有实时预览。
  2. 在手机上接收新咨询：打开推送通知，关掉工作台也能收到提醒。锁屏只显示来自哪个站点、哪个页面，不显示访客说了什么。
  3. 设置工作时间：工作时间外，访客会看到留言表单，而不是一直等一个不会来的回复。

延伸阅读：人不在电脑前，怎么不漏客户。