更新时间:2024-05-22 GMT+08:00
分享

核心代码简析

操作步骤

  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。

相关文档