小程序卡片

访客发送卡片

小程序访客端支持小程序卡片消息发送，需要在客服会话消息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是同一个图片