前提条件
请确认已配置在线客服,操作步骤可参见文档《快速配置在线客服》。
注意:
配置在线客服需绑定网站渠道。
选择集成方式
集成方式 | 说明 |
直接打开 TCCC 现有的小程序 | |
一套纯 UI 的组件,在 IM UIKit 中使用,即可快速接入 TCCC IM 渠道。 |
方式一:直接打开 TCCC 小程序
我们提供了 TCCC 小程序,您可以直接打开,效果如图:
代码示例:
const sdkAppId = '140xxxx'; // 请修改为自己的SDK APP ID。const channelId = 'xxx'; // 您配置在线客服的“网站渠道”的网页IDwx.navigateToMiniProgram({appId: 'wxf3ac5a9dfc918430', //固定该值//**** path参数请参照后面的参数说明填写 ****path:`/pages/chat/chat?sdkAppId=${sdkAppId}&channelId=${channelId}`,success(res) {// 打开成功},fail(err) {// 打开失败},});
跳转参数说明
拉起 TCCC 联络小程序平台需要用到以下参数。
请先记录这些参数,后文将会详细介绍具体开发方式。
参数 | 值 | 备注 |
appId | wxf3ac5a9dfc918430 | 固定值 |
path | /pages/chat/chat?sdkAppId={YourAppID}&channelId={YourChannelID} | 请将具体参数值根据您的实际情况修改 |
path 参数说明
参数 | 类型 | 必填 | 备注 |
sdkAppId | String | 是 | 腾讯云联络中心应用 ID |
channelId | String | 是 | 您配置在线客服的网站渠道的网页 ID |
方式二:使用 npm 包集成
开发环境要求
JavaScript
微信开发者工具
node(12.13.0 ≤ node 版本 ≤ 17.0.0, 推荐使用 Node.js 官方 LTS 版本 16.17.0)
npm(版本请与 node 版本匹配)
步骤1:集成 Vue3 版本 TUIKit
我们以通过微信小程序版本 TUIKit 与 我们的 npm 包结合作为演示 Demo。
步骤2:下载 UI 组件
npm i @tencentcloud/chat-customer-service-plugin-wechat
步骤3:将npm包内容引入TUIKit
步骤4:修改 Message 渲染逻辑
说明:
此代码 Demo 中的微信小程序版本 TUIKit 的版本为1.1.3。
在 TUIKit/components/TUIChat/components/MessageList 组件中,引入 UI 组件并渲染。
<view class="container" id="container">/*** 原始代码已省略*/<RevokeMessage wx:if="{{item.isRevoked}}" message="{{item}}" isMine="{{item.flow === 'out'}}"bind:resendMessage="resendMessage" />// 在线客服有一些不需要渲染的标志位消息,使用isMessageInvisible过滤不渲染。<view wx:elif="{{item.type === 'TIMCustomElem'&&customerServicePluginTool.isMessageInvisible(item)}}"></view>// 在线客服中评价消息需要独占一行,因此写在消息气泡外渲染。<RatingMessage wx:elif="{{item.type === 'TIMCustomElem'&&customerServicePluginTool.isMessageRating(item)}}"message="{{item}}" isMine="{{item.flow === 'out'}}" bind:sendRatingMessage="sendRatingMessage"></RatingMessage>/*** 原始代码已省略*/<view class="{{item.flow === 'out' ? 't-self-message-body':'t-recieve-message-body'}}"catch:longpress="handleLongPress" data-index='{{index}}' data-value='{{item}}'id="{{concat.concat(conversation.type,'ID-',item.ID)}}" message-value="{{item}}">// isCustomerServiceMessage判断自定义消息是否为在线客服的自定义消息,如果是使用UI组件渲染<CustomerServiceMessagewx:if="{{item.type === 'TIMCustomElem'&&customerServicePluginTool.isCustomerServiceMessage(item)}}"message="{{item}}" isMine="{{item.flow === 'out'}}" bind:sendTextMessage="sendTextMessage"bind:clickProductCard="clickProductCard"></CustomerServiceMessage>/*** 原始代码已省略*/// isCustomerServiceMessage判断自定义消息是否为在线客服的自定义消息,如果不是使用原始自定义消息组件渲染<CustomMessagewx:if="{{item.type === 'TIMCustomElem'&&!customerServicePluginTool.isCustomerServiceMessage(item)}}"message="{{item}}" isMine="{{item.flow === 'out'}}" bindtap="handleJumpLink" data-value="{{item}}" /><FaceMessage wx:if="{{item.type === 'TIMFaceElem'}}" message="{{item}}" isMine="{{item.flow === 'out'}}" /><FileMessage wx:if="{{item.type === 'TIMFileElem'}}" message="{{item}}" isMine="{{item.flow === 'out'}}" /><MergerMessage wx:if="{{item.type === 'TIMRelayElem'}}" message="{{item}}"isMine="{{item.flow === 'out'}}" /></view>/*** 原始代码已省略*/<wxs src='./concat.wxs' module='concat' />// 引入在线客服插件的wxs文件<wxs src='../CustomerServicePlugin/pluginTool.wxs' module='customerServicePluginTool' />
{"component": true,"enablePullDownRefresh": true,"usingComponents": {"TextMessage": "../MessageElements/TextMessage/index","ImageMessage": "../MessageElements/ImageMessage/index","VideoMessage": "../MessageElements/VideoMessage/index","AudioMessage": "../MessageElements/AudioMessage/index","CustomMessage": "../MessageElements/CustomMessage/index","TipMessage": "../MessageElements/TipMessage/index","SystemMessage": "../MessageElements/SystemMessage/index","FaceMessage": "../MessageElements/FaceMessage/index","FileMessage": "../MessageElements/FileMessage/index","MergerMessage": "../MessageElements/MergerMessage/index","RevokeMessage": "../MessageElements/RevokeMessage/index",// 自定义在线客服消息组件"CustomerServiceMessage": "../CustomerServicePlugin/components/CustomerServiceMessage/index",// 在线客服评价消息组件"RatingMessage": "../CustomerServicePlugin/components/RatingMessage/index"}}
import dayjs from '../../../../utils/dayjs';import logger from '../../../../utils/logger';import constant from '../../../../utils/constant';// eslint-disable-next-line no-undefconst app = getApp();Component({/*** 原始代码已省略*/methods: {/*** 原始代码已省略*/// 在线客服组件触发发送文本消息函数sendTextMessage(e) {console.log(e);const message = wx.$TUIKit.createTextMessage({to: this.data.conversation.conversationID.replace(wx.$TUIKitTIM.TYPES.CONV_C2C, ''),conversationType: this.data.conversation.type,payload: {text: e.detail.text,},});wx.$TUIKit.sendMessage(message).then(() => {this.updateMessageList(message)})},// 在线客服组件触发点击卡片消息函数clickProductCard(e) {console.log(e.detail.url);},// 在线客服组件触发发送评价自定义消息函数sendRatingMessage(e) {const ratingMessage = wx.$TUIKit.createCustomMessage({to: this.data.conversation.conversationID.replace(wx.$TUIKitTIM.TYPES.CONV_C2C, ''),conversationType: this.data.conversation.type,payload: {data: JSON.stringify(e.detail.content),},});wx.$TUIKit.sendMessage(ratingMessage).then(() => {console.log('评价成功');})}},});
步骤5:编译小程序
步骤6:接入在线客服IM渠道
您可以参见文档《在线客服》,在云联络中心中完成即时通讯 IM 渠道的客服配置,之后建议在调用 IM SDK 对 IM 虚拟号发送消息来激活会话服务流,使客服会话加入用户的会话列表,进入会话即可完成在线客服消息 UI 组件的接入渲染。
附录:在线客服交互说明
进入聊天会话自动触发会话流
在进入在线客服虚拟号的聊天会话时,我们约定发送一条固定格式的自定义消息,用于通知在线客服后台有客户进入聊天,并通知后台触发会话流,我们以 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);