云联络中心
有奖捉虫：办公协同&微信生态&物联网文档专题 HOT
文档中心 > 云联络中心 > SDK 开发指南 > 集成在线客服 > uni-app

uni-app

最近更新时间：2024-01-08 11:09:01

我的收藏

本页目录：

效果展示

?
?
?

开发环境要求

HBuilderX （HBuilderX 版本 >= 3.8.4.20230531）或者升级到最新版本
Vue2 / Vue3
sass（sass-loader 版本 ≤ 10.1.1）
node（12.13.0 ≤ node 版本 ≤ 17.0.0, 推荐使用 Node.js 官方 LTS 版本 16.17.0）
npm（版本请与 node 版本匹配）

步骤1：集成 uniapp 版本 Chat TUIKit

客服插件是 Chat TUIKit 的众多插件之一，在使用客服插件之前，您需要集成 @tencentcloud/chat-uikit-uniapp ≥ 1.2.9。

步骤2: 配置 TUIContact 入口

修改 page.json 配置 tabBar;
?
?
?
{
  "pages": [
    {
      "path": "TUIKit/components/TUIConversation/index",
      "style": {
        "navigationBarTitleText": "腾讯云 IM"
      }
    },
    {
      "path": "TUIKit/components/TUIChat/index",
      "style": {
        "navigationBarTitleText": "腾讯云 IM"
      }
    },
    {
      "path": "TUIKit/components/TUIContact/index",
      "style": {
        "navigationBarTitleText": "腾讯云 IM"
      }
    },
    {
      "path": "TUIKit/components/TUIChat/video-play",
      "style": {
        "navigationBarTitleText": "腾讯云 IM"
      }
    },
    {
      "path": "TUIKit/components/TUIChat/web-view",
      "style": {
        "navigationBarTitleText": "腾讯云 IM"
      }
    },
    {
      "path": "TUIKit/components/TUIGroup/index",
      "style": {
        "navigationBarTitleText": "腾讯云 IM"
      }
    }
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "TUIKit/components/TUIConversation/index",
        "text": "消息",
        "iconPath": "",
        "selectedIconPath": ""
      },
      {
        "pagePath": "TUIKit/components/TUIContact/index",
        "text": "通讯录",
        "iconPath": "",
        "selectedIconPath": ""
      }
    ]
  },
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
  "uniIdRouter": {}
}

步骤3：开通客服插件

请单击 插件市场 > 客服插件 免费试用或购买插件。详情请参见：插件市场 > 概述与开通指引。
注意：
每个插件限免费试用 1 次，有效期 7 天，试用结束后将停服，请提前购买。

步骤4：自定义客服号

第一步：登录客服管理端

方式一：进入IM 控制台客服插件，选择功能配置，单击前往客服插件管理端，免密登录管理端。
?
方式二：开通客服插件后，腾讯云站内信会收到管理端的登录账号及密码，可凭此内容直接登录 客服管理端。

第二步：添加客服

进入管理端，选择客服管理 > 添加客服，客服管理的其他操作，可参见文档 客服管理。
?
?
?

第三步：配置技能组

技能组是用来区分不同职能的客服，您可以根据业务需求，将客服人员添加进不同的技能组。 若不需要对客服人员分组，则创建一个技能组并添加全部客服即可。
1. 左侧导航栏单击在线客服 > 技能组管理进入技能组管理页面，单击添加技能组，创建用于接待用户咨询的技能组。
?
?
?
2. 单击编辑，将客服添加进技能组。技能组管理的其他操作，可参见文档 技能组管理。

第四步：创建会话服务流

会话服务流是当用户进入在线客服服务时的引导流程，可设定向用户发送欢迎语，导航等。 您可以在会话服务流中配置分支、转人工等功能。
1. 左侧导航栏单击在线客服 > 会话服务流管理进入会话服务流管理页面，在页面左上角单击新建。
2. 输入会话服务流名称：在会话服务流画布左上角输入会话服务流名称，例如：在线会话接待。
?
?
?
3. 连接模块：根据您的场景需要拖拽相应模块到画布区域合适的位置释放，连接模块并在各个模块填写相应信息（具体可参见 会话服务流模块）。每个会话服务流程必须以开始模块为第一个模块，以结束模块为最后一个模块。
?
?
?
4. 保存会话服务流配置完成后在画布右上角单击保存后回到会话服务流列表。

第五步：配置即时通信 IM 渠道

1. 进入渠道管理页面选择即时通信 IM 渠道，单击添加 IM 客服虚拟号。
?
?
?
2. 在弹出的窗口中设置头像、名称，并关联已创建的会话服务流。
?
?
?

第六步：获取客服虚拟号 userID，并设置新的客服号

在创建 IM 客服虚拟号后，您可以在客服虚拟号列表中看到对应 SDKAppID 中虚拟号的 IM userID。
?
?
?

步骤5：引入客服插件并设置客服号

在您的主入口文件中，如：App.vue 中，引入客服插件并设置客服号。如下图所示：
@tencentcloud/chat-uikit-uniapp 版本 ≥ 2.0.0
2.0.0 > @tencentcloud/chat-uikit-uniapp 版本 ≥ 1.2.9
?
?
?
import { setCustomerServiceAccounts } from "./TUIKit/tui-customer-service-plugin";
?
setCustomerServiceAccounts(['new_userID']) // 设置新的客服号
?
?
?
?
import { setCustomerServiceAccounts } from "./tui-customer-service-plugin";
?
setCustomerServiceAccounts(['new_userID']) // 设置新的客服号

步骤6: 启动项目

?
?
?

步骤7: 发起您的第一条客服咨询

通过 TUIContact 的客服号列表，进入客服号详情，点击发送消息，发起您的第一条客服咨询。
?
?
?
中国站


http://www.vxiaotou.com