云联络中心
有奖捉虫：办公协同&微信生态&物联网文档专题 HOT
文档中心 > 云联络中心 > SDK 开发指南 > 集成在线客服 > 小程序

小程序

最近更新时间：2024-01-08 11:09:01

我的收藏

本页目录：

前提条件

请确认已配置在线客服，操作步骤可参见文档《快速配置在线客服》。
注意：
配置在线客服需绑定网站渠道。

选择集成方式

集成方式
说明
直接打开 TCCC 现有的小程序
一套纯 UI 的组件，在 IM UIKit 中使用，即可快速接入 TCCC IM 渠道。

方式一：直接打开 TCCC 小程序

我们提供了 TCCC 小程序，您可以直接打开，效果如图：
?
?
?
?
您可以在自己的小程序中，使用wx.navigateToMiniProgram来拉起 TCCC 小程序。请参见微信文档：打开另一个小程序?
代码示例：
const sdkAppId = '140xxxx';   // 请修改为自己的SDK APP ID。
const channelId = 'xxx';      // 您配置在线客服的“网站渠道”的网页ID
wx.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。
首先请您跟随指引 微信小程序 版本 TUIKit 快速集成指引，完成 IM UIKit 的集成。

步骤2：下载 UI 组件

通过 npm 方式下载 UI 组件。
npm i?@tencentcloud/chat-customer-service-plugin-wechat

步骤3：将npm包内容引入TUIKit

使用此 UI 组件需要使用 wxs，因此需要将 npm 包的内容移入项目中以直接引入 wxs 文件。
?
?
?

步骤4：修改 Message 渲染逻辑

在线客服的分支消息、评价消息、表单收集消息、物品卡片消息等都通过自定义消息实现，因此需要您修改自定义消息渲染的逻辑，我们以微信小程序版本 TUIKit 为例。
说明：
此代码 Demo 中的微信小程序版本 TUIKit 的版本为1.1.3。
在 TUIKit/components/TUIChat/components/MessageList 组件中，引入 UI 组件并渲染。
index.wxml
index.json
index.js
?
<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组件渲染
    <CustomerServiceMessage
      wx:if="{{item.type === 'TIMCustomElem'&&customerServicePluginTool.isCustomerServiceMessage(item)}}"
      message="{{item}}" isMine="{{item.flow === 'out'}}" bind:sendTextMessage="sendTextMessage"
      bind:clickProductCard="clickProductCard">
    </CustomerServiceMessage>
    
    /**
    * 原始代码已省略
    */
  
     // isCustomerServiceMessage判断自定义消息是否为在线客服的自定义消息，如果不是使用原始自定义消息组件渲染
    <CustomMessage
      wx: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-undef
const 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：编译小程序

请跟随微信小程序 TUIKit 集成步骤进行 编译小程序。

步骤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);
?
中国站


http://www.vxiaotou.com