H5在线客服怎么接入落地页
作者：周屿｜更新于 2026-10-23
运营做了一个投放用的 H5 落地页，过来说一句：页面上加个在线客服，让来的人能直接问。
H5在线客服接进落地页，其实就是贴一段代码。到客服系统里复制一段 script，贴到页面 </body> 前面，发布以后右下角就有一个聊天按钮，点开就能打字问。
客户发的消息，客服在工作台上回。工作台，就是客服回消息的那个页面。这里用合从按顺序走一遍。
先把代码贴上
- 登录工作台，点「设置」，在「客户」下面找到「渠道管理」，点「接入新渠道」。
- 类型选「网页接入」，名字起一个自己认得的，比如「618 落地页」，点「创建渠道」。
- 建好以后页面直接停在「安装代码」，点「复制代码」。
代码里已经带好了这个渠道的编号，不用改。贴到落地页的 </body> 前面。页面是用模板生成的，就贴进公共的底部模板，一次所有页面都有。
不用写初始化代码。按钮颜色、文案、欢迎语都在工作台里改，运营自己改，不用你再发版。
发布以后，「安装代码」页下面的「安装状态」卡片在页面有人打开后，几秒钟就会亮成「已安装」。一直亮不起来，就是代码没生效，先看页面是不是重新发布了。
没装过的，网站贴一段代码就能接待那篇写得更细。
拿手机看一遍
落地页的人大多是从手机上点广告进来的。电脑上看着没问题，手机上不一定。
按钮和聊天窗都特别小
这是页面没写移动端的 viewport。手机浏览器会把页面当成 980 像素宽的电脑网页来显示，再整体缩小。在 <head> 里加一行就好了，页面自己在手机上也会跟着变好：
<meta name="viewport" content="width=device-width, initial-scale=1" />
用拖拽工具生成的 H5 页面，要看一眼有没有这一行。
聊天按钮压住报名按钮
落地页底部常有一条固定的「立即报名」「免费领取」。到「渠道管理」里点这个渠道，左边选「启动器」，切到「手机」标签。
电脑和手机是分开配的，改手机这套不影响电脑。把「按钮大小」调小，再用「向上抬高」把它抬到报名按钮上面。挪不开就换到另一边。
手机上的按钮样式有五种，后两种是贴在屏幕底部的一排入口。落地页底部已经有自己的按钮的，选圆形按钮就行，别再加一排。
输入框贴着屏幕最底下
全面屏手机最下面有一条手势横条，微信里打开最明显。在 viewport 那行里加上 viewport-fit=cover，输入框就会自己留出这段高度：
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
不加也能正常聊，只是看着挤。页面顶部有固定导航栏的，加了以后要自己留出状态栏的距离。
改完按钮点「保存」，手机上刷新就是新的，不用重新贴代码。按钮点开后的窗口和欢迎语，聊天窗口的样式和欢迎语怎么设置另外写过。
用页面自己的按钮打开
落地页的设计稿里，往往已经有一个「立即咨询」按钮。运营想要的是点它就打开聊天，不想右下角再多一个。
到「启动器」最上面的「按钮来源」，从「合从聊天按钮」改成「使用自有按钮」。改了以后，合从自己的按钮就不显示了。
然后给页面上的按钮加点击事件：
<button id="ask-btn">立即咨询</button>
<script>
window.hecong = window.hecong || function (c) { (window.hecong.q = window.hecong.q || []).push(c) }
window.hecong(function (hc) {
document.getElementById('ask-btn').addEventListener('click', function () {
hc.open()
})
})
</script>
最上面那行是占位函数，照原样复制。接入的 script 是异步加载的，你的代码可能比它先跑。有这一行，早调的会排队，等它加载好再执行。
切按钮来源要等点击事件发布了再保存。不然中间这段时间，页面上一个咨询入口都没有。真碰上了，把按钮来源切回去，原来的配置都还在。
落地页有好几个套餐的，还可以把客户点的是哪个一起带过去。点按钮时先调 setPresend，再 open：
window.hecong(function (hc) {
hc.setPresend({ text: '想了解一下年卡套餐' })
hc.open()
})
这句话会填在输入框里，客户可以改，点发送才会发出去。客服一看就知道他问的是哪个，不用再问「您说的是哪一款」。
带进去的内容只在当前页面有效，跳到别的页面就没了。单页应用换路由不会自动清，到新页面再调一次，或者传 null 清掉。
Vue、React 写的 H5
单页应用的 H5，script 还是放在 index.html 里，不要在组件里动态插。聊天窗跟着整个页面走，不跟着组件。占位函数也写在 index.html 里，组件里什么时候调 window.hecong 都行。
Next.js、Nuxt 这种服务端渲染的，聊天窗要用 document 和 window，只能在浏览器里跑，得放在只在浏览器执行的地方。现成写法在文档站的接入代码与配置项里。
合从没有 npm 包，只有这一段 script。
看是哪条广告来的人
投了好几条广告，运营最想知道的是这个人从哪条来的。
客户在落地页上发起咨询，工作台上这条对话右边有一块「本次来源」。「着陆页」是他最先打开的那一页，「咨询页」是他在哪一页点开了聊天。投放链接上带了 UTM 参数的，还会多一行「UTM 归因」，对得上是哪条广告。
所以给每条广告的落地页链接带上各自的 UTM 参数。客服接待时看一眼，就知道这人是看了哪条广告来的，开口说什么心里有数。
上线前用手机走一遍
都弄好以后，手机关掉 Wi-Fi，用流量打开落地页，从点按钮到发出一句话，走一遍。再回工作台看这条消息到了没有，「本次来源」对不对。
想让聊天窗自己弹出来打招呼，可以看网站自动邀请怎么设置。
常见问题
H5 在线客服要自己搭源码吗？
不用。贴一段 script 就能用，聊天窗和客服回消息的工作台都是现成的。合从的网页接入只有贴 script 这一种方式，没有 npm 包。
H5 页面在微信里打开，客服还能用吗？
能。客户在微信、QQ 里直接点开页面，聊天窗照样能出来，能正常发消息。只有一处不一样：微信不让网页直接下载文件，客服发的文件会改成给一个链接，客户复制到浏览器里打开下载。
H5 在线客服系统免费吗？
合从没有免费版，注册后有 7 天企业版免费体验。可以先拿一个落地页接上，走一遍再决定。