内嵌客服系统选H5还是SDK

合从在线客服系统首页 / 文章列表 / 详情2026-10-25 14:00:00

作者:沈知|更新于 2026-10-25

App 做到一定阶段,就会有人提出来,App 里要加个客服。客户有问题,别让他跑去打电话、加微信,在 App 里直接问。这就是内嵌客服系统要做的事。

客服的聊天窗口装在你自己的 App 里,客户不出 App 就能和客服聊。

开发面前一般有两条路。一条是放一个 WebView,打开 H5 客服页;另一条是装客服系统的原生 SDK。

原生开发的 App,优先装 SDK。用 uni-app、React Native、Flutter 做的 App,用 WebView 打开 H5 客服页。两条路聊天本身差不多,差别在客户离开 App 以后。

内嵌客服的两条路

H5 客服页就是一个网址,点开是一整页的聊天,合从里叫对话链接(点开就能聊的网址是怎么回事)。浏览器能打开,App 里的 WebView 也能打开。WebView 一放,地址一填,就能聊。同一个页面也常挂在推广落地页上(H5 落地页怎么接在线客服)。

SDK 是装进 App 的原生包,合从有 iOS 和 Android 两端。Android 从 Maven Central 加一行依赖,iOS 用 Swift Package Manager 加进来。然后写两行代码,一行登记渠道 ID,一行在「联系客服」按钮上打开客服页。

要填的只有渠道 ID,不用密钥、证书,也不用备案域名。版本要求是 iOS 13 及以上、Android 5.0 及以上。

客户点开看到的是原生的对话界面,发图片视频、按住说话、看客服发来的商品卡和订单卡,都在 App 里完成。

装了原生 SDK 的 App 里,客服对话页顶部是客服头像和昵称,往下是欢迎语、客户的提问和接待提示

不管走哪条,客户发来的消息都进同一个工作台,也就是客服回消息的那个页面。分配规则、技能组、AI 机器人的处理方式都一样。选哪条路,不影响客服那边怎么接。

差就差在客户离开 App 以后

客户问完一句就切出去了,或者干脆把 App 关了。客服十分钟后才回。

H5 这条路,客户关掉页面就收不到提醒了。消息不会丢,下次打开都在,但他不知道客服已经回了。

SDK 这条路多了两样。一样是未读红点。这个默认是关的,开发调一次 startUnreadTracking 把它打开。之后客户回到 App 时,SDK 查一下有几条没看,你把数字画在客服入口上。

另一样是离线消息通知。先在工作台这个 App 渠道的「离线消息通知」里,填上你服务端的回调地址。客户不在时人工客服回了消息,合从把这条消息发到你的服务端,你用自己的推送通道推给他。机器人回复和自动回复发出的消息,不会通知。推送证书本来就在你手里,所以推送由你发,合从只负责通知你。

还有权限说明。客户要发语音、拍照,App 得先拿到麦克风和相机权限。应用市场要求申请权限时说明用途。SDK 在 Android 上内置了说明弹窗,iOS 那边在 Info.plist 里填两句用途说明就行。H5 这条路,这个弹窗要自己在 WebView 的权限回调里做。

安卓 App 里客户按住说话时,SDK 先弹出的麦克风权限使用说明

放在一张表里看。

H5 客服页(WebView) 原生 SDK
开发量 放一个 WebView,填地址 加依赖,写两行代码
客户离开后 收不到提醒,下次打开能看到 有未读红点;接上服务端还能推送
权限说明弹窗 自己在 WebView 里做 Android 内置,iOS 填 Info.plist
页面形态 整页,可隐藏自带标题栏 整页、半屏弹层、嵌进自己的页面、整屏沉浸
怎么测 浏览器就能打开 只能在真机或模拟器里测
适合的工程 uni-app、React Native、Flutter 原生 iOS、Android,包括原生里嵌了几个 H5 页的

原生装 SDK,跨平台用 WebView

按工程类型来选,基本不会错。

原生开发的 App,直接装 SDK。原生工程里嵌了几个 H5 页面的混合 App,也算原生,照样装 SDK(安卓 App 怎么接客服 SDK)。

uni-app、React Native、Flutter 做的 App,合从没有这几个框架的插件包,用各自的 WebView 组件打开对话链接。uni-app 用 web-view(uni-app 里接客服的现成代码),React Native 用 react-native-webview,Flutter 用 webview_flutter。

跨平台框架又想要红点和推送,也有办法。框架能写原生模块的,在原生层集成 SDK,再从 JS 那边调用打开客服。建议直接打开 SDK 的整页客服页,别把客服视图嵌进框架自己的视图里。合从没在这几个框架上验证过,具体怎么集成,以框架自己的文档为准。

什么时候没必要上 SDK?客户一般当场问完、等着回,客服也回得快,H5 就够了。客户问完就走、回复要追到他手机上的,比如售后、订单问题,就上 SDK。

走 H5,先把这四件事办了

H5 客服页就是一个网页。放进 App 以后,这几处不处理,功能就会缺。

电脑浏览器里打开的 H5 客服页,顶部是客服名称,中间是欢迎语,底部是输入框

  1. WebView 的几个开关。 用 React Native、Flutter 这类能拿到底层 WebView 配置的框架时,要确认这几项。

    • Android 要实现 onShowFileChooser,不然客户点发图片没反应;
    • javaScriptEnabled 和 domStorageEnabled 要开,前者不开页面不工作,后者不开客户每次进来都是新访客;
    • 要发语音,在 onPermissionRequest 里放行音频采集,manifest 里 RECORD_AUDIO 和 MODIFY_AUDIO_SETTINGS 成对声明。只声明前一个,客户点了允许还是提示麦克风被占用;
    • iOS 在 Info.plist 补上麦克风和相机的用途说明,不然客户点录音 App 会闪退;
    • iOS 把 allowsInlineMediaPlayback 设成 true,不然视频会被系统全屏播放器接管。

    uni-app 的 web-view 不开放这些配置,能做到哪步看框架本身。

  2. 带上会员身份。客户在 App 里已经登录,打开客服时在链接后面拼上会员 ID 和称呼(?u=会员ID&n=张三),客服就知道是谁在问。网址上的参数客户自己能改,把 u 改成别人的,就能看到别人的对话,所以会员 ID 别用顺序编号、手机号这类能猜到的。App 已经有自己的标题栏的话,再加上 hh=1,把聊天页自带的标题栏藏掉。

  3. 退出登录要解绑。同一台手机,A 退出了,B 没登录就点开客服,会顶着 A 的身份进来,看到 A 的聊天记录。所以退出登录时,要把客服这边的身份也收回来。H5 和 SDK 都有对应的解绑方法。

  4. 链接用哪个。合从给的现成链接要先做实名认证才能打开,而且这个域名不承诺一直能用,重要的地方别用它。App 要长期挂着的,用自有域名部署更稳,也就是把一个页面文件放到你自己的域名下。

动手前先看效果

SDK 有一个示范 App。扫码装上,填上你自己的渠道 ID,消息直接进你的工作台。先确认渠道和账号这边是通的,之后自己集成再出问题,范围就缩到了工程配置。

H5 那边更简单,浏览器打开链接,就是客户会看到的样子。

先按工程类型定路:原生装 SDK,跨平台用 WebView。再想一下,客户问完就走的时候,客服的回复要不要追到他手机上。要,就上 SDK。

常见问题

app内嵌客服是什么意思?

就是把客服的聊天窗口装进自己的 App。客户在 App 里点「联系客服」就能和客服对话,不用跳出去。做法就是上面说的两种,WebView 打开 H5 客服页,或者装原生 SDK。

网站和 App 里都有客服,同一个客户能认成一个人吗?

能。网站、对话链接、App 在接入时传同一个客户 ID,系统就会认成同一个人,客户资料里能看到他在各处的全部对话。不传的话,默认算不同的客户。

App 渠道的客服地址,为什么在浏览器里打不开?

App 渠道的会话只能从装了 SDK 的 App 里发起。在浏览器里打开渠道地址,只会看到一张提示页,让你到 App 里打开。验证接入要装到真机或模拟器上,先装示范 App,不用等自己的工程集成完。

轻松上手,简单好用

多渠道统一服务,提升营销转化,降低人工回复成本,客服团队协助更高效