文档中心 > 云呼叫中心 > 快速入门 > 全媒体客服(小程序音视频)

全媒体客服(小程序音视频)

最近更新时间:2020-09-10 14:57:17

腾讯云呼叫中心支持小程序音视频通话,用户通过小程序发起音视频,客服可在电脑端工作台接待,音视频通话过程中可支持发送图片、文字消息。

注意事项

您需下载谷歌 Chrome70 及以上版本的浏览器使用 云呼叫中心

前提条件

  1. 已完成注册 微信小程序账号
  2. 已完成安装 微信开发者工具
  3. 已完成安装 Node.js 10.13.0 或以上版本,参考文档:微信官方文档-小程序开发指南

步骤1:配置服务器域名

  1. 登录 小程序管理后台
  2. 选择【开发】>【开发设置】,根据下表配置服务器域名:
    域名类型 域名
    request 合法域名
    https://ccclogic.pstn.avc.qcloud.com
    https://official.opensso.tencent-cloud.com
    https://pingtas.qq.com
    https://sxb.qcloud.com
    https://webim.tim.qq.com
    https://yun.tim.qq.com
    https://cloud.tencent.com
    https://imgcache.qq.com
    socket 合法域名 wss://cccstate.pstn.avc.qcloud.com
    uploadFile 合法域名 https://cos.ap-shanghai.myqcloud.com
    downloadFile 合法域名 https://cos.ap-shanghai.myqcloud.com

步骤2:开启 live-player 和 live-pusher 组件

小程序管理后台 选择【开发】>【接口设置】,开启 live-player 组件【实时播放音视频流】和 live-pusher 组件【实时录制音视频流】。

步骤3:获取微信小程序的 AppID 和密钥

小程序管理后台 选择【开发】>【开发设置】,获取并记录 “AppID(小程序 ID)” 和“AppSecret(小程序密钥)”。

步骤4:创建项目

  1. 登录微信开发者工具。
  2. 单击【+】,配置以下参数后,单击【新建】。
参数 说明 示例
项目名称 请输入本地项目名称。 一号小程序
目录 请选择一个本地的文件夹作为代码存储的目录。 E:\WeChatProjects\一号小程序
AppID 请设置为真实的 AppID。 请输入 步骤3 获取的真实 AppID
开发模式 请根据实际需求选择开发模式。 小程序
后端服务 请根据实际需求选择后端服务。 不使用云服务
语言 请根据实际需求选择开发语言。 JavaScript

步骤5:登录云呼叫中心

  1. 登录 云呼叫中心
    登录账号:您在创建云呼叫中心实例时填写的邮箱,可在目标实例的“实例配置”页面中查看。

    登录密码:请您前往邮箱查收来自腾讯云呼叫中心的随机密码邮件。

    2、首次登录云呼叫中心需要绑定手机号并设置昵称。手机号绑定用于验证码登录、手机号找回密码以及坐席手机接听功能,不会对外部客户展示。
    3、 单击【目标实例】上线进入工作台。

步骤6:新增技能组

  1. 在管理中心选择【全媒体客服】>【技能组管理】,单击【添加技能组】。
  2. 设置技能组名称,单击【确定】创建一个新的技能组。
  3. 在目标技能组操作列中单击【查看技能组成员】。
  4. 在目标技能组详情页面右上角单击【添加客服】,勾选目标客服人员单击【确定】添加。
    说明:

    云呼叫中心默认创建实例的管理员为第一个客服人员,如需添加更多客服人员可前往客服管理中添加。

步骤7:创建会话服务流程&发布

  1. 在管理中心选择【全媒体客服】>【会话服务流管理】,单击【新建】创建会话服务流。
  2. 填写会话服务流的名称,例如:“全媒体客服接入体验”。
  3. 搭建会话服务流程:
    1. 【开始】模块需作为起始模块,将自动出现在画布中,并且不可删除。
    2. 添加【分支】模块,将【分支】模块连接于【开始】模块后。【分支】可支持用户在小程序中通过可视化导航至指定的技能组。若无需导航功能可跳过该步骤,前往步骤iii
      说明:

      • 如连线错误,可将鼠标放在连线上单击选中,按键盘上 backspace ⬅️ 键即可删除。
      • 在页面顶部右上角单击【保存】按钮,即可保存该会话服务流,以防止在搭建过程中因意外导致信息丢失。

      关键参数 说明 示例
      匹配关键词 小程序可视化导航项目的名称,用户点击即可跳转至指定技能组接待。。
      • 产品咨询
      • 产品报障
    3. 添加【转人工】模块,连接在【分支】模块后面,指定在不同的导航后由不同的技能组接待。如例子中产品咨询转接至售前技能组,产品报障转接至售后技能组。
      关键参数 说明 示例
      技能组名称 可以选择对应分支需要接待的技能组。 选择“音视频售前服务组”
    4. 添加【结束】模块,将【转人工】模块的出口连接到【结束】模块。单击页面右上角【保存并发布】,完成会话服务流搭建。

步骤8:获取并记录会话服务流程ID

在【全媒体客服】>【会话服务流管理】中“会话服务流 ID”列获取并记录 步骤7 中创建的会话服务流 ID,将在后续流程中用到。

步骤9:绑定小程序

  1. 在【渠道接入】>【微信小程序-自定义】页面右上角单击【绑定微信小程序】。
  2. 填写小程序名称,输入 步骤3 中获取的 “AppID(小程序 ID)” 和“AppSecret(小程序密钥)”。
    单击【确认】完成绑定。

步骤10:在小程序中装载音视频工具

  1. 执行以下命令,安装小程序装载工具。

    npm install ccc-store -g
  2. 步骤4 创建的项目根目录下,执行以下命令,运行装载工具。

    ccc-store install
  3. 根据提示,输入以下参数,输入完成后按回车键(Enter)完成装载任务。

    • sdkAppId:可前往 腾讯云呼叫中心控制台
    • mode: 请选择客服与用户是否需要在通话过程中互发图片、文字消息。Y 为是,N 为否。
    • ivrId:请输入 步骤8 中获取并记录的会话服务流 ID 填入。
      说明:

      ccc-config.js文件中可以更改 sdkAppIdmodeivrId参数。

    • 如果使用 openid 登录,在调用 requestLogin 前,把 openid 存进 Storage 中。
      wx.setStorageSync('openid', openid)
注意:

首次使用 requestLogin(utils/login.js),必须使用 UserInfo 的 encryptedData、iv 和 wx.login 返回的 code 登录。

wx.login({
    success: res => {
        requestLogin({
            jsCode: res.code,
            encryptedData: UserInfo.encryptedData,
            iv: UserInfo.iv
        }).then(() => {
            // do something
        })
    }
})

步骤11:上线试用全媒体客服功能(小程序音视频)

  1. 登录 云呼叫中心

  2. 单击目标实例上线进入工作台。确保客服状态为“空闲中”。

  3. 用户前往微信小程序单击【发起通话】,小程序界面会根据有无分支导航有如下两种界面,界面中图片支持用户自定义。通话发起后客服可在工作台接待回复。

  4. 用户在通话中单击【信息】可与坐席发送图片、文字、表情消息。

  5. 客服可在工作台提供全媒体接待,可与用户在通话过程中发送图片、文字、表情等消息。服务完成后单击【结束会话】即可结束服务。

步骤12:正式使用全媒体客服功能(小程序音视频)

正式使用云呼叫中心,您可根据业务场景需要进入【管理中心】进行以下配置操作:

配置操作 使用场景
客服管理 通过客服管理,可对腾讯云呼叫中心中所有人员,包括普通客服和管理员进行管理,您可以通过客服管理功能进行云呼叫中心人员的增加、删除、修改和查询等操作。
技能组管理
  • 客服技能组用来区分不同职能的客服,可以分为咨询、订单、售后、投诉以任务为目标的技能组,也可以分为不同区为特点的地区技能组。
  • 电话客服技能组用于将电话客服人员分组,若不需要对客服人员分组即创建一个技能组即可。
  • 全媒体服务流管理 全媒体服务流是当用户进入小程序时的引导流程,可设定可视化导航。
    来电弹屏 云呼叫中心通过 iframe 嵌入式来电弹屏集成业务系统,解决云呼叫中心与第三方业务系统对接的问题。当有用户呼入时,可以自动调取业务系统数据,展示给客服人员使用。
    目录