将登机牌添加到 Google 钱包

您可以通过以下应用使用 Google 信息： RCS 和 Google 钱包 设计顺畅的签到流程：用户完整填写了 办理登机手续，接收登机牌并将其直接添加到 Google “信息”应用中的钱包。进入钱包后，卡券会随之更新 。用户可以快速访问 直接在手机上查看最新的登机牌信息

本文档介绍了实现登机牌的技术步骤， Google 钱包流程。本手册还提供了一个示例对话，其中包含 顺畅高效的签到体验。

技术实现

要实现将登机牌发送到 Google 钱包的流程，您需要与 Google Wallet API 和 RBM API。

前提条件

要开始使用 Google Wallet API，请按照以下必要步骤操作：

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

Google Wallet API

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

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

RBM API

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

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

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

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

对话设计

此示例利用独特的对话功能来引导用户 完整的签到流程。它展示了如何使用自然的对话和丰富的功能， 提供一键式建议和复合搜索卡等实用功能 目标。在本例中，他们的目标是：(1) 定制我的飞行体验；(2) (3) 将登机牌添加到 Google 钱包，以便在 机场

以下是本次对话的概览。接下来是设计提示和 即流程的分步详解。要为 请参阅以下步骤下方的代码示例。

<ph type="x-smartling-placeholder">

对话示意图

设计建议

设计签到流程时，请牢记以下原则：

  • 第一条消息最为重要。简要说明 以便用户有理由进行互动
  • 每条消息都应提供一小段信息并提示用户 响应。建议的回复 和建议的操作 让用户能够轻松执行下一步操作。
  • 您的代理应该具备响应式响应能力，而不是机器人技术。使用的语言应反映您的 品牌语气理想的品牌代表会如何与 客户？
  • 人们喜欢感觉自己获得了特别礼遇。您可通过以下方式设置个性化的签到体验： 根据用户的航班记录推荐座位或餐点。
  • 复合搜索卡和轮播界面 让对话更有活力您可以使用图片库来分享图片和详细信息， 将有助于用户选择选项
  • 良好的对话会收尾。请先确认用户的所在位置详细信息 发送登机牌通过友好送去添加一些人性元素。

签到流程

  1. 代理会通知用户其航班办理登机手续。

    包含签到详情和建议的回复的问候消息

    代码示例

    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);

  2. 用户点按建议的回复来签到。

    点按签到建议

  3. 客服人员就签到流程设定了预期。

    消息状态：好的，太好了。只需 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);
});

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

    包含安全政策信息图的复合信息卡，以及表示同意或不同意的建议。卡片上的文字内容是：为帮助我们确保飞行安全，请查看我们的安全政策，并表示您同意这样做。

    代码示例

    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);

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

    点按表示同意的建议

  6. 代理感谢用户并介绍后续步骤。

    消息内容：谢谢，乘客平安无忧！后续步骤是

    代码示例

    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);
});

  7. 代理提示用户选择一个座位。

    包含座位地图信息图的复合信息卡。卡片上的文字说：舒舒服服的窝在沙发里！我们根据您的上一次航班推荐了一些座位。请选择您想要的座位，或通过输入号码告知我们您首选的座位。卡片下方的建议会显示一些座位选项

    代码示例

    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);

  8. 用户点按所选座位的建议回复。

    已点按 18A 号座位的建议

  9. 代理会确认用户的选择。

    消息状态：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);
});

  10. 代理让用户选择机上用餐。

    消息状态：现在我们来谈谈食物。您可以预订乘机餐饮。您喜欢素食主菜还是鸡肉主菜？

    代码示例

    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);
});

  11. 代理会显示用餐选项。

    复合信息卡轮播界面显示了两张卡片：一张是沙拉图片，另一张是烤鸡图片。两张卡片上都有一个食材列表和选择该餐点的建议

    代码示例

    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);

  12. 用户点按他们所选膳食的建议回复。

    已点按选择素食的建议。

  13. 代理会确认用户的选择。

    消息状态：这里是素食。

    代码示例

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

let self = this;  

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

  14. 代理汇总签到详细信息。

    消息声明：以下是我们记下的内容：您选择了 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);

  15. 用户点按建议的回复以确认签到详情。

    建议确认已点按详细信息

  16. 客服人员宣布签到已完成。

    消息状态：好哇！您现在已办理登机手续。这是您的登机牌。很高兴能尽快再次为您服务！

    代码示例

    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);       
});

  17. 代理会发送用户的登机牌。

    复合信息卡显示了一张登机牌图片，其中包含二维码和航班详细信息。卡片上的文字是：我们会让您及时了解最新动态！如果您的航班详情发生变化，您会收到通知。卡片上会显示“添加到 Google 钱包”建议

    代码示例

    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 钱包 复合搜索卡上显示的建议此建议会触发 打开网址操作 该应用会打开 Google 钱包应用，用户可以在其中添加登机牌 。（如果应用不在用户的设备上， 提示安装。）将卡券添加到 Google 钱包后，用户 会自动收到航班提醒 和状态更新 更改航班详情。

    未将卡券添加到 Google 钱包的用户也应及时获取 日期。将登机信息的任何更改告知用户 复合信息卡上显示的信息

  18. 用户点按建议操作，将卡券添加到 Google 钱包。

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

  19. 系统会打开 Google 钱包应用。用户点按按钮将卡券添加到 钱包。

    Google 钱包应用显示了一个简化的登机牌和一个显示“添加”的按钮。

  20. 用户点按按钮即可查看其卡券。

    卡券上方会显示对勾标记。系统显示“在 Google 钱包中查看”按钮。

  21. 屏幕上会显示带有二维码的登机牌。

    包含所有航班详细信息和二维码的登机牌