核心代码简析

操作步骤

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

   <script src="jquery-3.7.1.min.js"></script>

   jQuery请登录https://jquery.com/download/获取最新版本的包。

3. 在需要引用的页面中添加如下代码。

   <script>
       // 当前demo写法需要引入jquery
       // 创建script标签并运行脚本
       const importScript = (function (oHead) {
   
           function loadError(oError) {
               throw new URIError("The script " + oError.target.src + " is not accessible.");
           }
   
           return function (sSrc, fOnload) {
               const 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
       const param = {
           "access_token": "xxxx",
           "tenantSpaceId": "xxxxxxxxxx",
           "userAccount": "xxxxx"
       }
   
       // callback 回调函数 用于处理轻量级接续的返回
       const callback = function (message) {
           // 可以根据 message.event 来做回调处理; message返回举例如下
           /**
            message:{
                event:{
                    content:"",
                    workNo:"",
                    eventType:""
                },
                message:"",
                retcode:"0"
            }
           **/
           console.log(message);
       }
   
       //定义变量$aicc_ContextPath，必须定义名称为$aicc_ContextPath，内容为https://ip:port或域名/service-cloud/
       const $aicc_ContextPath = "https://10.10.10.1:28090/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传递事件（座席状态）, 当座席收到以下事件，会触发eventpost的回调方法
               const param = new Array;
               param.push("AgentState_Busy");
               param.push("AgentState_Work");
               param.push("AgentState_Ready");
               param.push("AgentEvent_TransOutResult");
   
               const json = { name: "eventpost", param: param }
               //设定为3秒，确认页面已完成加载渲染，如果页面加载较慢，可以增大timeout的参数，如4000（4秒），5000（5秒）
               setTimeout(function(){ window.frames["ccbarclient"].postMessage(JSON.stringify(json), $aicc_ContextPath); }, 3000)
   
               //frames：ccbarclient, 是由 importScript 返回的data 动态生成的
               window.listeners["eventpost"] = callback;
           }
       });
   </script>

   表1 参数说明

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