云联络中心 Web-SDK 开发指南-文档中心-腾讯云

原理
云联络中心提供 JavaScript SDK 给开发者，开发者将 SDK 以 script 方式引入到页面中，即完成 SDK 的初始化，集成交互图如下：
?
?
?
注意事项
1. TCCC 座席端 Web SDK 主要支持 Chrome 56版本及以上、Edge 80版本及以上的浏览器，建议安装最新版本的浏览器以支持更多功能。
2. 请使用 HTTPS 协议来部署前端页面（开发时可以用 localhost），否则会因为浏览器限制无法正常通话。
接入前提
1. 已创建云联络中心应用?
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. 获取腾讯云账号的 SecretId 和 SecretKey，您可参见  获取密钥。
2. 获取云联络中心应用的 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.cloud.tencent.com/cam/capi
    credential: {
      secretId: 'SecretId',
      secretKey: 'SecretKey'
    },
    region: '',
    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);    
  })
?
Web

本页目录：

原理

注意事项

接入前提

关键概念

步骤1：获取必备参数

步骤2：获取 SDK URL

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