填写文档满意度调查问卷,赢取缤纷好礼> HOT

集成指引

最近更新时间:2022-04-06 14:46:55

介绍

企业可以在任意网站嵌入腾讯云呼叫中心的坐席工作台,例如在 OA、CRM 等系统里集成坐席工作台,就能在自己的业务系统里快速拥有一站式呼叫中心服务。

坐席端 SDK 提供了通用的带 UI 的客服工作台以及管理工作台,例如通话条、会话列表、聊天界面,IVR 画布等。开发者无需关心复杂的调用逻辑即可拥有全渠道全媒体通信能力,也可以利用丰富的接口来实现企业定制化。
集成后效果图如下图,右下角将出现呼叫中心图标,单击即可打开坐席工作台。

说明:

我们提供了 Vue DemoReact Demo,开发者可下载 Demo 并查看。

注意事项

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

接入前提

在正式接入腾讯云呼叫中心 SDK 之前,开发者需要:

  1. 创建 腾讯云呼叫中心应用
  2. 添加腾讯云呼叫中心账号(管理员或普通坐席),如您是初次创建腾讯云呼叫中心应用,我们会赠送10个坐席一个月的体验时长。
  3. 如需电话功能,需要 购买并配置号码

关键概念

  1. SDKAppID:是用户在 腾讯云呼叫中心控制台 上创建的应用 ID,称之为 SDKAppID,一个腾讯云账号最多可以创建20个腾讯呼叫中心应用,通常为140开头。
  2. UserID :坐席或管理员在腾讯云呼叫中心内配置的账号,通常为邮箱格式。一个 SDKAppID 下可以配置多个 UserID,如果超出配置数量限制,需到 坐席购买页 购买更多坐席数量。
  3. SecretId 和 SecretKey:开发者调用云 API 所需凭证,通过 腾讯云控制台 创建。
  4. SDKURL:初始化 Web SDK 时的 JS URL,通过云 API 创建,该 URL 有效时长为10分钟,请确保只使用一次,在需要初始化 SDK 时请求创建,SDK 初始化成功后无需重复创建。
  5. 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);
    });
    })

步骤3:在 Web 前端初始化坐席端 SDK

  1. 请求第二步实现的 /loginTCCC 接口,得到 SdkURL。
  2. 将 SdkURL 以 script 方式插入页面。
  3. 监听事件 tccc.events.ready 成功后,执行业务逻辑。
    function injectTcccWebSDK(SdkURL) {
    return new Promise(function(resolve) {
    const script = document.createElement('script');
    script.setAttribute('crossorigin', 'anonymous');
    script.src = SdkURL;
    document.body.appendChild(script);
    script.addEventListener('load', function() {
    // 加载JS SDK文件成功,此时可使用全局变量"tccc"
    tccc.on(tccc.events.ready, function() {
    /**
    * Tccc SDK初始化成功,此时可调用外呼等功能。
    * 注意⚠️:请确保只初始化一次SDK
    * */

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