网站怎么添加在线客服：贴一段代码就能接待

作者：周屿｜更新于 2026-10-10

网站添加在线客服，核心动作只有一个：把后台网页渠道生成的那段代码，放进网站每一页的 </body> 之前，再重新发布。发布后页面右下角会多出一个聊天按钮，访客点开说话，客服在工作台里就接得到。

开工前确认登录用的是管理员级别的账号，并且你能动网站的页面模板；动不了的话，至少找得到替你维护网站的人。

第 1 步：新建一个网页渠道

演示用的是合从客服的工作台。管理员登录后，进「设置 > 渠道管理」，点「接入新渠道」，类型挑「网页接入」。名称随你定，挑一个自己一眼能认出来的，例如「官网在线客服」。填完点创建。

团队要是第一次建渠道，创建页上会弹出提示框，列明工作台和手机 APP 最低要到哪个版本，偏旧的按提示升级。

这一步常见的走偏：

• 拿普通客服账号进来，菜单里压根没有渠道管理，得换成管理员。
• 手头有几个网站，就分几次建，一站一个网页渠道。各渠道的外观、欢迎语、接待分配单独设置，消息全汇到同一个工作台。渠道总数有上限，网页接入和对话链接每建一个都占一个名额，能建多少看所用版本。
• 你其实没有网站，只想要一个能发给客户、点开就聊的地址，那该建对话链接，本文后面的步骤用不上。

第 2 步：在「安装代码」页复制代码

创建完成，页面自己跳进「安装代码」。这个渠道的编号已经填在代码里，原样拿走，点「复制代码」。

此时屏幕中间是那段代码，下方有一张「安装状态」卡片，右侧能实时预览聊天窗。这页先留着，第 4 步要回来看卡片。

容易走偏的是复制环节：开头或结尾漏掉几个字符，代码在网站上跑起来会被拒，浏览器控制台出现 Request denied。全选后再复制更稳。

第 3 步：把网站添加在线客服的代码放进公共模板

把代码放到 </body> 标签前面，存盘。位置选全站共用的底部模板，改一处，所有页面都带上。按建站方式找文件：

建站方式	代码放在
WordPress	外观 > 主题文件编辑器，打开 footer.php；也可装一个能插入代码的插件
Shopify	在线商店 > 模板 > 编辑代码，打开 theme.liquid
自家团队开发	全站共用的那份底部模板文件

网站由别人维护的话，把代码转给开发，交代一句「贴到每个页面 </body> 之前」。前端用 React、Vue、Next.js 的，用的也是这同一段代码：合从眼下只提供 script 标签这一种接法，没有 npm 包，代码要放到只在浏览器里运行的位置。

走偏多出在选文件上：代码只进了某几个页面自己的文件，发布后一部分页面有按钮、一部分没有。配图版的操作说明在文档站 网页接入：对接到网站。

第 4 步：重新发布，切回去看卡片

模板改完，网站要重新发布一次，改动才会上线。之后不必盯着自己的网站一遍遍刷新，切回第 2 步那页看「安装状态」卡片。

还没有访问进来时，卡片上写着「等待你的网站发来第一次访问」。只要有人打开了网站，几秒钟后它自己变成「已安装」，并附上最近一次访问的时间；点开，能看到访问来自哪些域名。

卡片迟迟不变，回头核对：代码到底有没有贴进去？模板改过以后，网站发布了没有？

第 5 步：用访客身份发一条消息

卡片显示已安装，打开自己的网站。屏幕一角出现聊天按钮，点开弹出聊天窗，迎面是一句欢迎语。

随便打一句话发出去，再切到工作台的对话列表，刚才那条对话应当已经在列。网站这头发得出、工作台那头收得到，安装就算完成。客服侧同时多出「实时访客」：访客还没说话，就能看到此刻有谁在站上、停在哪一页、从什么地方进来。

图中标 4 的那排快捷按钮，例如「查订单」「怎么退换货」，访客点哪个，对应的问题就直接发出去。渠道新建时已经带着一套默认外观和一句欢迎语，代码贴上就能接待。按钮样式、窗口配色、欢迎语、快捷按钮，往后都回工作台调整，存好后访客重新打开页面就是新样子，网站这边的代码不必再改。

再顺带看看原网站有没有受影响。接入代码走异步加载，网站本身内容的加载次序不会被它卡住，页面上也不用给它留空位。聊天窗在一个独立隔离的区域（Shadow DOM）里渲染，自身样式漏不出来，网站的样式通常也渗不进去。要留意的只有两类规则：针对 * 写的全局样式，和对所有元素加 !important 的样式重置，它们可能影响到聊天窗，碰上了请开发把这几条找出来看看。

第 6 步：按钮没出来，拿现象对照

卡片一直不亮，或者网站上找不到按钮，先拿你看到的现象对一下：

你看到的	大概率的原因
每一页都没有按钮	代码没贴进去，或者贴了但网站没有重新发布
有的页面有，有的页面没有	代码放进了个别页面，全站公共模板里没有
控制台报 Request denied	渠道设了授权域名而你的网站域名不在其中；也可能代码复制得不完整
控制台报 CSP 违规	网站有内容安全策略，没给合从的域名放行，浏览器把聊天窗挡掉了
只有少数访客看不到	对方开了广告屏蔽插件，或者在用 IE 这类很老的浏览器

表里放不下的还有三种情形。

浏览器版本太低。这时聊天窗完全不露面，页面其余内容正常，乍看像代码装错了。请访客换一个浏览器打开同一个网址，出来了，问题就在浏览器。IE 各个版本都打不开，需要换成 Chrome 或 Edge。

窗口打得开，客服回的话收不到。有内容安全策略的网站，给合从域名放行要同时写 https 和 wss；只写了 https 就会这样，补上 wss 那一条。

手机上按钮、窗口都缩得很小。多半是页面没声明移动端视口，手机浏览器把整页按电脑网页缩着显示。在 <head> 里加上这一行：

<meta name="viewport" content="width=device-width, initial-scale=1" />

加上以后，网站本身在手机上的排版也跟着恢复。手机上干脆看不见的，同样先换浏览器试同一个网址；换了还不行，看看这个页面是不是手机端另用一套模板，那套模板里贴没贴代码。

网站以后迁服务器，旧代码直接放进新服务器上的模板，渠道不用重建：代码认的是渠道编号，和哪台服务器无关。改了域名，要进渠道的「安全与隐私」查一下：以前填过授权域名的，把新域名补进去，不然聊天窗出不来；从没填过的，不用管。其他现象可以查 网页接入问题排查。

第 7 步（可选）：交给开发扩展代码

只想在网站上摆一个咨询入口，到第 6 步已经收工。下面这些要技术人员在同一段接入代码上补写几行：

• 认出来的是谁。网站本身有登录的，把客户 ID、姓名、会员等级等资料传进来，客服接待时面对的是一份带资料的客户档案。同一位客户换了设备再来，之前的对话也接得上。
• 用网站自己的按钮唤起聊天窗，例如商品详情页上的「咨询客服」。合从自带的按钮可以藏起来，入口全换成自己的。沿这条路再往前，还可以让访客把正在浏览的商品或订单发给客服。
• 中英文双语站。每个语言版本的页面，在接入代码上带上对应的语言标记，例如英文页带 en，聊天窗按钮和提示文字随之变成英文；没带标记的，按访客浏览器的语言显示。欢迎语这类文案得先在渠道的「多语言」里添加英文，再按语言分别填写，没填的语言显示渠道默认语言。两个站想各用一套欢迎语和接待分配，就各建一个渠道。

开发可以从 接入代码与配置项 开始读。

装好之后，网站这边就不用再动了

能改网站模板的话，前五步只做一次。往后改外观、换欢迎语都在工作台完成，接待规则和 AI 机器人也在这里接着配，网站代码不再碰。判断装没装好看两处：卡片显示已安装，网站上发出的消息落进了工作台对话列表。识别登录客户、换成自有按钮这类扩展，等日常接待顺了再排给开发。

如果客户还会从公众号、短信、包裹卡上找过来，接着看 在线客服系统怎么接入，那篇按客户来源讲了几种渠道的取舍。合从客服提供 7 天免费体验，到 https://aihecong.com 注册，建好网页渠道，用你自己的网站把这几步照做一遍。