tencent cloud

Cloud Contact Center

Announcement
What's New
Cloud Contact Center Terminology Update
What is Tencent Cloud Contact Center
Overview
Feature List
Terms Introduction
Handling Firewall Restrictions
AI Voicebot
Billing Guide
Voice Call Billing Overview
Desk Billing Overview
View Billing
Refund Policy
New User Guide
Voice Guide
Desk Guide
Use Case
Inbound: Customer Experience
Outbound: Telemarketing
Auto Dialer: Voice Notification
Integration Use Case (SDK)
Administrator Guide
Voice Guide
Desk Guide
Member Guide
Voice Guide
Desk Guide
AI Voice Agent Guide
Introducing AI Voice Agent
AI Voice Agent Practical Tutorial
Set Up Your AI Voice Agent
Activate AI Voice Agent Call
AI Voice Agent Call Logs
Developer Guide
SDK Development Guide
Data Push
Voice API Reference
History
Introduction
API Category
Making API Requests
Agent APIs
Skill Group APIs
Number APIs
Dual Call APIs
Predictive Outbound Call APIs
SIP Phone APIs
Call Service Record APIs
Billing APIs
Other APIs
Outbound Call APIs
Speech Intelligent Agent APIs
Data Types
Error Codes
Desk API Reference
API Reference
Callback Configuration
FAQs
Data Deletion Guide
Legal
Privacy Policy
Data Processing And Security Agreement
Service Level Agreements
TENCENT CLOUD CONTACT CENTRE TERMS OF USE
Glossary
Contact Us

Web

PDF
フォーカスモード
フォントサイズ
最終更新日: 2025-02-13 10:21:00

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

2. You have purchased and added agent account.

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.
2. Get TCCC application SDKAppID, and log into Tencent Cloud Console to view:




Step 2: Get SDK URL

Note: This step requires implementation on the integrator's backend.
1. Integrate tencentcloud-sdk
2. Call CreateSDKLoginToken API.
3. Return the SDK URL to the frontend.
The step uses /loginTCCCAPI. The example code is in Node.js; for other languages, see CreateSDKLoginToken.
// Version of tencentcloud-sdk-nodejs required to be 4.0.3 or later
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 = {
// Address to obtain secretId and secretKey: https://console.tencentcloud.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: 1400000000, // Replace it with your own SdkAppId
SeatUserId: 'xxx@qq.com' // Replace it 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 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');
// The DomId needs to be rendered into it. If it is filled in, there is no floating window, and the workspace is directly rendered into the specified dom element (XML)
// To ensure the integrity of the workspace UI, the rendered Dom should have 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 loaded successfully. At this point, you can use the global variable "tccc"
window.tccc.on(window.tccc.events.ready, () => {
/**
* TCCC SDK initialization succeeded. At this point, you can call out, listen to inbound events, and use other features.
* Note ⚠️: Please ensure that the SDK is only initialized once
* */
resolve('Initialization succeeded')
});
window.tccc.on(window.tccc.events.tokenExpired, ({message}) => {
console.error('Initialization failed', message)
reject(message)
})
})
})
}

// Request the interface implemented in step 2 /loginTCCC
// Note ⚠️: The following is just a code example, it is not recommended to run directly
fetch('/loginTCCC')
.then(res => res.json())
.then((res) => {
const SdkURL = res.SdkURL; // Ensure that the SdkURL is returned by the request, otherwise, unpredictable errors may occur!
return injectTcccWebSdk(SdkURL);
})
.catch((error) => {
// Initialization failed
console.error(error);
})


ヘルプとサポート

この記事はお役に立ちましたか?

フィードバック