文档首页/ 云客服/ 座席集成——座席轻量级接续块集成（JS）/ 集成开发/ 开发集成页面/ JS代码实例
更新时间：2024-05-22 GMT+08:00
查看PDF
分享

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" />
</head>

<body>
<!-- Check that browser is not IE -->

<script src="jquery-3.7.1.min.js"></script>
<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": "xxxxx",
        "tenantSpaceId": "xxxxxxxxxxxxxx",
        "userAccount": "xxxxxxxxxx"
    }

    // 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>

<!--  HTML components of simple GUI -->
</body>

</html>
父主题： 开发集成页面

相关文档