网站怎么加在线客服？3 种安装方式与上线前清单

给网站加在线客服有三种方式：把客服脚本粘贴进网站模板、在建站平台装插件或应用、通过标签管理器部署。装上只要几分钟，客服有没有用，取决于装好之后的事：谁来接、下班后怎么办、能不能看出每个对话来自哪个页面、哪个渠道。这篇讲清三种装法、上线前要定的五件事，以及首周该盯哪几个数。

给网站加在线客服的三种方式

给网站加在线客服，常见的方式有三种：把客服服务商的脚本粘贴进网站模板、在建站平台里安装服务商的插件或应用、通过标签管理器（如 Google Tag Manager）部署。三种方式装出来的都是同一个聊天气泡，区别在于谁能装、谁来维护、容易在哪里出问题。

按网站的搭建方式和改动权限来选：

• 自己写代码的网站（纯 HTML、前端框架、开发维护的模板）：直接贴脚本；已经部署了标签管理器的，走标签管理器。
• WordPress、Shopify、Wix、Squarespace 这类建站平台：先在平台的插件 / 应用市场里找服务商的官方扩展，不用碰代码。
• 没有开发权限的市场团队，站点已装标签管理器：在标签管理器里部署，改动有版本记录、可回滚。

下方表格对比了三种方式。有一点三种方式都替你决定不了：谁来接这些对话。这是运营问题，见上线前检查清单。

三种方式加载的是同一个组件，区别在谁来装、谁来维护。

方式一：粘贴客服脚本

各家在线客服的安装核心都一样：一段加载聊天组件的 JavaScript 代码。步骤大同小异：

1. 注册客服服务商的账号，绑定你的网站域名。
2. 在服务商后台找到安装代码，一般在设置、安装或渠道入口。
3. 复制这段代码。
4. 粘贴到网站的公共模板里——也就是包住每个页面的那个文件——放在 </body> 闭合标签之前。自建网站通常是 index.html、布局文件或 footer.php；单页应用要加在应用外壳里，保证每个路由都加载。
5. 保存、发布，用无痕窗口打开网站，几秒内应该能看到气泡。

为什么放在 </body> 前：页面内容先渲染，客服脚本后加载，不挡正文。多数服务商的脚本还带 async 异步加载，目的相同。

气泡没出现，按顺序查三件事：代码是否真的在你测的页面上（查看网页源代码，搜服务商域名）、缓存或 CDN 是否还在发旧模板、有没有内容安全策略（CSP）拦截脚本。CSP 见检查清单；TapCub 用户的气泡显示问题见聊天气泡不显示。

方式二：用建站平台的插件或应用

网站跑在建站平台上，先翻平台的官方扩展目录，再考虑动代码。

WordPress。 在插件目录搜你的客服服务商，安装并启用插件，再按提示登录或填 API key 关联账号，插件会替你把代码注入每个页面。安装和启用的标准流程见 WordPress 官方文档《管理插件》。优先选用走 WordPress 标准脚本加载机制的插件，换主题也不容易失效。

Shopify。 从 Shopify 应用商店安装服务商的应用，然后在主题里启用应用嵌入：Online Store → Themes → Customize → App embeds，打开聊天组件开关并保存。机制见 Shopify 官方文档《主题应用扩展》。注意：应用嵌入跟着主题走，换主题或复制主题后要重新打开。

Wix、Squarespace 这类建站工具。 在平台应用市场找服务商，或用平台的「嵌入代码」功能把脚本贴到全站。取舍都一样：平台路线快、不用开发，但集成是否持续更新要看服务商。

方式三：通过标签管理器部署

网站已经装了 Google Tag Manager 或其他标签管理器，可以完全不改网站代码：

1. 在 GTM 里新建代码（Tag），类型选 Custom HTML，见 Google 官方《Tag Manager 开发者指南》。
2. 把客服服务商的安装代码粘贴进 HTML 输入框。
3. 触发器选 All Pages，或只选要显示客服的页面。
4. 用预览模式确认代码触发、气泡出现，再发布容器版本。

这条路线适合没有开发权限、自己就能上线改动的市场团队，而且自带版本历史和回滚。两个提醒：GTM 里部署了就别再在模板里贴一份，否则组件会加载两次；网站如果发了 Content-Security-Policy 响应头，标签管理器的域名也要加进允许列表。

上线前检查清单

装气泡只要几分钟，接得住才是要花心思的地方。上线前把这五件事定下来：

1. 谁来接、什么时候接。 明确接对话的人和工具——服务商工作台、共享收件箱还是手机端。没人接的客服按钮比没有更糟：访客发了消息却石沉大海，多半不会再来。暂时排不出人手，就先只开离线留言。

2. 工作时间和离线兜底。 在客服设置里定好工作时间，注意时区。非工作时间访客应该能留下邮箱和问题，而不是碰壁；并且要有人负责在下一个工作日回复这些留言。

3. 显示在哪些页面、手机端什么样。 定好气泡的显示范围。疑问多的页面——定价、产品、联系、结账——是常见起点；有人盯着的话全站显示也可以。在手机上实测：气泡不能挡住主按钮或 Cookie 提示，也有团队干脆在小屏幕上隐藏气泡。

4. 隐私与 CSP。 客服会收集个人数据：对话内容、通常还有邮箱，有时带浏览上下文。隐私政策里要写明客服服务商和收集的内容，并确认你的同意机制是否需要覆盖它——要求取决于配置和当地法律。网站用了 Content-Security-Policy 响应头的，把服务商的脚本和连接域名加进策略，指令含义见 MDN 的 CSP 指南。「明明装好了气泡却不出现」，脚本被 CSP 拦截是常见原因之一。

5. 页面性能。 聊天组件是第三方脚本，会增加请求；如果加载了阻塞渲染的资源，可能影响 LCP 等加载指标，见 web.dev 的 LCP 优化指南。选异步加载脚本的服务商，安装前后用同一工具测关键页面，没必要的页面就别挂组件。

上线首周看哪几个数

头一周每天盯几个小数就够了，别铺一张没人看的大盘：

• 开聊率 = 开聊访客 ÷ 全部访客，看气泡有没有被注意到。
• 人工首响时长：多久有真人回复，以及达到目标（比如 2 分钟）的会话占比。
• 离线留言：数量，以及下一个工作日内被回复的比例。
• 转化对比：聊过的访客 vs 没聊过的访客，目标完成各是多少。

示例数据：某网站上线首周 1,200 名访客。96 人开聊（96 ÷ 1,200 = 8.0% 开聊率）；96 次会话里 61 次在 2 分钟内得到人工回复（61 ÷ 96 = 63.5%）；非工作时间收到 24 条离线留言，21 条在下一个工作日回复（21 ÷ 24 = 87.5%）。聊过的 96 人中 12 人完成目标（12 ÷ 96 = 12.5%），没聊过的 1,104 人中 26 人完成（26 ÷ 1,104 ≈ 2.4%）。

最后这组对比要带着两个提醒读。它是观察性对比，不是对照实验：主动开聊的访客往往本来就接近决策，差距会高估客服本身的贡献。一周的样本也小，把这些数当作要改进的基线，不是结论。客服与转化的证据到底支持什么，见在线客服能提升转化吗；如果目标是线索而不是成交，同样的周复盘适用于留下了邮箱的对话，见用在线客服获取线索。

app.tapcub.com

上线首周 · 示例站点

1,200 名访客

开聊96

2 分钟内人工回复61

离线留言24

开聊且转化12

示例数据

在 TapCub 里怎么加

TapCub 的客服和统计用的是同一段脚本。和单独的客服插件比，有两点不同：不用再装任何东西；每个对话进来时，已经和这位访客的统计数据连在一起。

1. 打开开关。 网站已经装了 TapCub 统计脚本，就到 客服 › 聊天设置 › 外观与品牌，打开「启用在线客服」并保存。加载了脚本的页面都会出现聊天气泡，不改模板，也不用标签管理器。还没装 TapCub 的话，从 客服 › 聊天设置 › 安装 复制代码，按方法一粘贴；这一段代码同时管统计和客服。详细步骤见开启在线客服。
2. 设好工作时间和兜底。 在 客服 › 聊天设置 › 工作时间 按时区设工作时间。不在工作时间或没人在线时，访客可以留邮箱和问题，汇总在 客服 › 聊天设置 › 离线留言，状态分新、已回复、已关闭。开了 AI 回复的话，先由知识库回答，答不了才出留言表单。
3. 看一眼手机端。 外观里的「手机端隐藏气泡」会在窗口窄于 640 像素或手机浏览器上隐藏气泡。气泡挡住结账按钮时可以用。
4. 带着上下文回复。 在 客服 › 客服工作台，右侧显示访客当前所在的页面、从哪里来、最近两天看过什么；点「在统计中查看」能打开完整的访客档案。客服从访客看过的内容开始聊，不用先问一圈。
5. 首周数据不用导出。 客服 › 客服报表 有会话数、首次响应（只算人工回复）和解决率。客服 › 客服报表 › 转化归因 用和统计相同的访客 ID，直接算出上面首周一节里「聊过 vs 没聊过」的对比，还列出对话是从哪些页面开始的。聊过的访客少于 30 人时，报表会提示样本太少，就是上文那条提醒。

不在自己网站上也想接待？独立聊天页链接可以放在邮件签名、二维码和社交主页里，见独立聊天链接。概念本身见在线客服。

FAQ

怎么用 HTML 加一个聊天按钮？

从客服服务商后台复制 JavaScript 安装代码，粘贴到网站公共模板的 </body> 闭合标签之前，刷新页面即可。按钮和聊天窗口都由这段代码生成，不用自己写按钮。建站平台上的网站，装服务商的插件或应用就行。

客服气泡可以在每个页面都显示吗？

可以。全站脚本或插件会让气泡出现在所有页面，多数服务商也支持只在指定页面显示。常见做法是先上定价、产品、联系这类疑问多的页面，有人稳定接手后再扩大范围。无论怎么选，手机上别让气泡挡住关键按钮。

客服组件装好了为什么不显示？

按顺序查：代码是否真的在页面上（查看源代码）；缓存或 CDN 是否还在发旧版本；Content-Security-Policy 响应头有没有拦截服务商域名；服务商自己的可见性设置——手机端规则、页面规则、离线状态——有没有把组件藏起来。TapCub 用户照聊天气泡不显示排查。

怎么设置客服的在线时间？

在客服设置里定工作时间，注意选团队所在的时区。非工作时间组件应切到离线表单，收集访客邮箱和问题，并有人负责下一个工作日回复。开了 AI 接待的，先让知识库回答，答不了再出留言表单兜底。

在线客服会拖慢网站吗？

客服是第三方脚本，有可能——主要是脚本同步加载、或组件过早注入大资源时。选异步加载的组件，安装前后用同一工具测关键页面，用不到的页面不挂。加载方式正确的客服脚本不会挡住正文渲染。

Sources

• Google. Tag Manager developer guide — Custom HTML 代码。2026-11-14 核对。
• WordPress.org. Managing Plugins. 2026-11-14 核对。
• Shopify. About theme app extensions. 2026-11-14 核对。
• MDN. Content Security Policy (CSP). 2026-11-14 核对。
• web.dev. Optimize Largest Contentful Paint. 2026-11-14 核对。