Gathering detailed insights and metrics for @tencentcloud/tui-customer-service-plugin-vue
Gathering detailed insights and metrics for @tencentcloud/tui-customer-service-plugin-vue
Installations
npm install @tencentcloud/tui-customer-service-plugin-vueDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
16.17.0
NPM Version
8.15.0
Releases
Unable to fetch releases
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
Maintainers
16
Package Meta Information
Latest Version
1.0.2
Package Id
@tencentcloud/tui-customer-service-plugin-vue@1.0.2
Unpacked Size
1.58 MB
Size
480.45 kB
File Count
350
NPM Version
8.15.0
Node Version
16.17.0
Published on
Jan 14, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
24
@opentelemetry/api-logs@opentelemetry/exporter-logs-otlp-http@opentelemetry/resources@opentelemetry/sdk-logs@tencentcloud/chat-uikit-engine@tencentcloud/tui-core@tencentcloud/tui-emoji-plugin@tencentcloud/universal-api@tiptap/core@tiptap/extension-document@tiptap/extension-image@tiptap/extension-mention@tiptap/extension-paragraph@tiptap/extension-placeholder@tiptap/extension-text@tiptap/pm@tiptap/suggestion@types/lodash@vue/composition-apidayjslodashmarkedmp-htmlvue-clipboard3
Peer Dependencies
3
简介
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 同级。
1// macos 2npm i @tencentcloud/tui-customer-service-plugin-vue 3rsync -av --exclude={'node_modules','package.json','excluded-list.txt','srcipt'} ./node_modules/@tencentcloud/tui-customer-service-plugin-vue ./src 4// windows 5npm i @tencentcloud/tui-customer-service-plugin-vue 6xcopy .\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。
1// macos 2npm i @tencentcloud/tui-customer-service-plugin-uniapp 3rsync -av --exclude={'node_modules','package.json','excluded-list.txt','script'} ./node_modules/@tencentcloud/tui-customer-service-plugin-uniapp ./TUIKit 4// windows 5npm i @tencentcloud/tui-customer-service-plugin-uniapp 6xcopy .\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: 修改代码
- 在app开始时给TUIStore的StoreName.CUSTOM加上一个名称为customerServiceAccounts的自定义字段。此处填写自己的客服号。智能客服的默认客服号为
@customer_service_account。
1TUIStore.update(StoreName.CUSTOM, "customerServiceAccounts", []); 2如： 3TUIStore.update(StoreName.CUSTOM, "customerServiceAccounts", ['@customer_service_account']);
- 在uikit中编写一个判断当前会话是否是客服会话的方法。 将以下代码复制到TUIChat/index.vue，TUIChat/message-list/index.vue 中。
1const isCustomerChat = () => {
2 const customerServiceAccounts = TUIStore.getData(
3 StoreName.CUSTOM,
4 "customerServiceAccounts"
5 );
6 if (Array.isArray(customerServiceAccounts) && currentConversationID.value != undefined)
7 return customerServiceAccounts.includes(
8 currentConversationID.value.replace("C2C", ""));
9}- src/TUIKit/components/TUIChat/index.vue 修改如下代码
1原： 2<div :class="['tui-chat', !isPC && 'tui-chat-h5']"> 3修改为： 4 <CustomerServiceChat 5 style="height: 100%" 6 v-if="isCustomerChat()" 7 /> 8<div v-else :class="['tui-chat', !isPC && 'tui-chat-h5']">
1//vue 2import {CustomerServiceChat} from '../../../tui-customer-service-plugin-vue'; 3//uniapp 4import CustomerServiceChat from '../../tui-customer-service-plugin-uniapp/components/CustomerServiceChat/index-uniapp.vue';
- src/TUIKit/components/TUIChat/message-list/index.vue修改onMessageListUpdated 函数的第一行添加以下代码
1if(isCustomerChat()) return;
自定义客服号
详见: 在线客服插件
No vulnerabilities found.
No security vulnerabilities found.