更新时间:2024-08-22 GMT+08:00
分享

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

环境要求

-

引用库

jquery.js

下载链接

index.html

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

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

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

index.html

<!DOCTYPE html>
<html>

<head>
    <!-- 如果需要使用网页协同功能,需引入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>
    <!-- 0.引入jquery组件 -->
    <script type="text/javascript" src="jquery.js"></script>
</head>

<body>
    <script>
	// 1.定义变量,后续聊天框页面需要使用,详细参数说明请参见表1
        const userId = "XXXXXXXX"; 				// 用户id(即为表中thirdUserId)
        const userName = "XXXXXXXXXXX";				// 用户昵称(即为表中thirdUserName)
        const tenantSpaceId ="XXXXXXXXXX";				// 租间id(tenant id)
        const configId = "XXXXXXXXXXXXXXXXXX";			// 渠道id(wWEBchannelConfig id)
        const locale = "zh"; 							// 语言,locale:[zh,en]
        const $ContextPath = "https://ip:port/service-cloud";        //请求地址
		
	// 2.构造请求参数
        let serviceUrl = $ContextPath + "/webclient/chat_client/js/newThirdPartyClient.js?&t="+new Date().getTime();
        let thirdUserData = {};
        thirdUserData['thirdUserName'] = userName;				
        thirdUserData['thirdUserId'] = userId;					
        thirdUserData['tenantSpaceId'] = tenantSpaceId;			
        thirdUserData['channelConfigId'] = configId;	
        thirdUserData['locale'] = locale;                                       
	thirdUserData['timestamp'] = new Date().getTime();                                   // 时间戳  
	thirdUserData['secretKey'] = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';          // 认证秘钥
        getAuthorization(thirdUserData);                                                    // Authorization 签名
		
        // 3.请求newThirdPartyClient.js
        var request = $.ajax({
            url: serviceUrl,
            method: "POST",
            data: JSON.stringify(thirdUserData),
            xhrFields: { withCredentials: true },
            success: function (data) {
				// 4.创建script标签并运行newThirdPartyClient.js脚本
				importScript(data);
            },
            error: function (XMLHttpRequest, textStatus) {
                alert("unauthorized,validate failed")
            }
        });

	// 5.在集成页面加载运行JS
        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]);
	// 根据参数获取authration签名
	function getAuthorization(thirdUserData){
		$.ajax({
			url:"/webchat/authorizationService",
			method:"post",
			data:JSON.stringify(thirdUserData),
			async:false,
			success: function (data) {
				thirdUserData['thirdPartAuthorization'] = data;
				}
			});
		}
    </script>
</body>

</html>

相关文档