WordPress 网站怎么加在线客服

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

WordPress在线客服不依赖哪个专用插件：从客服工作台复制一段接入代码，放到全站每个页面 </body> 的前面，网站右下角就会多出聊天按钮，访客发的消息你在工作台里收得到。后台能登录就能做完，用不着写代码。

开工前手边要有客服系统的管理员账号，以及 WordPress 后台的登录权限。网站当初是外包公司搭的、你只拿到了后台账号，这样也够。

第 1 步：在工作台建网页渠道，复制代码

这里拿合从客服做演示。它把网站、微信、APP 等渠道进来的咨询收进同一个客服工作台；用的若是别家产品，后面往 WordPress 里放代码的几步照样适用。

用管理员身份登录工作台，依次点「设置 > 渠道管理」「接入新渠道」，类型挑「网页接入」，起一个以后认得出的名字，像「官网客服」这样，再创建渠道。如果这是团队建的头一个渠道，会先弹出一个关于客服端版本要求的说明，点「我知道了」往下走。

做完这几下，界面会直接落到「安装代码」页。代码框右上角有「复制代码」，点它；渠道标识已经写在代码里，拿走原样用。代码框下面那张「安装状态」卡片，这时写着「等待你的网站发来第一次访问」。

这一步常见的卡点有两处。一是左侧压根没有渠道管理，多半因为登的是普通客服账号，这类账号看不到它。二是中英文双语站：代码上方有个「站点语言」，留在自动识别，窗口语言随访客浏览器切换；要是中文页、英文页各用一套模板，也可以给两套模板分别放一份带相应 data-language 的代码。

建渠道的每个选项，文档站把网页客服装到网站上一页讲全了。

第 2 步：看主题类型，选放代码的位置

WordPress 里能放这段代码的地方有两处：当前主题的 footer.php，或者一个专门往页脚插代码的插件。先花半分钟看看自己的站，再挑。

footer.php 适合经典主题、站点有人长期维护、或者早就建了子主题的情况。它的毛病是改动挂在主题文件上：若改的是父主题，主题一升级，这个文件被整份替换，代码随之消失；贴的位置不对还可能让页面报错、版面走样，所以动之前先把原文件存一份。

插件更适合区块主题、不愿意碰主题文件、或者站是外包做的情况。代码保存在插件里，换主题、升级主题都动不到它，万一出问题，删掉那段脚本就回到原样。

自己判断不了，就走插件。另外有三种情形，footer.php 从一开始就用不了，直接跳去插件：

• 用的是区块主题。WordPress 这几年自带的默认主题全是这一类，压根没有 footer.php，「外观」菜单里也不见主题文件编辑器，它被移到了「工具」底下。
• 主机商或者某个安全插件关掉了文件编辑功能，菜单里找不到那一项。此时要么用插件，要么请技术人员走 FTP。
• 没有子主题，又不想哪天升级时被冲掉。可以请维护网站的人先建好子主题，把代码放进子主题的 footer.php，父主题怎么升级都碰不到。

第 3 步：把代码放进 WordPress 页脚

选了 footer.php

打开后台「外观 > 主题文件编辑器」，先看右上角，选中的应当是正在用的那个主题。右侧文件列表里点「主题页脚（footer.php）」，拉到最底下找到 </body>，在它上面空一行，粘贴刚才复制的代码，再点「更新文件」。

改完后文件尾部应该是下面的样子，主题自带的部分原封不动：

  …主题原有的页脚内容…
  <?php wp_footer(); ?>

  <!-- 合从在线客服：放在 </body> 前 -->
  <script async src="https://assets.aihecong.com/sdk/hecong.js" data-channel-id="…"></script>
</body>
</html>

这个 script 标签带了 async，加载时不阻挡页面其余部分；聊天窗口画在一个与网站样式隔开的层里，原有版式不会被它打乱。

日后哪天按钮无缘无故没了，第一个要怀疑的就是：当初是不是直接改了父主题的 footer.php。主题升级会换掉整个文件，里面的代码一并清空。

选了插件

在「插件」页点顶上的添加新插件，用「header footer code」一类的词去搜，挑评分、安装量看着正常，最近也还在更新的那个，装上后启用。

它的设置页位置各家不一，多在「设置」或「外观」下面，也有自己在左侧菜单占一栏的。页面上一般排着页眉、正文开头、页脚几个框，把代码粘进标着「页脚」「Footer」或「Body 末尾」的那一个，保存。

粘错框是这里最常见的失误。粘进页眉（Header）那一栏，很多时候照样能跑，可接入代码的要求是放在 </body> 之前，还是按要求放页脚。另一种是用「自定义 HTML」小工具，或者在某篇文章里加代码块：结果按钮只出现在那一篇、或者带那个侧边栏的页面上，其他地方一概没有。

第 4 步：清缓存，用无痕窗口看按钮

站上装了缓存插件，先把缓存清掉，然后开一个无痕窗口访问网站。代码生效的话，你会在右下角看到聊天按钮。

点它，弹出聊天窗口。窗口里的欢迎语、输入框上方那排快捷按钮、品牌色，全部读自工作台里这个渠道的配置；之后想换，在工作台改了保存，WordPress 里的代码不必再动。

只看首页还不够，再随便点开一篇文章、一个分类页。首页有按钮而文章页没有，说明代码没进全站共用的模板，回第 3 步重新放。

第 5 步：回工作台核对 WordPress在线客服是否生效

不必靠肉眼一页页翻，回到工作台的「安装代码」页，看那张安装状态卡片就行。网站头一回加载这段代码，几秒钟里卡片会自己切到「已安装」，同时列出最近一次被访问的时间；把它展开，还能看到加载过代码的域名有哪些。

卡片迟迟不变，意味着线上还没跑起这段代码，照下一节逐项排查。卡片变了，就在聊天窗口里亲手发一句话，再去工作台对话列表里找它。找得到，从网站到工作台这条线就算打通了。

按钮迟迟不出现：按这个次序查

1. 缓存。缓存插件、主机自带的页面缓存、CDN，任何一层没刷新，访客拿到的都是旧页面。每次改动后统统清一遍。
2. 性能插件推迟了脚本。有的插件开着「延迟加载 JavaScript」，按钮得等访客滚动或点一下页面才冒出来，像是没装好。把 hecong.js 填进它的排除名单。
3. 代码只进了个别页面。回第 3 步，确认粘的是全站页脚。
4. 授权域名少写了一个。渠道「安全与隐私」里一旦填过授权域名，名单外的域名一律拒绝加载，浏览器控制台出现 Request denied。典型情况是只写了 example.com，访客打开的却是 www.example.com。新渠道默认不设限，没填过的跳过。
5. 渠道停用了。控制台报 Channel unavailable，去渠道基本信息里把状态开关拨回开启。
6. 站点设了内容安全策略（CSP）。要放行合从的域名，按钮才出得来，写法见文档站接入代码说明。

只在手机上碰到的一种情况：按钮和窗口缩得很小，点不准。这是页面没声明移动端视口，手机把它当电脑页面整体缩小了。往主题 <head> 里补一行 <meta name="viewport" content="width=device-width, initial-scale=1" />；若主题本来就有这一行，问题出在别处，继续往下排。

脚本 404 之类的报错，去网页接入问题排查对照处理。

主题摸不清，就用插件放代码

整个流程里，WordPress 这一侧只碰一次：代码放好，后面欢迎语、外观、接待分配都回工作台调。主题情况摸不清的，用插件放代码更稳，升级、换主题都不会把它弄丢。

插件市场里搜不到合从客服的专属插件，并不代表装不上。它的网页聊天窗口只有 script 标签一种接法，没有独立插件，也没有 npm 包，借通用的插代码插件放进页脚，正是 WordPress 上通行的做法。往后换主题或搬服务器，渠道不用重新建，把同一段代码贴到新环境的页脚；需要时去「安装代码」页再复制一遍。连域名也换了，授权域名记得跟着改。

手里有两个 WordPress 站的，给每个站各建一个网页接入渠道，各放各的代码，欢迎语、窗口样式、接待分配都可以分开配。要留意渠道数有上限，停用的也算在内，具体能建几个看所买版本。站点不是用 WordPress 搭的，或者想先看看网页客服整体能做些什么，可以读网站怎么添加在线客服。

还没有合从账号的话，先到 https://aihecong.com 注册，7 天免费体验期内把代码贴到自己的 WordPress 站上，让客服真接几天再决定。