更新时间：2024-05-22 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>
父主题： 开发集成页面
