微信小程序

最近更新时间:2024-07-12 10:05:41

我的收藏

效果展示



开发环境要求

JavaScript
微信开发者工具
node(12.13.0 ≤ node 版本 ≤ 17.0.0, 推荐使用 Node.js 官方 LTS 版本 16.17.0)
npm(版本请与 node 版本匹配)

步骤1:集成客服插件

客服插件是 Chat TUIKit 的众多插件之一,@tencentcloud/chat-uikit-wechat ≥ 2.0.2 起默认支持。
说明:

步骤2:引入客服插件

构建 npm(微信开发者工具 -> 工具 -> 构建 npm)后,修改 TUIKit/plugins/pluginsTool.wxs 文件中 miniprogram_npm/@tencentcloud/tui-customer-service-plugin-wechat/pluginsTool.wxs 的引入。
注意:
miniprogram_npm/@tencentcloud/tui-customer-service-plugin-wechat/pluginsTool.wxs 的引入路径必须为相对路径
例如:miniprogram_npm 和 TUIKit 目录为同层时,miniprogram_npm/@tencentcloud/tui-customer-service-plugin-wechat/pluginsTool.wxs 路径为 ../../miniprogram_npm/@tencentcloud/tui-customer-service-plugin-wechat/pluginTool.wxs


// miniprogram_npm/@tencentcloud/tui-customer-service-plugin-wechat/pluginsTool.wxs 引入路径必须为相对路径
var customerPluginTool = require('../../miniprogram_npm/@tencentcloud/tui-customer-service-plugin-wechat/pluginTool.wxs'); // 引入客服判断逻辑
function isPluginsMessage(message) {
if (customerPluginTool) {
return customerPluginTool.isCustomerMessage(message);
}
return false;
}
module.exports = {
isPluginsMessage: isPluginsMessage,
customerPluginTool: customerPluginTool,
};

步骤3:设置客服虚拟号 ID

说明:
客服虚拟号 ID 可以参考快速入门生成。
在您的主入口文件中,如:pages/index/index.js 中,设置客服虚拟号 ID。如下图所示:



import TUICustomerServer from "@tencentcloud/tui-customer-service-plugin-wechat/server.js";
TUICustomerServer.getInstance().setCustomerServiceAccounts(['new_customer_userID']); // 设置新的客服虚拟号 ID

步骤4: 发起您的第一条客服咨询

通过客服号 ,发起您的第一条客服咨询。








独立集成客服会话

步骤1: 完成 TUIChat 独立集成, 可参见 独立集成 TUIChat 方案

步骤2: 设置客服会话

根据 微信小程序客服集成指引 集成客服插件,将设置好的客服 userID 替换 步骤5 中的 userID。如图:





技术咨询

点此进入IM社群,享有专业工程师的支持,解决您的难题。