更新时间:2023-09-20 GMT+08:00

开发样例:JS页面集成样例

环境要求

-

引用库

Jquery 1.8.0.js/Axios.min.js

集成样例

index.html

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

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

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

index.html

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

<head>
	<meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta charset="UTF-8">
    <title>在线客服</title>
    <!-- 如果需要使用网页协同功能,需引入cobrowse.js,cobrowseCommon.js这两个js,其中ip:port需替换成实际云客服的ip和port,或者直接使用域名 -->
    <script type="text/javascript" src="https://ip:port/service-cloud/resource.root/cobrowse/sdk/cobrowse.js"></script>
    <script type="text/javascript" src="https://ip:port//service-cloud/webclient/chat_client/js/cobrowseCommon.js"></script>
    <script type="text/javascript" src="js/jquery-1.8.0.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
</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>
	<script>
	//定义变量$aicc_ContextPath,必须定义名称为$aicc_ContextPath,内容为https://ip:port或域名/service-cloud/
	const $ContextPath = "https://ip:port/service-cloud"
	// 构造请求参数
	let timestamp = new Date().getTime();
	let serviceUrl = $ContextPath+ "/webclient/chat_client/js/thirdPartyClient.js?"+"&t=" + timestamp;
	// 以下变量在使用前请先定义,本demo在后续代码axios.js引用时进行的定义。详细参数说明请参见表1
	let thirdUserData = {};
	thirdUserData['thirdUserToken'] ="XXXXXXXX";
	thirdUserData['thirdUserName'] = "XXXXXXXX" 
	thirdUserData['thirdUserId'] = "XXXXXXXX";
	thirdUserData['tenantSpaceId'] = "XXXXXXXX";
	thirdUserData['channelConfigId'] = "XXXXXXXX";
	thirdUserData['locale'] = "xx";

    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]);

    function thirdValidate(thirdUserData) {
        let timestamp = new Date().getTime();
        let serviceUrl = $ContextPath + "/webclient/chat_client/js/newThirdPartyClient.js?"+"&t=" + timestamp;
	// 请求newThirdPartyClient.js
        var request = $.ajax({
            url: serviceUrl,
            type: "POST",
            data: JSON.stringify(thirdUserData),
            crossDomain: true,
            dataType:"text",
            xhrFields: {withCredentials: true},
            error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(XMLHttpRequest.status); console.log(XMLHttpRequest.readyState); console.log(textStatus); },
            success: function (data) {
                importScript(data)
            }
        });
    }

    applyChatWindow();
    function applyChatWindow() {

        thirdUserData['timestamp'] = timestamp;
        // 请求service-cloud获取JS文件
        axios({
            method: 'post',
            url: serviceUrl,
            data: JSON.stringify(thirdUserData),
            withCredentials: true
          })
          // 定义JS文件变量,并写入到当前网页中
          .then(resp => {
          if (resp && resp.status === 200) {
              let str = 'var configId = "' + thirdUserData.channelConfigId + '";var userId = "' + thirdUserData.thirdUserId + '";var userName = "' + thirdUserData.thirdUserName 
                    + '";var tenantSpaceId = "' + thirdUserData.tenantSpaceId + '";var locale = "' + thirdUserData.locale  
                    + '";var token="'+ thirdUserData.thirdUserToken+'";';
              importScript(str+resp.data);
          } else {
            this.$alert("链接失败!");
            console.log(resp.status);
            console.log(resp);
          }
        });
    }

</script>

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

</html>