将登机牌添加到 Google 钱包

您可以使用 Google 信息（支持 RCS）和 Google 钱包来设计顺畅的办理登机手续流程：用户完成办理登机手续后，会收到登机牌，并可直接从 Messages 应用中将其添加到 Google 钱包。添加到钱包后，如果航班详情发生变化，登机牌会自动更新。用户可以直接在手机上快速访问最新的登机牌。

本文档介绍了实现将登机牌添加到 Google 钱包的流程的技术步骤。此外，本文档还提供了一个示例对话，其中包含有关使用 RBM 打造顺畅高效的办登机手续体验的设计提示。

技术实现

如需实现将登机牌添加到 Google 钱包的流程，您需要使用 Google Wallet API 和 RBM API。

前提条件

如需开始使用 Google Wallet API，请按以下要求执行相应步骤：

注册 Google 钱包发卡机构账号，以便为 Google 钱包创建和分发卡券。
如果您还没有 Google Cloud (GCP) 项目，请创建一个。
启用 Google Wallet API。
创建服务账号和密钥，以便调用 Google Wallet API。
在 Google Pay 和 Google 钱包控制台中授权服务账号。
使用登机牌模板创建新的 Boarding 类。

Google Wallet API

如需创建登机牌并为 RBM 生成“添加到 Google 钱包”网址，请按以下步骤操作：

执行必要的身份验证和授权。
创建卡券对象。
获取已签名的 JSON Web 令牌 (JWT)。编码后的 JWT 的长度上限为 2048 个字符。
使用 JWT 生成“添加到 Google 钱包”网址。

RBM API

如需从 RBM 发送“添加到 Google 钱包”建议，请发送“打开网址”操作。在消息载荷中，请执行以下操作：

对于 text，请输入“添加到 Google 钱包”。
对于 url，请输入“添加到 Google 钱包”网址。

Google 钱包图标会自动显示在建议标签上。

“添加到 Google 钱包”建议中的 Google 钱包图标

对话设计

此示例充分利用对话的独特功能，引导用户完成整个办理登机手续流程。它展示了如何使用自然对话和丰富的功能（例如一键快捷功能建议和复合信息卡）来帮助用户实现目标。在本示例中，用户的目标是：(1) 自定义航班体验，(2) 接收登机牌，以及 (3) 将登机牌添加到 Google 钱包，以便在机场快速访问。

接下来是对对话的概述。之后是设计提示以及流程的分步说明。如需为您的代理实现类似的设计，请参阅这些步骤后面的代码示例。

对话图

设计建议

设计办理登机手续流程时，请谨记以下原则：

您的第一条消息最为重要。请简要说明对话的目的，以便用户有理由参与对话。
每条消息都应提供少量信息，并提示用户做出回应。回复建议和操作建议有助于用户采取下一步行动。
您的代理应能做出回应，而不是像机器人一样。请使用能体现您品牌语气的语言。您理想的品牌代表会如何与客户聊天？
人们喜欢感受到特殊待遇。您可以根据用户的航班记录，建议座位或餐食，从而打造个性化的办理登机手续体验。
复合搜索卡和轮播界面可让对话更具动态性。您可以使用它们来分享图片和详细信息，帮助用户在选项中做出选择。
好的对话应有好的结尾。在发送用户的登机牌之前，请确认用户的办理登机手续详细信息。添加一些人性化的元素，例如友好的送别语。

办理登机手续流程

代理通知用户，其航班已开放办理登机手续。

包含入住详情和建议回复的欢迎消息

代码示例

const suggestions = [
  {
    reply: {
      text: '⚡ Check in',
      postbackData: 'checkIn',
    },
  },
  {
    reply: {
      text: '⏰ Remind me later',
      postbackData: 'remindMe',
    },
  },
  {
    reply: {
      text: '✈️ View my flight details',
      postbackData: 'flightDetails',
    },
  },
  {
    reply: {
      text: '🔀 Change my flight',
      postbackData: 'flightChange',
    },
  },
];  

const params = {
  messageText: 'Check-in for your flight',
  messageDescription: '👏 Happy morning, Jo! Check-in is now open for your flight from London to Mumbai on ' + getFlightTime() + ' at 2:00PM. What would you like to do? ',
  msisdn: phoneNumber,
  suggestions: suggestions,
  imageUrl: getImageUrl('fly.png'),
  height: 'MEDIUM',
};  

rbmApiHelper.sendRichCard(params);

用户点按建议的回复以签到。

代理设置办理登机手续流程的预期。

消息内容为：好的，很好。只需 3 个步骤即可办理入住手续。以下是帮助您顺利完成初始配置的第一步

代码示例

const params = {
  messageText: "OK, great. It's just 3 simple steps to check in. Here's the first step to get you onboard:",
  msisdn: msisdn,
};  

let self = this;

rbmApiHelper.sendMessage(params, function (response, err) {
  self.sendPolicyImage(msisdn);
});

代理要求用户同意安全政策。

包含安全政策信息图表的丰富卡片，以及同意或不同意的建议。卡片上的文字显示：为帮助我们确保飞行安全，请查看我们的安全政策，并告知我们您同意该政策。

代码示例

const suggestions = [
  {
    reply: {
      text: 'Yes, I agree',
      postbackData: 'policy_agree',
    },
  },
  {
    reply: {
      text: "No, I don't agree",
      postbackData: 'policy_nack',
    },
  },
];  

const params = {
  messageText: 'Baggage safety policy',
  messageDescription: 'To help us ensure a safe flight, please review our safety policy and let us know you agree',
  msisdn: msisdn,
  suggestions: suggestions,
  imageUrl: getImageUrl('policyImage.png'),
  height: 'MEDIUM',
  orientation: 'HORIZONTAL',
  thumbnailImageAlignment: 'LEFT',
};  

rbmApiHelper.sendRichCard(params);

用户点按建议的回复以表示同意。

客服人员感谢用户并介绍下一步。

消息内容：谢谢！安全乘客才是快乐乘客！后续步骤

代码示例

const params = {
  messageText: "Thank you - A safe passenger is a happy passenger! Here's the next step:",
  msisdn: msisdn,
};

let self = this;

rbmApiHelper.sendMessage(params, function (response, err) {
  self.sendPlan(msisdn);
});

代理提示用户选择座位。

包含座位图信息图的复合信息卡。卡片上的文字显示：是时候放松一下，好好休息了！我们根据您的上次航班为您推荐了一些座位。选择您想要的座位，或者输入座位号告知我们您的首选座位。卡片下方的建议会显示一些座位选项

代码示例

const suggestions = [
  {
    reply: {
      text: 'View the seat map',
      postbackData: 'view_seat_map',
    },
  },
];

const outerSuggestions = [
  {
    reply: {
      text: '17A',
      postbackData: 'seat_17A',
    },
  },
  {
    reply: {
      text: '17C',
      postbackData: 'seat_17C',
    },
  },
  {
    reply: {
      text: '18A',
      postbackData: 'seat_18A',
    },
  },
  {
    reply: {
      text: 'Show me more',
      postbackData: 'more',
    },
  },
];  

const params = {
  messageText: 'Choose your seat',
  messageDescription: "It's time to sit back and get comfy! 💺 We've recommended some seats based on your last flight. Choose the one you want, or let us know your preferred seat by typing the number.",
  msisdn: msisdn,
  imageUrl: getImageUrl('seatMap.png'),
  height: 'TALL',
  orientation: 'VERTICAL',
  outerSuggestions: outerSuggestions
};  

rbmApiHelper.sendRichCard(params);

用户点按建议的回复以选择座位。

代理确认用户的选择。

消息状态：18A 座位，没问题。

代码示例

this.seatmap[msisdn] = seat;  

const params = {
  messageText: `Seat ${seat}, you got it`,
  msisdn: msisdn,
};  

let self = this;  
  rbmApiHelper.sendMessage(params, function(res) {
    self.sendFoodOptions(msisdn);
});

代理要求用户选择机上餐食。

消息状态：现在，我们来聊聊美食。您可以预订机上餐食。您是否愿意选择素食主菜或鸡肉主菜？

代码示例

const params = {
  messageText: `Now let's talk food 😋 You can pre-order your in-flight meal. Would you be happy with a vegetarian entree or a chicken entree?`,
  msisdn: msisdn,
};  

let self = this;  

rbmApiHelper.sendMessage(params, function(res) {
  self.sendFoodDetails(msisdn);
});

代理显示餐食选项。

富卡片轮播界面显示两张卡片：一张是沙拉图片，另一张是烤鸡图片。两张卡片都包含食材清单和选择相应餐点的建议

代码示例

const cardContents = [
  {
    title: 'Panzanella salad (v)',
    description: 'Ingredients: bread, lettuce, onions, tomatoes, olive oil',
    suggestions: [
      {
        reply: {
          text: 'Choose vegetarian',
          postbackData: 'veggie',
        },
      },
    ],
    media: {
      height: 'MEDIUM',
      contentInfo: {
        fileUrl: getImageUrl('salad.jpg'),
      },
    },
  },
  {
    title: 'Grilled chicken with greens',
    description: 'Ingredients: chicken, potatoes, peppers, olive oil',
    suggestions: [
      {
        reply: {
          text: 'Choose chicken',
          postbackData: 'chicken',
        },
      },
    ],
    media: {
      height: 'MEDIUM',
      contentInfo: {
        fileUrl: getImageUrl('chicken.png'),
      },
    },
  },
];  

const params = {
  msisdn: msisdn,
  cardContents: cardContents,
};  

rbmApiHelper.sendCarouselCard(params);

用户点按建议的回复以选择餐食。

代理确认用户的选择。

消息内容：素食。

代码示例

const params = {
  messageText: `Vegetarian it is 💚`,
  msisdn: msisdn,
};  

let self = this;  

rbmApiHelper.sendMessage(params, function (response, err) {
  self.sendAskConfirmation(msisdn);  
});

代理总结办理登机手续的详细信息。

消息内容：我们已记录以下信息：您选择了 18A 座位和素食餐。请确认您的选择。系统会在消息下方显示建议，以便您确认详细信息、更改餐食或更改座位。

代码示例

let seat = this.seatmap[msisdn];  

const suggestions = [
  {
    reply: {
      text: "Yes, I'm happy with that",
      postbackData: 'happy',
    },
  },
  {
    reply: {
      text: 'Change my seat',
      postbackData: 'change_seat',
    },
  },
  {
    reply: {
      text: 'Change my meal',
      postbackData: 'change_meal',
    },
  },
];

const params = {
  messageText: "Here's what we've noted down: You've opted for seat " + seat + " and a vegetarian meal. Please confirm your choices.",
  msisdn: msisdn,
  suggestions: suggestions
};  

rbmApiHelper.sendMessage(params);

用户点按建议的回复以确认办理登机手续的详细信息。

代理宣布办理登机手续已完成。

消息内容：太棒了！您现在已办理完登机手续。这是您的登机牌。我们很高兴能很快为您提供住宿！

代码示例

const params = {
  messageText: "Hooray! You're now checked in for your flight ☑️ Here's your boarding pass. We're so happy to host you soon!",
  msisdn: msisdn,
};  

let self = this;  

rbmApiHelper.sendMessage(params, function (response, err) {
  self.sendWalletPass(msisdn);       
});

代理发送用户的登机牌。
代码示例
```
this.walletHelper.createFlightPassUrl(this.seatmap[msisdn]).then((url) => {
  let suggestions = [
    {
      action: {
        text: 'Add to Google Wallet',
        postbackData: 'addToWallet',
        openUrlAction: {
          url: url
        },
      },
    },
  ];  

  const params = {
    messageText: 'HS123 LHR to BOM\nPassenger: Jo Flow',
    messageDescription: "We'll keep you up to date! You'll get a notification if your flight details change.",
    msisdn: msisdn,
    suggestions: suggestions,
    imageUrl: getImageUrl('boardingPass.png'),
    height: 'TALL',
    orientation: 'HORIZONTAL',
    thumbnailImageAlignment: 'LEFT',
  };  

  rbmApiHelper.sendRichCard(params);
}); 
```
在这张横向复合搜索卡中，图片是航空公司提供的功能齐全的登机牌。图片应显示所有必需的登机信息，包括可扫描的条形码。用户可以点按图片，以便在 Google 的 Messages 应用中查看和扫描登机牌。

注意：复合信息卡上的图片不是在 Google 钱包中创建的登机牌的预览。相反，它是航空公司创建的独立凭证。为保持一致性，复合信息卡上的卡券应与 Google 钱包中的卡券看起来一样。请使用 Google 钱包的登机牌模板作为参考。

复合搜索卡上会显示“添加到 Google 钱包 ”建议。此建议会触发 “打开网址”操作，打开 Google 钱包应用，用户可以在其中将登机牌添加到钱包。（如果用户的设备上没有该应用，系统会提示用户安装。）将凭证添加到 Google 钱包后，如果航班详情发生变化，用户会自动收到航班提醒和状态更新。

未将凭证添加到 Google 钱包的用户也应及时了解最新信息。请向用户发送消息，告知复合搜索卡上显示的登机信息有任何变化。
用户点按操作建议，将登机牌添加到 Google 钱包。
Google 钱包应用随即打开。用户点按相应按钮，将登机牌添加到钱包。
用户点按相应按钮以查看登机牌。
系统会显示带有二维码的登机牌。