
# 开发样例：JS页面集成样例
|   环境要求   |                                              -                                               |
|---|---|
| **引用库**  | Jquery 1.8.0.js/Axios.min.js                                                                 |
| **集成样例** | [index.html] |
   
![](https://support.huaweicloud.com/devg-weblite-cec/public_sys-resources/notice_3.0-zh-cn.png)
- 本文档所述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>
```
