Udesk即时通讯网页插件专用链接传参介绍

本文链接：https://blog.csdn.net/zczhangzhenqi/article/details/109120916

作者：张振琦

在《Udesk即时通讯（IM）网页插件入门》中说到了即时通讯的专用链接，也演示了浏览器直接访问和网页iframe加载的效果。本篇来介绍一下，专用链接支持的参数，通过给专用链接添加参数，使其使用场景更加丰富。

【管理中心】-【渠道管理】-【即时通讯】-【你的插件-管理】-【基本信息】
在这里插入图片描述
专用链接的下方，有四个设置项，客户组、客服、渠道、默认语言。以我现在的环境为例，选择客服组为售后组，客服为张振琦测试、渠道为演示渠道、语言为简体中文。

只要修改这四个设置项，专用链接的URL会跟随选项发生变法，即在URL后面添加参数。在这也可以看出来，我们的专用链接是支持传参的。
复制专用链接，用浏览器直接访问，看一下效果。
在这里插入图片描述
客服系统中

在这里插入图片描述
对话会直接分配到设置的客服，客服页面也会看到自定渠道，了解客户来源。这样就实现了一个实际的使用场景，给特殊用户提供专门客服支持并提示客服客户来源。

专用链接支持的参数不止如此，它也同样支持鉴权后的传入客户身份信息。这块我们用代码演示。我们使用《Udesk 即时通讯网页插件客户身份认证（一、Java签名篇）》中实现的鉴权服务。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>IM</title>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	</head>
	<body>
		姓名：<input id="name" type="text" style="width:100px">  
		邮箱：<input id="email" type="text" style="width:200px">
		web_token：<input id="token" type="text" style="width:200px">
		<button type="button" onclick="login()">用户登录</button>

		<div id="imdiv" style="width:600px;height:500px"></div>
		
		<script>
			var imurl = "你的专用链接";
		
			function login() {
			 				
				var timestamp = new Date().getTime();
				var nonce = timestamp;
				var web_token = $('#token').val();
				
				var input = {
					"timestamp":timestamp,
					"nonce":nonce,
					"web_token":web_token
				};
				//请求签名
				$.ajax({   
				   contentType: 'application/json',
				   type: 'POST',
				   url: "http://localhost:8080/WebIMSignature/WebIM",
				   dataType: "json",
				   data: JSON.stringify(input),
				   success: function (result) {
						if(result.sign) {
							sign = result.sign;
							//拼接鉴权参数
							var signarg = "nonce="+nonce+"&signature="+sign+"&timestamp="+timestamp+"&web_token="+web_token;
							//拼接用户信息参数
							var customerinfoarg = "c_name="+encodeURI($('#name').val())+"&c_email="+encodeURI($('#email').val());
							//添加iframe
							$('#imdiv').append("<iframe id='im' style='width:100%;height:100%'  src='"+imurl+"&"+signarg+"&"+customerinfoarg+"'></iframe>");
						}
					}
				});
			}
		</script>
	</body>
</html>

上面代码实现了添加，专用链接添加身份鉴权参数以及用户的姓名和邮箱参数。需要注意一点，内容需要使用encodeURI编码一下。看一下运行效果。姓名填写：测试专用链接，邮箱：testimlink@123.com，web_token：testimlink@123.com，然后点击“用户登录”按钮。

在这里插入图片描述
客服系统中

在这里插入图片描述
用户和邮箱都已正确传入，功能正常实现。

传入的客户信息参数还支持如下：

参数名称	类型	值	是否必选	说明
c_name	String	客户姓名	否
c_email	String	客户邮箱，唯一	否
c_phone	String	客户电话，唯一	否
customer_token	String	客户外部标识，唯一	否	与open_api_token同一字段
c_desc	String	客户描述	否
c_org	String	公司名称	否
c_tags	String	客户标签	否	传入客户标签，用逗号分隔如：“帅气,漂亮”
c_owner	String	客户负责人ID	否
c_vip	String	‘vip’(vip客户) 或者 ‘normal’(普通客户)	否	客户vip识别
c_owner_group	String	客户负责组ID	否
c_other_emails	String	客户其他邮箱列表	否	逗号分隔如：“a@xxx.cn,b@xxx.cn”
c_cf_<自定义字段名称>	String	客户自定义字段	否	客户自定义字段如： c_cf_名字、c_cf_age、…