简介

tui-customer-service-plugin 是基于 uikit 的客服插件，专为企业客服人员设计，用于为客户提供咨询解答服务。它具备丰富的功能，如消息快速回复、自动回复、访客信息查看、营销数据分析、客户管理等，并且支持多渠道接入，可以实现多样化集成。 在电商行业中，客服插件的功能更加贴合电商行业的特点，例如购物车信息互通、链接自动识别、多店铺管理等功能。它具有以下优势：

• 提高客服效率：客服插件可以快速回复客户的问题，并且支持自动回复功能，可以大大减少客服人员的工作量；
• 提升客户体验：客服插件可以实时显示客户信息，方便客服人员了解客户需求，提供更加精准的服务，提升客户体验；
• 加强客户管理：客服插件可以记录客户的历史对话内容，方便了解客户的需求和反馈，提升客户管理水平；
• 优化营销策略：客服插件可以收集客户的意见和建议，帮助企业优化营销策略，提升营销效果。

前提条件

集成 @tencentcloud/chat-uikit-vue ≥ 2.3.3 或@tencentcloud/chat-uikit-uniapp ≥ 2.3.3

如未集成，请务必先根据 Vue2 版本 TUIKit 快速集成指引、Vue3 版本 TUIKit 快速集成指引 或 uniapp 版本 TUIKit 快速集成指引 进行集成。 如已集成，请务必升级版本 ≥ 2.3.3

快速集成

步骤1：接入 chat-uikit-vue 或 chat-uikit-uniapp

已集成 @tencentcloud/chat-uikit-vue ≥ 2.3.3 / @tencentcloud/chat-uikit-uniapp ≥ 2.3.3 请忽略此步骤。 如未集成，首先请您跟随指引 Vue2 版本 TUIKit 快速集成指引、Vue3 版本 TUIKit 快速集成指引 或 uniapp 版本 TUIKit 快速集成指引的集成。 TUIKit Demo 登录成功后，如果您已经开通了客服插件，可以直接体验 Demo 的客服号 “线上商城”和 “线上医疗问诊”。

如果您需要创建属于自己的客服号，可以参见后续步骤操作。

步骤2：控制台开通客服插件

请单击 插件市场 > 客服插件 免费试用或购买插件。详情请参见：插件市场 > 概述与开通指引。

!注意： 每个插件限免费试用 1 次，有效期 7 天，试用结束后将停服，请提前购买。

步骤3：接入客服插件

通过 npm 方式下载 客服插件，为了方便您后续的拓展，建议您将客服插件复制到自己工程的目录下： 下面的复制代码为按照chat-demo 设置的路径。请按照自己的项目文件按需修改。

vue

需要将 tui-customer-service-plugin-vue 复制到与 TUIKit 同级。

// macos
npm i @tencentcloud/tui-customer-service-plugin-vue
rsync -av --exclude={'node_modules','package.json','excluded-list.txt','srcipt'} ./node_modules/@tencentcloud/tui-customer-service-plugin-vue ./src
// windows
npm i @tencentcloud/tui-customer-service-plugin-vue
xcopy .\node_modules\@tencentcloud\tui-customer-service-plugin-vue .\src /i /e /exclude:.\node_modules\@tencentcloud\tui-customer-service-plugin-vue\excluded-list.txt

uniapp

需要将 tui-customer-service-plugin-vue 复制到 TUIKit 内部，为TUIKit/tui-customer-service-plugin-uniapp。

// macos
npm i @tencentcloud/tui-customer-service-plugin-uniapp
rsync -av --exclude={'node_modules','package.json','excluded-list.txt','script'} ./node_modules/@tencentcloud/tui-customer-service-plugin-uniapp ./TUIKit
// windows
npm i @tencentcloud/tui-customer-service-plugin-uniapp
xcopy .\node_modules\@tencentcloud\tui-customer-service-plugin-uniapp .\TUIKit\tui-customer-service-plugin /i /e /exclude:.\node_modules\@tencentcloud\tui-customer-service-plugin-uniapp\excluded-list.txt

步骤4: 修改代码

1. 在app开始时给TUIStore的StoreName.CUSTOM加上一个名称为customerServiceAccounts的自定义字段。此处填写自己的客服号。智能客服的默认客服号为 @customer_service_account。

TUIStore.update(StoreName.CUSTOM, "customerServiceAccounts", []);
如： 
TUIStore.update(StoreName.CUSTOM, "customerServiceAccounts", ['@customer_service_account']);

3. 在uikit中编写一个判断当前会话是否是客服会话的方法。 将以下代码复制到TUIChat/index.vue，TUIChat/message-list/index.vue 中。

const isCustomerChat = () => {
    const customerServiceAccounts = TUIStore.getData(
    StoreName.CUSTOM,
    "customerServiceAccounts"
    );
    if (Array.isArray(customerServiceAccounts) && currentConversationID.value != undefined) 
        return customerServiceAccounts.includes(
        currentConversationID.value.replace("C2C", ""));
}

4. src/TUIKit/components/TUIChat/index.vue 修改如下代码

原：
<div :class="['tui-chat', !isPC && 'tui-chat-h5']">
修改为：
 <CustomerServiceChat
    style="height: 100%"
      v-if="isCustomerChat()"
    />
<div v-else :class="['tui-chat', !isPC && 'tui-chat-h5']">    

//vue
import {CustomerServiceChat} from '../../../tui-customer-service-plugin-vue';
//uniapp
import CustomerServiceChat from '../../tui-customer-service-plugin-uniapp/components/CustomerServiceChat/index-uniapp.vue';

5. src/TUIKit/components/TUIChat/message-list/index.vue修改onMessageListUpdated 函数的第一行添加以下代码

if(isCustomerChat()) return;

自定义客服号

详见: 在线客服插件