Integrating Core Code

Updated on 2024-03-05 GMT+08:00

View PDF

Introduce the required JavaScript framework. In the following example, the jQuery component needs to be introduced. The reference version is jQuery 3.4.1. If the co-browsing function is required, introduce the cobrowse.js and cobrowseCommon.js components or release the cobrowse plugin for use. (For details about the development of the plugin, see section 3.1 "Guide to the Development and Usage of the cobrowse Plugin.") Introduce the cobrowse.js and cobrowseCommon.js components in CDN mode. Replace ip:port with the IP address and port number of the CEC, or directly with the domain name of theCEC, for example, https://www.test.com/service-cloud/resource.root/cobrowse/sdk/cobrowse.js. Figure 1 shows an example of the code.

Figure 1 JavaScript framework reference example

NOTE:

1. Co-browsing operations cannot be performed on a new tab page.

2. When the cobrowse.js and cobrowseCommon.js components for co-browsing are introduced and the third-party page contains nested iFrames, co-browsing operations can be performed only in the iFrame where the JavaScript components are introduced. If an iFrame has a parent iFrame, co-browsing operations cannot be performed in the parent iFrame.
Generate the authorization signature on the server by following the instructions provided in Developing an Authorization Signature Generation Mechanism.

On the frontend of the enterprise system, send an Ajax request to obtain the authorization signature generated on the server.

function testAjax() {
     let timestamp = new Date().getTime();
     let serviceUrl = "authorizationService";
     let thirdUserData = {};
     thirdUserData['thirdUserName'] = userName;
     thirdUserData['thirdUserId'] = userId;
     thirdUserData['tenantSpaceId'] = tenantSpaceId; 
     thirdUserData['channelConfigId'] = configId;
     thirdUserData['locale'] = locale;
     thirdUserData['mapService'] = tencent; 
     thirdUserData['timestamp'] = timestamp;
     var request = $.ajax({
         url: serviceUrl,
         method: "POST",
         contentType: "application/json",
         data: JSON.stringify(thirdUserData),
     });
     request.done(function(message){
         if(message){
             thirdUserData['thirdPartAuthorization'] = message;
             thirdValidate(thirdUserData);
         }
         return  message;
     });

After obtaining the signature, use the Ajax to request the JavaScript script to be integrated.

const $ContextPath = "https://ip:port/service-cloud"; 
function thirdValidate(thirdUserData) {
  let timestamp = new Date().getTime();
  let serviceUrl = $ContextPath + "/webclient/chat_client/js/newThirdPartyClient.js?"+"&t=" + timestamp;
      var request = $.ajax({ 
         url: serviceUrl,
         method: "POST",
         data: JSON.stringify( ),
         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)
         }    
});

**Table 1** Parameters for developing an integration page
Parameter	Mandatory or Not	Description
$ContextPath	Yes	Actual domain name. Replace https://ip:port/ with the public network domain name of the CEC.
thirdPartAuthorization	Yes	Authorization signature generated by the enterprise, which must be the same as the signature in 7.
tenantSpaceId	Yes	Tenant space ID. Choose Configuration Center > System Management > Tenant Information to view the value.
thirdUserId	Yes	Enterprise user ID. The value must be the same as that of thirdUserId in 5.
thirdUserName	Yes	Enterprise username. The value must be the same as that of thirdUserName in 5.
channelConfigId	Yes	Channel ID. After the operations in 6 are complete, choose Configuration Center > Access Configuration > Channel Configuration to view the value.
locale	Yes	Language information of third-party tenant space. zh: Chinese en: English
timestamp	Yes	Timestamp. The time string is formatted to the yyyy-MM-dd'T'HH:mm:ss.SSS'Z format.
mapService	No	User map service. tencent google The default value is tencent. NOTE: Tencent Maps does not support locations outside China.