更新时间:2023-09-20 GMT+08:00
开发样例:JS页面集成样例
环境要求 |
- |
---|---|
引用库 |
Jquery 1.8.0.js/Axios.min.js |
集成样例 |
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>
父主题: 开发集成页面