tencent cloud

云联络中心

产品公告
产品动态
关于云联络中心术语更新
产品简介
产品概述
功能列表
名词介绍
应对防火墙限制相关
AI 专区
购买指南
语音通话计费概述
在线会话计费概述
查看账单
退费指引
新用户手册
语音通话指引
在线会话指引
场景用例
客服热线(呼入)
电话营销(呼出)
语音提醒(自动外呼)
集成用例(SDK)
管理员操作手册
语音通话分册
在线会话分册
工作台操作手册
语音通话分册
在线会话分册
AI 智能体操作手册
语音智能体介绍
语音智能体实践教程
新建语音智能体
实现智能体通话
查看智能体通话
开发操作手册
SDK 开发指南
数据推送
语音通话 API 文档
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
在线会话 API 文档
服务端 API
回调配置
常见问题
数据删除指引
相关协议
隐私政策
数据隐私和安全协议
服务等级协议
云联络中心用户协议
词汇表
联系我们

Web

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

原理

云联络中心提供 JavaScript SDK 给开发者,开发者将 SDK 以 script 方式引入到页面中,即完成 SDK 的初始化,集成交互图如下:




注意事项

1. TCCC 座席端 Web SDK 主要支持 Chrome 56版本及以上、Edge 80版本及以上的浏览器,建议安装最新版本的浏览器以支持更多功能。
2. 请使用 HTTPS 协议来部署前端页面(开发时可以用 localhost),否则会因为浏览器限制无法正常通话。

接入前提

2. 购买并添加座席账号

关键概念

SdkAppId:是腾讯云用户在 腾讯云联络中心控制台 上创建的应用 ID,称之为 SdkAppId,一个腾讯云账号最多可以创建20个腾讯联络中心应用,通常为140开头。
UserID :座席或管理员在腾讯云联络中心内配置的账号,通常为邮箱格式,首次创建应用,主账号可前往 站内信(子账号需订阅云联络中心产品消息) 查看联络中心管理员账号和密码。一个 SDKAppID 下可以配置多个 UserID,如果超出配置数量限制,需到 座席购买页 购买更多座席数量。
SecretId 和 SecretKey:开发者调用云 API 所需凭证,通过 腾讯云控制台 创建。
SDKURL:初始化 Web SDK 时的 JS URL,通过云 API 创建,该 URL 有效时长为10分钟,请确保只使用一次,在需要初始化 SDK 时请求创建,SDK 初始化成功后无需重复创建。
SessionId:用户从开始接入到结束过程中的唯一 ID,通过 SessionId,开发者可以关联不同的录音、服务记录和事件推送等。

步骤1:获取必备参数

1. 获取腾讯云账号的 SecretIdSecretKey,您可参见 获取密钥
2. 获取云联络中心应用的 sdkAppId 登录 云联络中心控制台 即可查看:




步骤2:获取 SDK URL

说明:该步骤需要接入方后台开发实现。
1. 引入 tencentcloud-sdk
2. 调用接口 CreateSDKLoginToken
3. 将获取到的 SdkURL 返回给接入方前端。
下文将使用接口名称 /loginTCCC 来说明该步骤开发的接口。以下代码以 Node.js 为例,其他语言示例代码请参见 CreateSDKLoginToken
// tencentcloud-sdk-nodejs的版本要求大于或等于4.0.3
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获取地址: 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, // 请替换为自己的 SdkAppId
SeatUserId: 'xxx@qq.com' // 替换为座席账号
};
client.CreateSDKLoginToken(params).then(
(data) => {
res.send({
SdkURL: data.SdkURL
})
},
(err) => {
console.error('error', err);
res.status(500);
}
);
})

步骤3:在 Web 前端请求获取 SDK URL 并完成初始化

说明:该步骤需要接入方前端开发进行。
1. 请求第二步实现的 /loginTCCC 接口,得到 SdkURL。
2. 将 SdkURL 以 script 方式插入页面。
3. 监听事件 tccc.events.ready 成功后,执行业务逻辑。
function injectTcccWebSDK(SdkURL) {
if (window.tccc) {
console.warn('已经初始化SDK了,请确认是否重复执行初始化');
return;
}
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.setAttribute('crossorigin', 'anonymous');
// 需要渲染进的DomId,如果填写则没有悬浮窗,工作台直接渲染进指定的 dom 元素
// 为保证工作台 UI 完整,渲染的 Dom 最小高度为480px,最小宽度为760px
// script.dataset.renderDomId = "renderDom";
script.src = SdkURL;
document.body.appendChild(script);
script.addEventListener('load', () => {
// 加载JS SDK文件成功,此时可使用全局变量"tccc"
window.tccc.on(window.tccc.events.ready, () => {
/**
* Tccc SDK 初始化成功,此时可调用外呼、监听呼入事件等功能。
* 注意⚠️:请确保只初始化一次 SDK
* */
resolve('初始化成功')
});
window.tccc.on(window.tccc.events.tokenExpired, ({message}) => {
console.error('初始化失败', message)
reject(message)
})
})
})
}

// 请求第二步实现的接口 /loginTCCC
// 注意⚠️:以下仅为代码样例,不建议直接运行
fetch('/loginTCCC')
.then(res => res.json())
.then((res) => {
const SdkURL = res.SdkURL; // 请确保 SdkURL 都是通过请求返回的,否则可能会出现不可预知的错误!
return injectTcccWebSdk(SdkURL);
})
.catch((error) => {
// 初始化失败
console.error(error);
})


ヘルプとサポート

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

フィードバック