配置全媒体客服(微信小程序)

最近更新时间:2020-06-02 16:19:29

操作场景

本文主要介绍如何快速为自定义微信小程序配置全媒体客服,实现客户服务。
详细的操作流程如下表所示:

角色 操作任务
小程序开发人员 步骤1:配置服务器域名
步骤2:开启 live-player 和 live-pusher 组件
步骤3:获取微信小程序的 AppID 和密钥
步骤4:创建项目
管理员 步骤5:登录呼叫中心 Demo
步骤6:添加客服
步骤7:配置服务模式
步骤8:接入服务渠道
小程序开发人员 步骤9:在小程序中装载呼叫中心
客服坐席 步骤10:客服上线

前提条件

参考文档

微信官方文档·小程序开发指南

操作步骤

步骤1:配置服务器域名

当前步骤指引是参考微信官方文档所写,若有变动,请以 微信官方文档·小程序开发指南 为准。

  1. 登录 小程序管理后台
  2. 选择【开发】>【开发设置】。
  3. 根据下表配置服务器域名:
    域名类型 域名
    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 组件

当前步骤指引是参考微信官方文档所写,若有变动,请以 微信官方文档·小程序开发指南 为准。

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

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

当前步骤指引是直接参考微信官方文档所写,若有变动,请以 微信官方文档·小程序开发指南 为准。

  1. 登录 小程序管理后台
  2. 选择【开发】>【开发设置】。
  3. 获取并记录【AppID(小程序ID)】和【AppSecret(小程序密钥)】。

步骤4:创建项目

当前步骤指引是参考微信官方文档所写,若有变动,请以 微信官方文档·小程序开发指南 为准。

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

步骤5:登录呼叫中心 Demo

  1. 获取呼叫中心 Demo 网址。
  2. 使用 Chrome 70及以上版本的浏览器访问呼叫中心 Demo 网址,例如https://cccweb.pstn.avc.qcloud.com/online/1400111111,输入管理员邮箱和密码。
  3. 单击【管理工作台】,进入呼叫中心 Demo 数据概览页面。

步骤6:添加客服

  1. 登录呼叫中心 Demo,在左侧导航栏选择【客服管理】。
  2. 根据需求选择添加客服的方式:
    • 单击【批量添加客服】,单击【下载模板】,填写客服信息保存并上传文件。
    • 单击【添加客服】,填写客服信息:
      参数 说明 取值样例
      姓名 请填写客服人员的姓名。 李四
      客服工号 请填写客服人员的工号,后续不支持修改。 000010
      邮箱 请填写客服人员的邮箱,后续不支持修改。 2222@qq.com
      客服昵称 请填写客服人员昵称。 阿狸
      手机号码 请填写客服人员的手机号。 18500000000
      角色 请选择客服人员的角色,可选项:管理员或普通坐席,后续不支持修改。 普通坐席
      技能组 请选择客服人员所属技能组,可以多选或不选。 -
  3. 单击【确定】,在弹出的“添加客服成功”提示框中,单击【我知道了】。
    配置成功后系统将向客服人员的邮箱发送一封邮件,该邮件包含呼叫中心的网址和随机密码。

步骤7:配置服务模式

云呼叫中心支持在线客服、电话客服和全媒体客服3种服务模式。

说明:

本文以配置全媒体客服为例。

添加技能组

  1. 登录呼叫中心 Demo,在左侧导航栏选择【全媒体客服】>【技能组管理】。
  2. 单击【+添加技能组】,填写技能组名称产品咨询客服1组,单击【确定】添加技能组。
    说明:

    全媒体客服的接待人数上限固定为1,不支持更改。

  3. 单击产品咨询客服1组所在行的【查看技能组成员】。
  4. 单击【添加客服】,勾选李四,单击【确定】。
  5. 重复上述步骤,创建商务合作客服1组并为其添加客服。

创建会话服务流

  1. 登录呼叫中心 Demo,在左侧导航栏选择【全媒体客服】>【会话服务流管理】。
  2. 单击【新建】,填写名称测试全媒体客服会话
  3. 拖拽所需模块,编辑相关配置,并按流程顺序连接各个模块。
    模块 说明 配置样例
    开始 开始整个服务流程,可以关注以下系统参数用于后续流程配置:
    • ${WaitNo}:排队时当前用户前面的排队人数
    • ${StaffNo}:用户接入客服代表的工号
    无需配置
    消息发送 用于系统向客户发送消息。 输入【消息正文】,内容样例:您好,欢迎来到腾讯云云呼叫中心,很高兴为您服务。
    分支 用于流程的分支配置,可以设置用户进行关键字回复后跳转至指定流程,同时可配置输入错误时的提示。 按需配置以下参数:
    • 文本消息:输入相关文案,内容样例:产品咨询请回复“咨询”(或回复“1”),商务合作请回复“合作”(或回复“2”)。
    • 输入错误时的提示:输入相关文案,内容样例:输入错误,请重新输入。
    • 分支场景关键词:
      【匹配关键词】选择【1】时,【分支名称】输入【产品咨询】
      【匹配关键词】选择【咨询】时,【分支名称】输入【产品咨询】
      【匹配关键词】选择【2】时,【分支名称】输入【商务合作】
      【匹配关键词】选择【合作】时,【分支名称】输入【商务合作】
    转人工 用于转接至工作台由人工服务。 按需配置以下参数:
    • 标签:输入【转人工(咨询)】
    • 技能组名称:选择【产品咨询客服1组】
    • 转人工排队提示消息:输入相关文案,内容样例:正在为您转接人工客服,当前排队人数为${WaitNo},请耐心等待。
    • 转人工失败提示消息:输入相关文案,内容样例:当前无客服在线,请稍后咨询。
    • 转人工成功提示消息:输入相关文案,内容样例:转人工客服成功,${StaffNo}号客服代表为您服务。
    按需配置以下参数:
    • 标签:输入【转人工(合作)】
    • 技能组名称:选择【商务合作客服1组】
    • 转人工排队提示消息:输入相关文案,内容样例:正在为您转接人工客服,当前排队人数为${WaitNo},请耐心等待。
    • 转人工失败提示消息:输入相关文案,内容样例:当前无客服在线,请稍后咨询。
    • 转人工成功提示消息:输入相关文案,内容样例:转人工客服成功,${StaffNo}号客服代表为您服务。
    结束 所有流程都必须最后连接该模块结束。 按需配置以下参数:
    • 用户应答超时自动结束(秒):输入用户应答超时自动结束的时间,单位为秒
    • 超时自动结束提示语:输入相关文案,内容样例:超时未回复,本次会话将自动退出。
    • 客服结束提示语:输入相关文案,内容样例:本次会话已经结束。
  4. 单击【保存并发布】,获取并记录会话服务流 ID。
    会话服务流需发布后才能使用。

步骤8:接入服务渠道

云呼叫中心支持接入微信公众号、电话、自定义微信小程序,请根据实际需求接入。

说明:

本文以为自定义微信小程序配置全媒体客服为例。

  1. 登录呼叫中心,在左侧导航栏选择【渠道接入】>【微信小程序-自定义】。
  2. 单击【绑定微信小程序】。
  3. 填写小程序名称,输入 步骤3 获取的真实 AppID 和小程序密钥。
  4. 单击【确认】。

步骤9:在小程序中装载呼叫中心

  1. 执行以下命令,安装小程序装载工具。
    npm install ccc-store -g
  2. 步骤4 创建的项目根目录下,执行以下命令,运行装载工具。
    ccc-store install
  3. 根据提示,输入以下参数:
    • sdkAppId:请输入当前呼叫中心实例的 SDKAppID。
    • ivrId:请输入 步骤7 记录的会话服务流 ID。
      说明:

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

  4. Enter,完成装载任务。
注意:

首次使用 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
        })
    }
})

如果使用 openid 登录,在调用 requestLogin 前,把 openid 存进 Storage 中。

wx.setStorageSync('openid', openid)

步骤10:客服上线

  1. 使用客服人员的邮箱地址和密码登录呼叫中心 Demo,具体操作请参见 步骤4:管理员登录呼叫中心 Demo
    说明:

    需为浏览器开启摄像头、麦克风和通知权限,并确认摄像头、麦克风以及耳机能正常使用。

  2. 单击【现在上线】,等待客户呼入。

常见问题

1. 头像不存在,该如何处理?

需要把 UserInfo 存入 globalData 中。

getApp().globalData.userInfo = userInfo

2. 调用 requestLogin 失败,该如何处理?

请确保 wx.login() 返回的临时登录凭证未过期且未被使用。

3. 提示获取 roomSig 失败,该如何处理?

请参考 调试指引 打开调试面板,查看报错 log。
如无法定位并解决问题,可提供报错 log 截图等相关信息 提交工单 或联系我们(QQ:2982200247)协助处理。

目录