七鱼开发文档中心
总览服务端 APIWebiOSAndroid鸿蒙Uniapp微信小程序插件三方接入
微信小程序

小程序卡片

访客发送卡片

小程序访客端支持小程序卡片消息发送,需要在客服会话消息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的方式发送到网易七鱼的系统。

参数说明

字段类型必填说明
titlestring是标题
namestring是小程序名称,主要用于客服工作台展示
headimgstring否小程序头像,主要用于客服工作台展示
pagepathstring是小程序页面路径
thumb_media_idstring是小程序消息卡片的封面, image类型的media_id,通过新增素材接口上传图片文件获得,建议大小为520*416
thumburlstring否小程序消息卡片的封面图片地址链接,主要用于展示在客服端工作台, 保证和封面id是同一个图片

代码示例

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的方式发送到七鱼

这篇文档有帮助吗?

目录