一、功能介绍
可通过微信小程序客服组件在您的微信小程序中添加联系客服跳转功能，并且支持传递访客名称、自定义参数、访客头像、商品卡片等信息。
准备材料
*需提前准备一个已经注册好的小程序（注册地址https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN）。
二、接入方案
1.在云客服系统管理后台授权
进入后台设置，选择在线客服/渠道管理/公众号/小程序选项，并点击添加/绑定微信客服，选择微信小程序；
选择授权模式，并点击下一步；
使用微信小程序所绑定的管理员进行平台账号扫码授权；
进入后在页面内选择两个授权项进行授权，并点击确认，以及确定授权，即可完成微信小程序的授权；
2.在云客服系统管理后台进行相关配置
返回云客服系统后台界面，可进行会话流程以及消息接入规则的设置；设置完成后点击保存即可完成配置；
已经完成的小程序配置支持删除以及多次修改配置功能。
三、组件引入
1.在小程序页面配置在线客服组件
小程序开发者在需要接入在线客服的小程序中引入小程序原生客服组件contact button，组件样式可自行编写；如小程序中原本就是使用的小程序客服组件则忽略本步骤。
引入示例：
<view class="container">
<button
class="contact-btn"
open-type="contact"
>
联系客服
</button>
</view>2.引入相关参数
引入组件内属性session-from：包含来源|访客名称|头像url，在open-type="contact"时有效，长度不超过 1024 个字符，各个变量中不能包含特殊字符'|'、'#'等。如：
session-from="{{from}}|{{userInfo.nickName}}|{{userInfo.avatarUrl}}|{{customField}}"| from | String | 来源，可自行填写，在客服端聊天窗口右边对话信息处查看来源。 |
| userInfo.nickName | String | 访客名称，在会话接入坐席后坐席可以看到。 |
| userInfo.avatarUrl | String | 头像url，将小程序获取到的头像地址赋值给这个变量 |
| customField | String | 自定义字段，json对象，对象中的key-value都可以自定义，上传后可以再客服聊天窗口右边扩展信息模块查看。 |
组件接口示例：
<button
class="contact-btn"
open-type="contact"
session-from="xxxx|{{userInfo.nickName}}|{{userInfo.avatarUrl}}|{{customField}}"
send-message-title="小程序客服咨询"
send-message-path="/pages/index/index"
send-message-img="https://app.useasy.cn/assets/concise.Dv3SkdNK.png"
show-message-card="true"
>
联系客服
</button>3.小程序卡片发送
访客端示意图：
客服端示意图：
小程序卡片参数：
| send-message-title | string | 否 | 会话内消息卡片标题，open-type="contact"时有效 |
| send-message-path | string | 否 | 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 |
| send-message-img | string | 否 | 会话内消息卡片图片，open-type="contact"时有效 |
| show-message-card | boolean | 否 | 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 |
四、常见问题
1.为什么接入后在云客服平台收不到客户消息?
需要在云客服系统后台配置相关小程序时选择配置好的相关会话流程，会话流程的配置会影响客户对话后的流程，会话流程设置如下：进入云客服系统后台，选择在线客服/流程管理/新建，进入流程管理编辑页面，可进行相关会话流程的配置。
