前提条件
选择集成方式
集成方式 | 说明 |
无需开发，直接复制一行代码，在网页中嵌入客服按钮 | |
无需开发，直接复制链接，将链接投放到任意入口 | |
客服插件是 Chat TUIKit 的众多插件之一，集成后实现打开即用 |
方式一：内嵌客服按钮
效果如下图所示，在网页右下角展示一个客服按钮，用户点击即可与客服聊天。
?
您可以按以下步骤配置使用：
1. 在配置好的网站渠道中，单击接入方式。
?
2. 复制内嵌插件的代码。
?
3. 由前端开发将复制好的代码放入需要嵌入的 HTML 中。
方式二：直接使用链接
效果如下图所示，支持 PC 和 H5。
?
您可以按以下步骤配置使用：
1. 在配置好的网站渠道，单击接入方式。
?
2. 复制链接。
?
3. 将链接投放到任意入口。
说明：
Android 系统的 WebView 初始功能并不具备完备的浏览器能力。在线客服网站使用了
Cookie、LocalStoreage、文件上传、文件下载等需要浏览器交互的功能。因此需要将以上功能在 WebView 中实现，请参见文档 Android & iOS。方式三：使用客服插件集成
开发环境要求
Vue ( 全面支持 Vue2 & Vue3 ， 请您在下方接入时选择您所匹配的 Vue 版本接入指引进行接入)
TypeScript
sass（sass-loader 版本 ≤ 10.1.1）
node（node.js ≥ 16.0.0）
npm（版本请与 node 版本匹配）
步骤1：集成 Vue 版本 Chat TUIKit
步骤2：开通客服插件
注意：
每个插件限免费试用 1 次，有效期 7 天，试用结束后将停服，请提前购买。
步骤3：自定义客服号
第一步：登录客服管理端
?
第二步：添加客服
?
第三步：配置技能组
技能组是用来区分不同职能的客服，您可以根据业务需求，将客服人员添加进不同的技能组。
若不需要对客服人员分组，则创建一个技能组并添加全部客服即可。
1. 左侧导航栏单击在线客服 > 技能组管理进入技能组管理页面，单击添加技能组，创建用于接待用户咨询的技能组。
?
2. 单击编辑，将客服添加进技能组。技能组管理的其他操作，可参见文档 技能组管理。
第四步：创建会话服务流
会话服务流是当用户进入在线客服服务时的引导流程，可设定向用户发送欢迎语，导航等。
您可以在会话服务流中配置分支、转人工等功能。
1. 左侧导航栏单击在线客服 > 会话服务流管理进入会话服务流管理页面，在页面左上角单击新建。
2. 输入会话服务流名称：在会话服务流画布左上角输入会话服务流名称，例如：在线会话接待。
?
3. 连接模块：根据您的场景需要拖拽相应模块到画布区域合适的位置释放，连接模块并在各个模块填写相应信息（具体可参见 会话服务流模块）。每个会话服务流程必须以开始模块为第一个模块，以结束模块为最后一个模块。
?
4. 保存会话服务流配置完成后在画布右上角单击保存后回到会话服务流列表。
第五步：配置即时通信 IM 渠道
1. 进入渠道管理页面选择即时通信 IM 渠道，单击添加 IM 客服虚拟号。
?
2. 在弹出的窗口中设置头像、名称，并关联已创建的会话服务流。
?
第六步：获取客服虚拟号 userID，并设置新的客服号
在创建 IM 客服虚拟号后，您可以在客服虚拟号列表中看到对应 SDKAppID 中虚拟号的 IM userID。
?
步骤4：引入客服插件并设置客服号
在您的主入口文件中，如：main.ts 中，引入客服插件并设置客服号。如下图所示：
?
?
import { setCustomerServiceAccounts } from "@tencentcloud/tui-customer-service-plugin";?setCustomerServiceAccounts(['new_customer_userID']) // 设置新的客服号
步骤5：启动项目
npm run serve
步骤6：发起您的第一条客服咨询
通过 TUIContact 的客服号列表，进入客服号详情，点击发送消息，发起您的第一条客服咨询。
?
附录：在线客服交互说明
进入聊天会话自动触发会话流
在进入在线客服虚拟号的聊天会话时，我们约定发送一条固定格式的自定义消息，用于通知在线客服后台有客户进入聊天，并通知后台触发会话流，我们以 IM Web SDK 为例。
?
// 在进入在线客服虚拟号的聊天时创建自定义消息并发送。const startMessage = tim.createCustomMessage({to: 客服虚拟号 UserID,conversationType: TIM.TYPES.CONV_C2C,payload: {data: JSON.stringify({customerServicePlugin: 0,src: "7",}),},});tim.sendMessage(startMessage);
客服端输入状态
当座席端在输入消息时会自动发送一条约定好类型的自定义消息，用于标识座席端客服正在输入，用户端可在检测收到此消息时显示座席端的正在输入状态。
let onMessageReceived = function(event) {// event.data - 存储 Message 对象的数组 - [Message]export const isTyping = (message: Message) => {if ((message?.type === TIM?.TYPES?.MSG_CUSTOM &&(JSON.parse(message?.payload?.data)?.src === '12'))) {// 正在输入return true} else {return true}}};tim.on(TIM.EVENT.MESSAGE_RECEIVED, onMessageReceived);
发送卡片消息
用户端可以通过发送自定义消息，发送商品卡片类型的消息。卡片消息支持点击跳转新网页。
?
// 在进入在线客服虚拟号的聊天后创建卡片消息并发送。const cardMessage = tim.createCustomMessage({to: 客服虚拟号 UserID,conversationType: TIM.TYPES.CONV_C2C,payload: {data: JSON.stringify({customerServicePlugin: 0,src: "22",content: {header: 上方的文字描述,desc: 橙色文字描述,pic: 图片url,url: 点击跳转url}}),},});tim.sendMessage(cardMessage);
用户主动评价客服
当会话流绑定的评价消息有用户可主动评价时，可以发送一条约定好类型的自定义消息，发送后服务端会在此会话下发评价消息用于用户主动评价客服。
?
// 在进入在线客服虚拟号的聊天后创建拉取评价消息并发送。const userSatisfactionMessage = tim.createCustomMessage({to: 客服虚拟号 UserID,conversationType: TIM.TYPES.CONV_C2C,payload: {data: JSON.stringify({customerServicePlugin: 0,src: "24",}),},});tim.sendMessage(userSatisfactionMessage);
?
