网页客服&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：优先进线标记

名称	含义	类型	示例
visitorName	访客昵称	String	极简访客
visitorId	访客ID	String	TM9KcDDExiCBAjFF
queueNumber	接待组id	String	10000170 （服务组信息接口中的queueNumber）
vip	优先进线标记（vip）	Boolean	true/false
userPermission	是否申请权限（安卓app场景可用）	Boolean	true/false

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时，可能需要判断权限类型，权限使用场景如下：

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

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

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

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

webviewsdkdemo.zip

53.6 KB

IOSWebChatDemo.zip

366.0 KB

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

2024-11-01

网页客服&h5 对接

一、接口说明

二、基础信息对接

三、商品卡片对接

3.1 访客给座席发送卡片

3.2 座席给访客发送卡片

H5对接APP场景：

安卓

IOS

H5对接微信小程序

本页目录