网页渠道集成
网页插件配置方式升级。支持在客服工作台创建多个网页插件,分别设置每个网页插件的功能,并对网页聊天窗口的实际效果进行预览。
视频访客端
进入管理后台-接入-接入管理-视频客服,可创建独立的访客端视频插件
方式1、 直接在网页接入H5访客端链接
桌面网页接入 网页接入提供两种方式:为您的桌面网页添加聊天窗口,或为您的APP或微信公众号添加H5网页聊天地址。
H5网页接入 若您需要使用H5网页处理用户咨询,可以在您的APP、微信公众号添加一个H5网页链接。
网页访客端发起页面
方式2、 JS方式集成h5访客端接入
此种集成方式支持传递访客的参数给坐席,方便坐席可以得到访客端具体信息,以协助坐席其更快处理各事项;
常规js插件方式集成demo样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>独立视频h5访客端窗口页面-默认打开</title>
</head>
<body>
<script src="https://kefu.sh.absoloop.com/webim-vec/easemobvec.js"></script>
<script>
//核心方法,实现参数的绑定
window.easemobvec.bind({
//tenantId: '108067', //租户ID,非必传
hide: true, //控制最小化按钮默认隐藏
initLanguage: "zh-CN", //设置访客端显示的语言
resources: true,
configId: '97c75ad4-592c-4c8e-a26e-76387d2643a2', //请填写租户里h5视频渠道的实际ID
//控制窗口的宽高显示 仅对PC端浏览器生效,移动端会默认全屏显示窗口
dialogWidth: '100%',
dialogHeight: '100%',
dialogPosition: {
x: '0px',
y: '0px'
},
//此处用来传递访客的各项参数,包含系统标准字段以及客户自定义字段
visitor: {
trueName: "张三丰",
qq: "1234567@qq.com",
phone: "13123456789",
companyName: "北京易掌云峰科技有限公司",
userNickname: "小叮铛",
description: "我是小叮铛,一个积极乐观向上的宝宝",
email: "zhangsf@ti-net.com.cn",
tags: ["vip1"],
userDefineColumn: '{"ext01":"我是自定义字段01","ext02":"我是自定义字段02","browser":"我是自定义字段03"}', //注意,所有的非系统标准的用户自定义的字段,都要以这种方式放在这一个字段里面,并且确认字段在后台设置的是启用状态
},
//访客进线可以指定对应的视频坐席接待,并且显示一键邀请进线标识给坐席端,不需要本功能时可以删除
invitation:{
agentUserId: "bd364c8a-926c-4a43-8866-91f41dca9ee4", //环信内部可识别的坐席唯一ID
agentName: 'dyj@99501.com',//环信对外的坐席账号,目前后端还不支持,本字段后续由后端做改造支持
source: "invitation" ,//固定传此参数,代表邀请进线
},
// 视频沟通窗口关闭回调
onclose: function () {
console.log("【onclose】窗口即将关闭,感谢您的咨询");
window.open("http://www.baidu.com"); //此处可以进行一些回调事件处理,例如做页面跳转或者弹出友好提示之类的;
},
});
</script>
</body>
</html>
通过点击按钮打开访客端视频窗口样例Demo实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>环信客服系统-独立视频h5访客端窗口页面</title>
<style>
button {
height: 60px;
line-height: 60px;
border: 1px solid transparent;
padding: 0 18px;
background-color: #009688;
color: #fff;
white-space: nowrap;
text-align: center;
font-size: 14px;
border-radius: 2px;
cursor: pointer;
position: absolute;
top: 50%;
right: 50%;
width: 200px;
}
</style>
</head>
<body>
<button onclick="test()" title="点我弹出h5访客端窗口进行测试">点我弹出h5访客端窗口</button>
<script>
const loadJs = src => {
return new Promise((resolve, reject) => {
let script = document.createElement('script');
script.type = "text/javascript";
script.src = src;
document.body.appendChild(script);
script.onload = () => {
resolve();
}
script.onerror = () => {
reject();
}
})
}
//核心方法,实现参数的绑定
const easemobvecbind = () => {
window.easemobvec.bind({
//tenantId: '77907',
hide: true,
initLanguage: "zh-CN",
resources: true,
configId: '97c75ad4-592c-4c8e-a26e-76387d2*****', //线上环境,根据实际的渠道id填入即可
dialogWidth: '100vw', //全屏展示发起窗口
dialogHeight: '100vh', //全屏展示发起窗口
dialogPosition: {
x: '0',
y: '0',
},
onclose: function() {
console.log("onclose")
},
visitor: { //此处用来传递访客的各项参数,包含系统标准字段以及客户自定义字段
trueName: "张三丰",
qq: "1329548812@qq.com",
phone: "13121851325",
companyName: "北京易掌云峰科技有限公司",
userNickname: "小叮铛",
description: "我是小叮铛,一个积极乐观向上的宝宝",
email: "zhangsf@ti-net.com.cn",
tags: ["vip1", "vip2"],
userDefineColumn: '{"ext01":"我是自定义字段01","ext02":"我是自定义字段02","browser":"我是自定义字段03"}', //注意,所有的非系统标准的用户自定义的字段,都要以这种方式放在这一个字段里面,并且确认字段在后台设置的是启用状态
}
});
}
function test() {
//引入easemobvec.js,并实现h5渠道id的绑定
loadJs('https://kefu.sh.absoloop.com/webim-vec/easemobvec.js').then((res)=>{ //线上环境示例
easemobvecbind(); //渠道参数绑定
})
}
</script>
</body>
</html>
注:您在集成过程中有任何问题,均可联系我们商务为您贴心解答
访客端发起视频页面
注:访客端页面显示的LOGO、企业名字支持自定义,颜色如有自定义需求可联系我们商务;
视频坐席端接收到访客信息页面
集成过程中常见问题说明
视频访客进线指定坐席
我们h5或app渠道均支持访客进线指定某个视频坐席接待,指定的方式可参考上述demo中的写法,通过传参实现,需要注意的是,视频坐席一旦指定后,其他坐席将无法接起本视频会话,只能由此指定的坐席来接待;另外如果指定的视频坐席不存在,例如坐席ID指定有误,此时系统会走视频路由设定的技能组,将不再走指定接待的逻辑判定;
关于h5网页端浏览器兼容性说明
网页端的视频通话功能依赖于浏览器的webrtc功能,需要浏览器本身对webrtc有良好的支持,由于手机端浏览器种类较多,且对webrtc的支持相比PC端也比较差,例如常用的小米浏览器、夸克浏览器均不支持webrtc,为此我们在访客端视频窗口初始化过程中,增加了对浏览器的校验,如果当前浏览器不支持webrtc功能,我们会弹窗提醒访客更换其他的浏览器;我们仍强烈建议您采用app端SDK做集成,这样确保访客端运行环境灵活可控;或者建议您通过小程序渠道,通过配置小程序外链的方式,引导访客在小程序环境下打开视频访客端,以确保视频会话的支持(小程序端的集成说明我们也提供有对应的demo说明);