tencent cloud

即时通信 IM

动态与公告
产品动态
公告
产品简介
产品概述
基本概念
应用场景
功能介绍
账号系统
用户资料与关系链
消息管理
群组相关
公众号系统
音视频通话 Call
使用限制
购买指南
计费概述
价格说明
购买指引
续费指引
停服说明
退费说明
开发指引
Demo 专区
开通服务
体验 Demo
快速跑通
下载中心
SDK & Demo 源码
更新日志
聊天互动(含 UI)
TUIKit 组件介绍
快速开始
全功能接入
单功能接入
AI 集成
构建基础界面
更多特性
定义外观
国际化界面语言
推送服务(Push)
服务概述
名词解释
开通服务
快速跑通
厂商通道
数据统计
排查工具
客户端 API
服务端 API
推送回调
高级功能
更新日志
错误码
常见问题
智能客服
功能概述
快速入门
集成指引
管理员操作手册
客服操作手册
更多实践
直播间搭建
AI 聊天机器人方案
超大娱乐协作社群
Discord 实现指南
游戏内集成 Chat 指南
类 WhatsApp Channel 搭建方案
发送红包
Chat 应对防火墙限制相关
无 UI 集成
快速开始
集成 SDK
初始化
登录登出
消息相关
会话相关
群组相关
社群话题
用户管理
离线推送
云端搜索
本地搜索
公众号
客户端 API
JavaScript
Android
iOS & macOS
Swift
Flutter
Electron
Unity
React Native
C 接口
C++
服务端 API
生成 UserSig
REST API
第三方回调
控制台指南
新版控制台介绍
创建并升级应用
基本配置
功能配置
账号管理
群组管理
公众号管理
回调配置
用量统计
资源包查看指南
实时监控
开发辅助工具
访问管理
高级功能
常见问题
uni-app 常见问题
购买相关问题
SDK 相关问题
账号鉴权相关问题
用户资料与关系链相关问题
消息相关问题
群组相关问题
直播群相关问题
昵称头像相关问题
协议与认证
服务等级协议
安全合规认证
IM 政策
隐私政策
数据隐私和安全协议
平滑迁移方案
平滑迁移完整版
平滑迁移简化版
错误码
联系我们

方案二:SDK 集成

PDF
聚焦模式
字号
最后更新时间: 2025-02-28 17:32:40

集成效果





软件要求

座席端要求微软 Edge 或 Google Chrome 浏览器(版本70以上),下载地址如下:

集成步骤

您可以按照以下步骤进行开发集成:
1. 参考《快速入门》开通并配置好在线客服。
2. 可以直接使用 Demo 跑通,或者自己初始化。

使用 Demo 跑通

我们提供了不同框架下的 Demo,您可以下载后快速运行:
Vue Demo
下载完成后,根据README.md文档指引运行。您也可以继续根据后面的文档集成进您自己的项目。

自行初始化SDK

原理

客服插件提供 JavaScript SDK 给开发者,开发者将 SDK 以 script 方式引入到页面中,即完成 SDK 的初始化,集成交互图如下:
(“腾讯云联络中心”就是客服插件)




关键概念

SdkAppId:您开通的客服插件 appid,称之为 SdkAppId,通常为160开头。
UserID :座席或管理员在腾讯云联络中心内配置的账号,通常为邮箱格式,管理员参考《客服管理》添加客服账号。
SecretId 和 SecretKey:开发者调用云 API 所需凭证,通过 腾讯云控制台 创建。
SDKURL:初始化 Web SDK 时的 JS URL,通过云 API 创建,该 URL 有效时长为10分钟,请确保只使用一次,在需要初始化 SDK 时请求创建,SDK 初始化成功后无需重复创建。
SessionId:用户从开始接入到结束过程中的唯一 ID,通过 SessionId,开发者可以关联不同的录音、服务记录和事件推送等。

步骤1:获取必备参数

1. 获取腾讯云账号的 SecretIdSecretKey,可参见 获取密钥
2. 获取客服插件的 sdkappid,在客服插件页面的“功能配置”界面,点击“前往客服插件管理端”



3. 在跳转过去的页面 URL 上,可以找到160开头的数字,这串数字就是客服插件的 sdkappid。




步骤2:获取 SDK URL

说明:该步骤需要接入方后台开发实现。
1. 引入 tencentcloud-sdk,引入方式可参见 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
// 为保证工作台 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);
})

交流与反馈

单击进入 Chat 社群,享有专业工程师的支持,解决您的难题。

帮助和支持

本页内容是否解决了您的问题?

填写满意度调查问卷,共创更好文档体验。

文档反馈