适用场景

可以在即时通信 IM 应用内任意位置或会话列表中放置在线客服入口，如下两个示例场景：

场景1：会话列表放置客服号

在所有用户的会话列表内置顶官方客服号，用户可通过此入口咨询、投诉、举报、联系客服/销售等。用户端客服端


场景2：在任意入口放置客服号

在即时通信 IM 应用内任意位置放置“在线客服”、“我要投诉”等入口，可用于问题咨询、举报、投诉等用户需要与人工客服交流的场景。用户端客服端


功能介绍

1. 路由排队： 丰富的路由排队策略，灵活调整、高效利用座席服务资源。2. 客服接待功能： 可实现咨询的灵活接待。3. 功能丰富的管理端：支持个性化配置接待流程、满意度评价、监听服务记录、客服数据分析等功能。4. 客服人员管理：企业可将进行服务的座席在系统内创建账号统一管理，并根据客服的不同技能区分管理。5. 智能机器人：知识库配置常见问题，机器人自动回复，提升服务效率。
6. 客服多终端办公：职场、居家、移动办公一体化。小程序移动办公居家/职场办公

7. 丰富的数据分析能力：支持查看/导出客服与用户的聊天记录，支持实时查看客服服务情况。
说明您可 前往 Demo，体验客服插件能力：

开始使用

步骤1：开通客服插件

1. 进入 IM 控制台 > 插件市场，选择客服插件，单击立即购买或免费试用。（每个应用可免费试用7天客服插件）2. 单击功能配置，单击前往管理端。
3. 在腾讯云站内信会收到管理端的登录账号及密码，可凭此内容登录管理端，已为您自动填写。

步骤2：管理端配置

添加客服

1. 登录 管理端。2. 进入管理端，选择客服管理，添加客服，客服管理的其他操作，可参见文档 客服管理。

配置技能组

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

创建会话服务流

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

步骤3：配置即时通信 IM 渠道

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

场景开发指引

场景一和场景二都是以 Vue3 版本 TUIKit 的基础上进行讲述。
如果您需要了解使用 IM SDK 如何开发请参见 IM SDK集成指引

场景1：在 IM 会话列表加入客服号

效果如上图，将客服入口放在 IM 会话列表，用户可以方便的和客服沟通交流。我们以 web 端为例，新建一个 IM UIKIT 内的官方咨询入口。

前置操作：

集成Vue3 版本 TUIKit

我们以通过Vue3 版本 TUIKit 与 我们的 npm 包结合作为演示 Demo。首先请您跟随 Vue3 版本 TUIKit 快速集成指引，完成 IM UIKit 的集成。

打开发送自定义消息开关：



步骤1：下载 UI 组件

通过 npm 方式下载 UI 组件。

npm i @tencentcloud/chat-customer-service-plugin-vue

步骤2：修改 Message渲染逻辑

在线客服的分支消息、评价消息、表单收集消息、物品卡片消息等都通过自定义消息实现，因此需要您修改自定义消息渲染的逻辑，我们以 Vue3 版本 TUIKit为例。请注意，此代码Demo中的 Vue3 版本 TUIKit 的版本为1.4.5。在 src/TUIKit/TUIComponents/container/TUIChat/components/index.vue 中，引入 UI 组件并渲染。

  
        // 在线客服有一些不需要渲染的标志位消息，使用isMessageInvisible过滤不渲染。    
    // 在线客服中评价消息需要独占一行，因此写在消息气泡外渲染。            // isCustomerServiceMessage判断自定义消息是否为在线客服的自定义消息，如果是使用 UI 组件渲染                   /*        原始代码已省略       */      // isCustomerServiceMessage判断自定义消息是否为在线客服的自定义消息，如果不是使用原始自定义消息组件渲染                   /*        原始代码已省略       */      

/*原始代码已省略*/// 引入UI组件import {  MessageRating,  MessageCustomerService,} from "@tencentcloud/chat-customer-service-plugin-vue";// 引入UI组件内方法import {  isCustomerServiceMessage,  isMessageInvisible,  isMessageRating,} from "@tencentcloud/chat-customer-service-plugin-vue";
// 组件内交互需要传入发送文本与自定义消息的方法const TUIServer = (window as any)?.TUIKitTUICore?.TUIServer?.TUIChat;
const sendTextMessage = (text: string) => {  return TUIServer?.sendTextMessage(text);};const sendCustomMessage = (data: any) => {  return TUIServer?.sendCustomMessage(data);};

步骤3：将客服会话加入会话列表

1. 建议在服务端调用 RestAPI 的 发送单聊消息接口 来激活会话服务流，使客服会话加入用户的会话列表。2. 以管理员角色（identifier=administrator，或者在 IM 控制台创建的管理员账号），指定消息消息接收方 To_Account 为客服虚拟号，从而将客服虚拟号加入会话列表。RestAPI 的具体使用可以参见文档《发送单聊消息接口》，请求传参示例如下：

{    "SyncOtherMachine": 1, // 消息同步至发送方    "From_Account": "userid", //登录用户的IM userId    "To_Account": "id", //前文创建的客服虚拟号userId    "MsgSeq": 93847636,    "MsgRandom": 1287657,    "MsgBody": [        {            "MsgType": "TIMTextElem",            "MsgContent": {                "Text": "hi, tccc"            }        }    ],    "CloudCustomData": "your cloud custom data"}

步骤4：打开 TCCC 会话的前置操作

在进入在线客服虚拟号的聊天会话时，我们约定发送一条固定格式的自定义消息，用于通知在线客服后台有客户进入聊天，并通知后台触发会话流。判断方法：会话对象的 UserID 与即时通信 IM 渠道中的客服的 IM UserID 相同。前置操作：修改 src/TUIKit/TUIComponents/container/TUIConversation/server.ts 文件中的handleCurrentConversation，在打开 TCCC 会话后发送一条如下方所示的自定义消息，以通知 TCCC 后台此 IM 端开启会话流。重点关注带*号的注释部分。

  // 切换当前会话  public handleCurrentConversation(value: any) {    // 通知 TUIChat 切换会话或关闭会话    this.TUICore.getStore().TUIChat.conversation = value || {};
    if (!value?.conversationID) {      this.currentStore.currentConversationID = '';      return;    }    // Prevent group chat that is currently open from entering from the address book, resulting in no jump.    if (this.currentStore.currentConversationID === value?.conversationID) {      this.currentStore.currentConversationID = '';    }    if (this.currentStore.currentConversationID) {      this.setMessageRead(this.currentStore.currentConversationID);    }    //***serviceIds为TCCC控制台中当前im sdkappid下的所有客服im userId的集合。***//        const serviceIds = [所有客服im userId];    //***当打开的会话是客服会话时，发送一条src为7的自定义消息通知TCCC后台。***//    if (serviceIds.includes(value.userProfile.userID)) {      this.TUICore.TUIServer.TUIChat.sendCustomMessage({        data: { src: "7", },      })    }    this.currentStore.currentConversationID = value?.conversationID;    this.setMessageRead(value.conversationID);  }

步骤5：启动项目

执行以下命令启动项目：在线客服的自定义消息还包括客服端输入状态、卡片消息、用户主动评价客服等，说明可见 IM SDK集成指引。

npm run serve

场景2：任意位置添加客服入口

如上图效果，可以将“我要投诉”入口放置在任意位置，用户点击入口打开客服进行咨询交流。我们以 web 端为例，新建一个 IM UIKIT 内的投诉举报入口。开发前提：已完成 IM Web TUIKit 集成

步骤1: 配置 TCCC 的在线客服

参见文档 快速配置在线客服，拿到访问链接：

步骤2: 在 IM 任意入口添加链接

在 IM UIKIT 内创建投诉入口链接，跳转至配置好的 TCCC 访问链接。例如：在TUIKit/TUIComponents/container/TUISearch/index.vue文件中加入如下代码：

我要投诉

const complain = () => {  window.open("您的在线客服网站地址", "_blank")}

您即可通过点击投诉入口链接，跳转至配置好的客服页面。

其他集成方式指引

我们为 web、uniapp、微信小程序 等平台提供了在线客服的多种接入方式，您可以根据您的业务需求来选择。

集成智能问答机器人

智能机器人（Chatbot）基于腾讯云前沿的人工智能技术实现 FAQ 智能问答、闲聊、数据运营看板等能力，您可以通过集成机器人功能减少人工客服工作量，快速、准确回答用户问题。步骤1：参考智能机器人操作指南 完成机器人的开通及配置。步骤2：在会话服务流中添加客服机器人节点，选择上一步已配置的机器人。

即时通信 IM 内容审核

如果您需要对不安全、不适宜的内容进行自动识别、处理，或者希望使用自定义拦截/替换词来规范服务话术，为您的产品体验和业务安全保驾护航，可以通过以下两种内容审核方式来实现：本地审核功能：在客户端本地检测在单聊、群聊、资料场景中由即时通信 SDK 发送的文本内容，支持对已配置的敏感词进行拦截或者替换处理。此功能通过在 IM 控制台开启服务并配置词库的方式实现。云端审核功能：在服务端检测由单聊、群聊、资料场景中产生的文本、图片、音频、视频内容，支持针对不同场景的不同内容分别配置审核策略，并对识别出的不安全内容进行拦截。此功能已提供默认预设拦截词库和审核场景，只需在 IM 控制台打开功能开关，即可直接使用。

对即时通讯IM解决方案有疑惑？想了解解决方案收费？ 联系解决方案专家

腾讯云限时活动1折起，即将结束： 马上收藏

同尘科技为腾讯云授权服务中心，购买腾讯云享受折上折，更有现金返利:同意关联，立享优惠

阿里云解决方案也看看？： 点击对比阿里云的解决方案