微信小程序

客源多支持对接绑定微信小程序，绑定完成后小程序即可发起客服会话。针对不同的功能诉求，提供两种接入方案：接入小程序原生微信聊天窗口，或通过内嵌 H5 的方式接入客源多自定义聊天窗口。

使用前提：小程序需完成微信认证，否则无法正常使用接入功能；接入前请先根据下方对比选择聊天窗口方案。

一、功能简介

两种方案各有侧重，主要差异如下：

对比项 小程序原生聊天窗口 自定义聊天窗口（H5）
界面体验 与微信聊天界面一致，用户零学习成本 主题颜色可自定义，支持预设问题、用户输入引导等功能
消息类型 仅支持文本和图片，视频、智能菜单、语音等常用类型均不支持 支持全部消息类型
欢迎语触发 需用户发送首条消息后才显示欢迎语并通知客服端 进入聊天页面立即自动发送欢迎语并通知客服，支持先发消息引导用户
消息通知 用户关闭小程序后，消息通知仍能及时送达（以折叠形式显示在微信对话列表） 用户离开自定义聊天页面后，新消息无法通知
回复限制 用户发送消息后须在 48 小时内回复，且连续回复最多 5 条，频繁连续回复会导致消息无法发送 无微信原生回复限制

方案选择建议：更看重消息必达、用户习惯统一，选择原生聊天窗口；更看重客服功能丰富与主动触达，选择自定义聊天窗口。本篇文章将分别讲解两种方案的接入步骤。

二、方案一：接入小程序原生聊天窗口

1. 扫码绑定小程序

电脑端登录客服工作台，进入「接入 - 微信小程序」页面，点击【+接入】按钮，支持【扫码接入】和【手动接入】两种方式，推荐使用扫码接入。

绑定时请仔细选择对应的微信小程序（很多企业同时拥有多个公众号和小程序），权限需要全部勾选；在手机端完成授权后，页面会自动跳转回客服工作台，并显示已绑定的微信小程序。

2. 添加客服按钮代码

需要企业的小程序技术维护人员，在小程序中添加聊天按钮代码，并通过 session-from 传递用户资料：

// 传递用户资料
var params={
        userinfo:{
            nickName:"米联科技",
            avatarUrl: "https://wx.qlogo",
            gender: '2'
        },
        tagid: 1002,
        keyword:'你好',
        ctag:'自定义内容',
        groupid:3,
        form: JSON.stringify({自定义字段1:'字段值',自定义字段2:'字段值',自定义字段3:'字段值',自定义字段4:'字段值',自定义字段5:'字段值'}), // 自定义表单
};

var sessions=encodeURIComponent(JSON.stringify(params));

<button open-type="contact" session-from="{{sessions}}">联系客服</button>

聊天按钮可以传递微信用户的头像、昵称等信息，具体参数含义如下：

参数 说明
userinfo.nickName 用户昵称
userinfo.avatarUrl 用户头像
userinfo.gender 性别：1 代表男，2 代表女
tagid 指定客服接待，取值为客服工号
keyword 指定回复内容
ctag 自定义参数，取值为自定义内容
groupid 指定客服组接待，取值为客服组 ID（客服组 ID 可以在聊天连接中得到）
form 自定义创建的表单信息

3. 完成高级配置

在「接入 - 微信小程序」页面的【微信小程序列表】模块中找到对应数据，点击【查看配置】按钮即可弹出配置框。

按以下步骤完成配置：

  1. 将 RequestURL 合法域名（服务器地址）配置到小程序后台「设置 - 开发设置 - 服务器域名」的【request合法域名】中；
  2. 点击【立即下载】文字链接下载 SDK，将解压得到的 pages 和 utils 文件夹拷贝到小程序目录下；
  3. 使用编辑器打开 mdk_config.js 文件，修改 accountid、appid、request、getlocation 配置；
  4. 使用编辑器打开小程序 app.js 文件，在文件顶部（其他代码之前）添加统计代码引用。
exports.accountid = '';        // 账号id
exports.appid = '';            // 小程序Appid
exports.request = '';          // request合法域名
exports.getlocation = false;   // 是否授权获取地理位置，默认是不授权
var stat = require('utils/mdk_stat.js')

4. 发消息测试

配置完成后，使用个人微信进入小程序，点击【联系客服】按钮，将跳转到小程序原生微信聊天窗口，发送消息进行测试。客服工作台收到消息即代表对接成功。

如需更多功能设置，可在【微信小程序列表】中点击【管理】按钮进行配置。

三、方案二：接入自定义聊天窗口（H5 对话链接）

1. 创建链接型接待组件

电脑端登录客服工作台，在「接入 - 网站」页面中点击【添加接待组件】按钮，组件类型选择链接型。

2. 嵌入小程序并配置业务域名

  1. 将生成的 H5 网页链接，通过小程序的 webview 组件进行嵌入；
  2. 将链接的域名加入到小程序业务域名中，该链接才可在小程序内正常访问：登录小程序平台添加业务域名，并将生成的校验文件发给客源多官网客服，协助完成业务域名验证。

在小程序内能够正常访问 H5 聊天页面即代表对接成功。之后企业可按照业务需求，在客服工作台继续设置其他相关功能。

四、接入后管理

客源多为微信小程序提供以下管理能力：

  • 智能互动
    自动回复：关键词回复、收到消息回复。
  • 素材管理
    包括图片素材、图文素材、小程序卡片，企业可事先添加好各类素材，设置具体消息内容时可直接引用。
相关文档：网站接入（链接型组件的创建）、微信公众号、微信客服
本篇目录