核心代码简析

操作步骤

1. 在当前浏览器中导入系统运维管理员提供的安全证书。
2. 引入所需的js框架，在我们提供的样例中需要引入jQuery，参考版本为jQuery-1.8.0，如图1所示。
   图1 JS框架引用代码示例
   

3. 在需要引用的页面中添加如下代码。
   页面集成时如遇CORS (Cross-Origin Resource Sharing) 跨域问题，请参见xmlHttpRequest请求云客服的URL，报跨域问题的方式解决。

   	<script type="text/javascript">
   		// 当前demo写法需要引入jquery
   		// 创建script标签并运行脚本
   		var importScript = (function (oHead) {
   
   			function loadError(oError) {
   				throw new URIError("The script " + oError.target.src + " is not accessible.");
   			}
   
   			return function (sSrc, fOnload) {
   				var oScript = document.createElement("script");
   				oScript.type = "text\/javascript";
   				oScript.onerror = loadError;
   				if (fOnload) { oScript.onload = fOnload; }
   				oHead.appendChild(oScript);
   				oScript.innerHTML = sSrc;
   			}
   
   		})(document.head || document.getElementsByTagName("body")[0]);
   		
   		//配置请求参数，access_token为鉴权信息，tenantSpaceId为租间id，userAccount为登录账号，请参见表1
   		var param = {
   			"access_token": "xx",
   			"tenantSpaceId": "xxx",
   			"userAccount": "xxx"
   		}
   
   		//定义变量$aicc_ContextPath，必须定义名称为$aicc_ContextPath，内容为https://ip:port或域名/service-cloud/
   		const $aicc_ContextPath = "https://10.10.10.10:8080/service-cloud/";
   		//发起请求，请求云客服并传递data内容（access_token / tenantSpaceId / userAccount）
   		$.ajax({
   			type: "post",
   			data: JSON.stringify(param),
   			url: $aicc_ContextPath+"ccdesktop/pages/cc-bar/js/ccbarclient.js?t=" + Math.random(),
   			crossDomain: true,
   			xhrFields: {
   				withCredentials: true
   			},
   			error: function (XMLHttpRequest, textStatus, errorThrown) {
   
   			},
   			success: function (data) {
   				//请求成功后执行js，云客服回传js,并动态生成接续条，目前暂不支持接续条样式和位置修改
   				importScript(data)
   				
   				//以下为通过postmessage传递事件（座席状态）
   				var agentStatusParam = new Array;
   				agentStatusParam.push("AgentState_Busy");
   				agentStatusParam.push("AgentState_Work");
   				agentStatusParam.push("AgentState_Ready");
   		
   				agentStatusParam.push("AgentEvent_TransOutResult");
   				var json = { name: "eventpost", param: agentStatusParam }
   			    setTimeout(function(){ window.frames["ccbarclient"].postMessage(JSON.stringify(json), $aicc_ContextPath); }, 2000)
   		       //设定每2秒都去云客服服务器检查最新的坐席状态。
                          //如果出现window.frames["ccbarclient"]值报错，可以将对应检查时间适当设置更大一点，例如设置为3000，4000等。
                         //frames：ccbarclient, 是由 importScript 返回的data 动态生成的。 
   				window.listeners["eventpost"] = callback;
   		
   			}
   		});
   
   	</script>

   表1 参数说明

   参数名	是否必填	说明
   ip&port	True	实际域名。请将上述https://10.10.10.1/换成AICC的公网域名。
   access_token	True	企业生成的校验信息。与表1中的token一致
   tenantSpaceId	True	租间id。
   userAccount	True	云客服登录账号，数据来源于同步企业系统与云客服的账号信息的accountCode。