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:
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.
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 = {
credential: {
secretId: 'SecretId',
secretKey: 'SecretKey'
},
region: 'ap-singapore',
profile: {
httpProfile: {
endpoint: 'ccc.tencentcloudapi.com'
}
}
};
const client = new CccClient(clientConfig);
const params = {
SdkAppId: 1600000000,
SeatUserId: 'xxx@qq.com'
};
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');
script.src = SdkURL;
document.body.appendChild(script);
script.addEventListener('load', () => {
window.tccc.on(window.tccc.events.ready, () => {
resolve('Successfully initialized')
});
window.tccc.on(window.tccc.events.tokenExpired, ({message}) => {
console.error('Initialization failed', message)
reject(message)
})
})
})
}
fetch('/loginTCCC')
.then(res => res.json())
.then((res) => {
const SdkURL = res.SdkURL;
return injectTcccWebSdk(SdkURL);
})
.catch((error) => {
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.
Was this page helpful?