网页渠道集成

网页插件配置方式升级。支持在客服工作台创建多个网页插件,分别设置每个网页插件的功能,并对网页聊天窗口的实际效果进行预览。

视频访客端

进入管理后台-接入-接入管理-视频客服,可创建独立的访客端视频插件

方式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>

注:您在集成过程中有任何问题,均可联系我们商务为您贴心解答

访客端发起视频页面

视频坐席端接收到访客信息页面