网页客服&h5 对接

使用此接口，自定义访客id、访客昵称、传输自定义参数到坐席侧、使用商品卡片。还可进行自定义咨询按钮

1、访客端通过url链接上面拼接参数的形式，拼接格式如下

https://im.useasy.cn/?channelId=abcxxx&imUrlTitle=&imFromUrl=
&userParams={"visitorName":"小翟1","visitorId":"111"}&otherParams=
{"自定义标题1":"自定义内容1","自定义key2":"自定义value2"}

2、参数定义格式如下（都为jsonString格式，key，value必须是双引号）：

userParams参数代表自定义访客id、访客昵称。内部参数 visitorName：访客昵称，visitorId：访客ID，groupId：接待组id，vip：优先进线标记，createCustomer是否自动创建客户资料

名称	含义	类型	示例
visitorName	访客昵称	String	极简访客
visitorId	访客ID	String	TM9KcDDExiCBAjFF
createCustomer	是否创建客户资料	Boolean	true/false 默认为false是否用当前visitorId+visitorName自动创建客户并关联客户资料
queueNumber	接待组id	String	10000170 （服务组信息接口中的queueNumber）
vip	优先进线标记（vip）	Boolean	true/false
userPermission	是否抛出权限申请事件（app引入h5场景对接用户权限可用）	Boolean	true/false
language	语言类型	String	CN 中文、EN 英文、JP 日语、KR 韩语、FR 法语、IT 意大利语、DE 德语
embedded	应用场景	String	uniapp

otherParams参数代表自定义参数，用户可以自定义key和value的形式

3、坐席端展现形式如下图：

4、自定义按钮

控制在线客服按钮是否隐藏需要在script标签里加上autoShow参数。true:显示，false:隐藏，不传默认为true。如下代码所示

<script type="text/javascript" src="http://im.useasy.cn/ueChatInit.js?channelId=MerJWbT50clIoAj8&autoShow=false" async></script>

设置隐藏后使用ueImClick方法即可激活访客端界面，如下方代码所示



<script>
      function openFunction(){
        console.log("打开与关闭客服聊天窗口事件")
        try {
          ueImClick()
        } catch (err) {
          console.error('err is:\n', err)
        }
      }
    </script>

3.1.1 访客端通过url链接上面拼接参数的形式，拼接格式如下

http://192.168.50.236:9624/?channelId=Jly8reRf1GXnT4jl&imUrlTitle=&imFromUrl=&
contentType="goodsCard"&content={"img":"url地址string类型",
"title":"标题","desc":"描述","remark":"备注","url":"商品url链接"}

3.1.2 参数格式定义如下（都为json格式，参数值必须是双引号）：contentType：卡片类型content：是存放发送商品信息的json对象

contentType: "goodsCard" // 卡片类型, goodsCard为商品类型卡片
content: {
    "img": String, // 图片
    "title": String, // 标题
    "desc": String, // 描述
    "remark": String, // 备注
    "url": String, //商品url
 }

3.1.2 前端根据判断contentType是否存在且contentType==='goodsCard'条件成立在判断是否有content这个字段来控制第一次卡片是否展示，展示的话点发给客服按钮，调用newMsg接口，把contentType和content传过去

3.2.1 坐席通过Tab页对接页面配置tab页

3.2.2 tab页里的url里面所呈现的内容应为一个订单列表，每个列表需要包含商品卡片的信息以及对应的发送按钮，卡片内容参数定义如下

content：{
    "contentType": "goodsCard" // 商品卡片类型
    "img": String, // 图片
    "title": String, // 标题
    "desc": String, // 描述
    "remark": String, // 备注
    "url": String, //商品url
 }

3.2.3 点击卡片上的发送按钮需要用户将卡片上的参数，通过window.parent.postMessage(content, '*'); 将数据用postMessage的方式发送，以下为数据格式和发送方法和示例展示

var content = { // 要发送的卡片数据对象
    contentType: "goodsCard" // 商品卡片类型
    title: "这里是商品卡片的标题",
    desc:"这里是商品卡片的描述",
    img:"https://img.alicdn.com/imgextra/i2/2228361831/12228361831.jpg",
    remark:"这里是商品卡片的备注",
    url: "http://www.baidu.com",//商品url
}
window.parent.postMessage(content, '*'); // 将数据用postMessage的方式发送

3.2.4 坐席端通过拿到iframe的参数调用replyMsg接口发送数据，以下为获取iframe上传递的数据方法

// 监听message事件
window.addEventListener('message', event => {
  if (event.origin !== 'https://example.com') return; // 根据需要验证消息来源，https://example.com为网页url
  // 处理数据对象
  const param = event.data; // 获取参数
  console.log(param); // 处理参数
});

3.2.5 最终呈现在访客端

在app中引入H5，会涉及到用户隐私权限的获取和申请，但H5无法直接获取用户权限，因此H5页面需要与APP进行jsbridge对接，将需要获取的权限通知到APP，由APP申请权限后再将权限同步给H5，以实现获取对应权限的逻辑。文件下载同理，如app希望自定义文件下载路径，则H5会通知app将要进行的下载操作，app下载完成后回执给H5即可。

涉及到app对接场景的，H5链接需要拼接 userPermission=true

前端方法名是:'appDownFile'

送客户端参数是：
{
callback ="callback1732980314328"; // Date.now()
params =
{
fileName ="文件名称";fileUrl ="文件地址"
}
}

客户端回调方法直接返回boolean值

在app授予权限给H5时，可能需要判断权限类型，权限使用场景如下：

录音权限：系统将使用您的麦克风进行录音，发送录音消息给到客服。

图片权限：系统将获取您设备中的图片信息，并支持发送图片给客服

文件权限：系统将获取您设备中的文件信息，并支持发送文件给客服

摄像头权限：允许系统调起摄像头进行拍照/录像

IOSWebChatDemo.zip

366.0 KB

AndroidWebViewDemo(1).zip

771.9 KB

Androiddemo-debug.apk

6.4 MB

链接中需要拼接参数： embedded=uniapp

handlePostMsg(event) {
				if (event && event.detail?.data[0].action == 'appDownFile') {
					this.msg = event.detail.data[0]
					setTimeout(() => {
						//下载成功发送消息到H5
						const message = {
							type: 'AppToH5',
							data: '下载成功'
						};
						// blueresult要与H5监听值对应上
						 const currentWebview = this.$scope.$getAppWebview();
						 const html = currentWebview.children()[0];
						 html.evalJS(`blueresult(${JSON.stringify(message)})`)
					}, 3000)
				}
				// web接收
				if (event && event?.data.data.arg.action == 'appDownFile') {
					this.msg = event.data.data.arg
				}
			},


vue项目中接受App传过来的信息：
onMounted(() => {
  window.blueresult = function(event) {
    messageAge.value = '333';
    console.log('Received message11111:', event.data); 
  }
});

uniapp.zip

312.2 KB

1_base.apk

14.1 MB

因为微信小程序使用web-view需要进行业务域名校验，因此需要将H5的域名更换为https://im-wechat.useasy.cn后，再联系对接人员进行校验文件的上传

2024-12-23

网页客服&h5 对接

一、接口说明

二、基础信息对接

三、商品卡片对接

3.1 访客给座席发送卡片

3.2 座席给访客发送卡片

H5对接APP场景：

文件下载对接

权限对接

安卓权限对接

IOS权限对接

原生安卓对接demo

H5对接uniapp打包APP

H5对接微信小程序

本页目录