Skype聊天机器人可转发且按钮仍生效的Hero Card实现咨询

嗨，针对你说的「用户配置内容后转发Hero Card，希望接收者点击按钮仍能正常工作」的需求，我给你梳理几个可行的方案，都是在Messenger生态里能落地的：

核心问题分析 #

直接转发默认的Hero Card会失效，本质是因为卡片里的按钮（比如postback、web_url）默认绑定的是原用户的会话上下文，转发给新用户后，会话主体变了，按钮的动作逻辑自然无法适配新用户。所以关键是要把「配置好的内容信息」和「新用户的会话」做绑定。

最优方案：带参数的深层链接（Deep Link）+ Referral事件处理 #

这是Messenger官方推荐的分享落地方式，步骤很清晰：

1. 生成带配置参数的分享链接 #

当原用户完成内容配置后，把配置信息（比如内容ID、用户选择的选项等）编码成URL安全的字符串，拼接到你的机器人m.me链接的ref参数里。
比如：

m.me/你的机器人ID?ref=eyJjb250ZW50SWQiOiIxMjMiLCJvcHRpb24iOiJvcHRpb25BIn0=

这里的ref值是配置对象{"contentId":"123","option":"optionA"}经过URL编码后的Base64字符串（也可以直接用URL编码的JSON，Base64只是为了更简洁）。

2. 把这个链接放到Hero Card的分享按钮里 #

你可以用web_url类型的按钮，让用户点击后直接唤起Messenger的分享弹窗，或者直接把链接作为分享内容。示例伪代码：

// 生成带参数的分享链接
const userConfig = { contentId: '123', selectedOption: 'daily' };
const encodedConfig = encodeURIComponent(JSON.stringify(userConfig));
const shareDeepLink = `m.me/YourBotID?ref=${encodedConfig}`;

// 构造Hero Card
const shareHeroCard = {
  attachment: {
    type: 'template',
    payload: {
      template_type: 'hero',
      title: '邀请你参与内容配置',
      subtitle: '点击下方链接加入',
      image_url: 'https://your-domain.com/content-image.jpg',
      buttons: [
        {
          type: 'web_url',
          url: shareDeepLink,
          title: '分享给好友',
          webview_height_ratio: 'compact'
        }
      ]
    }
  }
};

3. 接收Referral事件，为新用户生成专属Hero Card #

当接收者点击分享链接打开你的机器人时，Messenger会给你的webhook发送一个referral事件，里面包含你之前传递的ref参数。你需要解析这个参数，然后为新用户生成带有正常工作按钮的Hero Card。

示例webhook处理逻辑：

app.post('/messenger-webhook', (req, res) => {
  req.body.entry.forEach(entry => {
    entry.messaging.forEach(event => {
      // 处理Referral事件
      if (event.referral) {
        try {
          // 解码配置参数
          const decodedConfig = JSON.parse(decodeURIComponent(event.referral.ref));
          const contentId = decodedConfig.contentId;
          const selectedOption = decodedConfig.selectedOption;

          // 为新用户生成专属Hero Card（按钮动作绑定当前用户会话）
          const userSpecificCard = generateUserHeroCard(contentId, selectedOption);
          // 发送卡片给新用户
          sendMessengerMessage(event.sender.id, userSpecificCard);
        } catch (err) {
          console.error('解析ref参数失败:', err);
          // 发送默认提示卡片
          sendMessengerMessage(event.sender.id, getDefaultCard());
        }
      }
    });
  });
  res.status(200).send('OK');
});

额外注意事项 #

• 参数安全：如果配置信息涉及敏感内容，建议对ref参数做签名验证，防止恶意篡改。比如在生成链接时加上签名，解析时校验签名。
• 参数长度限制：Messenger的ref参数有长度限制（大概255字符左右），所以尽量把配置信息简化，比如用内容ID代替完整内容，后端通过ID拉取详细配置。
• 测试覆盖：要测试不同场景的转发（比如iOS/Android Messenger、桌面端），确保链接能正确唤起机器人并解析参数。

内容的提问来源于stack exchange，提问作者panzi