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
React 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/capicredential: {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 SdkAppIdSeatUserId: '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 directlyfetch('/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 failedconsole.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.