Solution Two: SDK Integration

The integration results





Software requirements

Workstation requires Microsoft Edge or Google Chrome browser (Version 70 or above), download links are as follows:

Integration steps

You can follow the steps below for integration:
1. Please refer to Getting Started to activate and configure customer service.
2. You can either run the Demo, or initialize it by yourself.

Execute the Demo

We offer Demos under different frameworks, which can be quickly executed after download:
Vue Demo
Following the download, proceed as guided by the README.md document for execution. You can also continue integrating this into your own project by following the subsequent documentation.

Initialize the SDK

Principles

The Customer Service Desk provides a JavaScript SDK to developers. Developers can integrate the SDK into their webpage by including it as a script, thus completing the initialization of the SDK. The schematic diagram of the SDK integration is as follows:
("Tencent Cloud Contact Center" refers to the Customer Service Desk)




Key Concepts

SdkAppId: The appid of the Customer Service Desk you activated, known as SdkAppId, typically begins with 160.
UserID : The accounts of agents or administrators in Tencent Cloud Contact Center are typically in email format. Administrators can refer to Manager Service for adding customer service accounts.
SecretId and SecretKey: Developers need to create SecretId and SecretKey through the Tencent Cloud Console to call cloud APIs.
SDKURL: The JS URL when initializing the Web SDK, created through cloud API. This URL has an effective duration of 10 minutes, so be sure to use it only once. Request its creation when you need to initialize the SDK. Once the SDK is successfully initialized, there is no need to recreate it.
SessionId: A unique ID, SessionId, is used to identify users during usage. Through the SessionId, developers can associate recordings, service records, and event notifications, among other things.

Step 1: Obtain necessary parameters

1. To obtain the SecretId and SecretKey of your Tencent Cloud account, please refer to the GetKey.
2. To obtain the sdkappid of the customer service desk, go to the 'Function Configuration' page of the customer service desk page and click on 'Go to the Customer Service Plugin Management Console'



3. On the redirected page URL, you can find a number starting with '160,' and that number is the sdkappid for the customer service desk.




Step 2: Obtain SDK URL

Note: This step needs to be implemented through backend development.
1. Import the Tencent Cloud SDK. To see the specific way to import the Tencent Cloud SDK, please visit the Tencent Cloud SDK Center and select the programming language you need.
2. Calling an API: CreateSDKLoginToken .
3. Return the acquired SdkURL to the front-end.
The interface name /loginTCCC will be used in the following text to explain the developed interface in this step.
The code below is an example for Node.js. Please refer to CreateSDKLoginToken for example codes in other languages.
// A version of `tencentcloud-sdk-nodejs` that is 4.0.3 or higher.
const tencentcloud = require('tencentcloud-sdk-nodejs');
const express = require('express');
const app = express();
const CccClient = tencentcloud.ccc.v20200210.Client;

app.use('/loginTCCC', (req, res) => {
const clientConfig = {
// Secret retrieval address: https://console.tencentcloud.tencent.com/cam/capi
credential: {
secretId: 'SecretId',
secretKey: 'SecretKey'
},
region: 'ap-singapore',
profile: {
httpProfile: {
endpoint: 'ccc.tencentcloudapi.com'
}
}
};
const client = new CccClient(clientConfig);
const params = {
SdkAppId: 1600000000, // Please replace with your own SdkAppId
SeatUserId: 'xxx@qq.com' // Replace with the agent account
};
client.CreateSDKLoginToken(params).then(
(data) => {
res.send({
SdkURL: data.SdkURL
})
},
(err) => {
console.error('error', err);
res.status(500);
}
);
})

Step 3: Request to get the SDK URL on the Web frontend and complete the initialization

Note:This step requires front-end developers to integrate.
1. Send a request to the /loginTCCC interface, which was achieved in the second step, to obtain the SdkURL.
2. Insert the SdkURL into the page using the script tag.
3. Once the page receives the event "tccc.events.ready" successfully, you can proceed to execute your business logic.
function injectTcccWebSDK(SdkURL) {
if (window.tccc) {
console.warn('SDK has already been initialized. Please confirm if it is being initialized repeatedly');
return;
}
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.setAttribute('crossorigin', 'anonymous');
// The DomId that needs to be rendered
// To ensure a complete workspace UI, the rendering Dom has a minimum height of 480px and a minimum width of 760px
// script.dataset.renderDomId = "renderDom";
script.src = SdkURL;
document.body.appendChild(script);
script.addEventListener('load', () => {
// JS SDK file is loaded successfully. You can now use the global variable "tccc"
window.tccc.on(window.tccc.events.ready, () => {
/**
* Once the TCCC SDK is successfully initialized, you can start using functionalities such as event listening and more.
* Caution: Ensure that the SDK is initialized only once
* */
resolve('Successfully initialized')
});
window.tccc.on(window.tccc.events.tokenExpired, ({message}) => {
console.error('Initialization failed', message)
reject(message)
})
})
})
}

// Request the interface implement in the second step /loginTCCC
// Caution: The following is merely code illustration, not advisable to execute directly
fetch('/loginTCCC')
.then(res => res.json())
.then((res) => {
const SdkURL = res.SdkURL; // Ensure SdkURL is always returned through request, otherwise unpredictable errors may occur!
return injectTcccWebSdk(SdkURL);
})
.catch((error) => {
// Initialization failed
console.error(error);
})

Exchange and Feedback

Click here to join the IM community and enjoy the support of professional engineers to help you solve your challenges.