# 小程序卡片
# 访客发送卡片
小程序访客端支持小程序卡片消息发送,需要在客服会话消息button中增加两个字段,show-message-card显示会话内消息卡片, send-message-title会话内消息卡片标题。添加后,访客接入会话时,会出现会话页的小程序卡片的提示。
<button
type="primary"
size="40"
session-from="nickName={{userInfo.nickName}}|avatarUrl={{userInfo.avatarUrl}}|foreignid={{userInfo.foreignid}}|referrerTitle={{ysf.title}|ysf.config={{ysf.config}}"
send-message-title="{{ysf.title}}"
show-message-card="true"
open-type="contact">
点我给客服发送消息
</button>
# 客服发送卡片的接口
对接入客服工作台的小程序可以发送自定义小程序卡片消息。用户可以通过在接入的iframe页面中将数据对象按找下面规则组装好后通过postMessage的方式发送到网易七鱼的系统。
基本的实现代码如下:
var data = {
// 要发送到的卡片消息数据对象
"msgtype": "miniprogrampage",
"title":"title",
"name": "name",
"headimg": "headimg"
"pagepath":"pagepath",
"thumb_media_id":"thumb_media_id",
"thumburl": "http://****/888/1.jpg"
}
window.parent.postMessage(data, '*'); //将数据用postMessage的方式发送到七鱼
卡片消息的字段规则如下:
字段 | 类型 | 必须 | 描述 |
---|---|---|---|
title | string | 是 | 标题 |
name | string | 否 | 小程序名称,主要用于客服工作台展示 |
headimg | string | 否 | 小程序头像,主要用于客服工作台展示 |
pagepath | string | 是 | 小程序页面路径 |
thumb_media_id | string | 是 | 小程序消息卡片的封面, image类型的media_id,通过新增素材接口 (opens new window)上传图片文件获得,建议大小为520*416 |
thumburl | string | 否 | 小程序消息卡片的封面图片地址链接,主要用于展示在客服端工作台, 保证和封面id是同一个图片 |