更新时间:2024-03-05 GMT+08:00

JS代码实例

环境要求

--

引用库

jquery.js

下载链接

index.html

  • 本文档所述Demo在提供服务的过程中,可能会涉及个人数据的使用,建议您遵从国家的相关法律采取足够的措施,以确保用户的个人数据受到充分的保护。

  • 本文档所述Demo仅用于功能演示,不允许客户直接进行商业使用。

  • 本文档信息仅供参考,不构成任何要约或承诺。

index.html

<!DOCTYPE html>
<!--
   Tutorial.
   Check available devices.
-->
<html>

<head>
    <title>Tutorial. Check devices</title>
    <meta charset="UTF-8" />
    <!--link rel="stylesheet" href="phone.css"-->
    <!--link rel="icon" href="favicon.png"-->
</head>

<body>
    <!-- Check that browser is not IE -->
    <script>
        var ua = window.navigator.userAgent;
        if (ua.indexOf('MSIE ') > 0 || ua.indexOf('Trident/') > 0) {
            alert("Internet Explorer is not supported. Please use Chrome or Firefox");
        }
    </script>

    <!-- Phone script -->
	<script src="js/jquery-1.8.0.js"></script>
	<script>
			// 当前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": "XXXXXXXXXXX",
			"tenantSpaceId": "XXXXXXXXXX",
			"userAccount": "XXXXXXXXXX"
		}

		//定义变量$aicc_ContextPath,必须定义名称为$aicc_ContextPath,内容为https://ip:port或域名/service-cloud/
		const $aicc_ContextPath = "https://ip:port/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 param = new Array;
				param.push("AgentState_Busy");
				param.push("AgentState_Work");
				param.push("AgentState_Ready");
		
				param.push("AgentEvent_TransOutResult");
				var json = { name: "eventpost", param: param }
			    setTimeout(function(){ window.frames["ccbarclient"].postMessage(JSON.stringify(json), $aicc_ContextPath); }, 2000)
				//设定每2秒都去云客服服务器检查最新的坐席状态
                               //如果出现window.frames["ccbarclient"]值报错,可以将对应检查时间“2000”适当设置更大一点,例如设置为3000,4000等。
			//frames:ccbarclient, 是由 importScript 返回的data 动态生成的
				window.listeners["eventpost"] = callback;
		
			}
		});
	
	</script>

    <!--  HTML components of simple GUI -->
    <div id="status_line">
    </div>
</body>

</html>