Flow
Cloud Contact Center provides a JavaScript SDK for developers. Developers can import the SDK into the page using a script, which completes the initialization of the SDK. The integration interaction is as follows:
Notes
1. TCCC Web SDK supports Chrome 56+ and Edge 80+. It’s recommended to use the latest version for more features.
2. Use HTTPS for deploying frontend pages (localhost is fine for development); otherwise, calls may not work due to browser restrictions.
Integration Prerequisites
Key Concepts
SdkAppId: A unique application ID created in Tencent Cloud Console. Each Tencent Cloud account can create up to 20 TCCC applications. UserID: The member ID added in the Tencent Cloud Contact Center, usually an email address. For first-time setup, the admin account and password can be found in the Internal Message (sub-accounts must subscribe to TCCC product notification). Each SDKAppID supports multiple UserIDs, and additional licenses can be purchased at Agent Purchase. SecretId and SecretKey: Developers need credentials to call the Cloud API. SecretId and Secretkey can be created in the Tencent Cloud console. SDKURL: JS URL Created via the cloud API, valid for 10 minutes. Use it only once for SDK initialization. Request URL each time when initialize the SDK. Once initialized, no need to re-create.
SessionId: A unique ID for the entire call, from start to finish, whether it's the user's or the agent's call. It can be used to retrieve recordings, call logs, events, and more.
Step 1: Get Required Parameters
1. Get Tencent Cloud Contact Center SecretId
and SecretKey
. For guide, see Access Key. Step 2: Get SDK URL
Note: This step requires implementation on the integrator's backend.
1. Integrate tencentcloud-sdk
3. Return the SDK URL to the frontend.
The step uses /loginTCCC
API. The example code is in Node.js; for other languages, see CreateSDKLoginToken.
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: 1400000000,
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 the SDK URL On the Web Frontend and Complete the Initialization
Note: This step requires implementation on the integrator's frontend.
1. Request /loginTCCC
API implemented in step two to get SDKURL.
2. Insert SdkURL into the page using script method.
3. Monitor tccc.events.ready event, and upon success, execute your business flow logic.
function injectTcccWebSDK(SdkURL) {
if (window.tccc) {
console.warn('The SDK has been initialized. Please confirm whether the initialization is being executed 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('Initialization succeeded')
});
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);
})
Was this page helpful?