网页渠道集成
网页插件配置方式升级。支持在客服工作台创建多个网页插件,分别设置每个网页插件的功能,并对网页聊天窗口的实际效果进行预览。
视频访客端
进入管理后台-接入-接入管理-视频客服,可创建独立的访客端视频插件
方式1、 直接在网页接入H5访客端链接
桌面网页接入 网页接入提供两种方式:为您的桌面网页添加聊天窗口,或为您的APP或微信公众号添加H5网页聊天地址。
H5网页接入 若您需要使用H5网页处理用户咨询,可以在您的APP、微信公众号添加一个H5网页链接。
网页访客端发起页面
方式2、 JS方式集成h5访客端接入
此种集成方式支持传递访客的参数给坐席,方便坐席可以得到访客端具体信息,以协助坐席其更快处理各事项;
集成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',
},
onready: function() {
console.log("onready")
},
onclose: function() {
console.log("onclose")
},
onopen: function() {
console.log("onopen")
},
onEvaluationsubmit: function() {
console.log("onEvaluationsubmit")
},
onmessage: function() {
console.log("onmessage")
},
onsessionclosed: function() {
console.log("onsessionclosed")
},
onsessioncreat: function() {
console.log("oncreat")
},
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"}', //注意,所有的非系统标准的用户自定义的字段,都要以这种方式放在这一个字段里面,并且确认字段在后台设置的是启用状态
},
extMsg: { //扩展字段,可以忽略本项
cmd: {
updateVisitorInfoSrc: {
params: {
uid: "cxn111111"
}
}
}
},
});
}
function test() {
//引入easemobvec.js,并实现h5渠道id的绑定
loadJs('https://kefu.easemob.com/webim-vec/easemobvec.js').then((res)=>{ //线上环境示例
easemobvecbind(); //渠道参数绑定
})
}
</script>
</body>
</html>
注:您在集成过程中有任何问题,均可联系我们商务为您贴心解答
访客端发起视频页面
视频坐席端接收到访客信息页面