Ajouter une carte d'embarquement à Google Wallet

Vous pouvez utiliser Google Messages avec RCS et Google Wallet pour créer un processus d'enregistrement simplifié : l'utilisateur s'enregistre, reçoit sa carte d'embarquement et l'ajoute directement à Google Wallet depuis l'application Messages. Une fois la carte dans son portefeuille, elle se met à jour automatiquement si les informations du vol changent. Les utilisateurs ont un accès rapide à une carte d'embarquement à jour directement sur leur téléphone.

Ce document décrit les étapes techniques à suivre pour ajouter une carte d'embarquement à Google Wallet. Il inclut également un exemple de conversation avec des conseils de conception pour une expérience d'enregistrement fluide et efficace avec RBM.

Implémentation technique

Pour implémenter un flux de carte d'embarquement vers Google Wallet, vous devez utiliser l'API Google Wallet et l'API RBM.

Prérequis

Pour commencer à utiliser l'API Google Wallet, suivez les étapes obligatoires suivantes :

Inscrivez-vous pour obtenir un compte d'émetteur Wallet afin de pouvoir créer et distribuer des cartes pour Google Wallet.
Créez un projet Google Cloud (GCP) si vous n'en avez pas encore.
Activez l'API Google Wallet.
Créez un compte de service et une clé pour pouvoir appeler l'API Google Wallet.
Autorisez le compte de service dans la Google Pay and Wallet Console.
Utilisez le modèle de carte d'embarquement pour créer une classe Boarding.

API Google Wallet

Pour créer une carte d'embarquement et générer une URL "Ajouter à Google Wallet" pour RBM, suivez ces étapes :

Effectuez les authentifications et autorisations nécessaires.
Créez un objet Cartes.
Obtenez un jeton Web JSON (JWT) signé. La longueur maximale d'un jeton JWT encodé est de 2 048 caractères.
Utilisez le jeton JWT pour générer une URL d'ajout à Google Wallet.

API RBM

Pour envoyer une suggestion "Ajouter à Google Wallet" depuis RBM, envoyez une action d'ouverture d'URL. Dans la charge utile du message, procédez comme suit :

Pour text, saisissez "Ajouter à Google Wallet".
Pour url, saisissez l'URL "Ajouter à Google Wallet".

L'icône Google Wallet s'affiche automatiquement sur le libellé de la suggestion.

Icône Google Wallet sur la suggestion "Ajouter à Google Wallet"

Conception de conversations

Cet exemple utilise le pouvoir unique de la conversation pour guider les utilisateurs tout au long d'un flux d'enregistrement complet. Il montre comment utiliser le dialogue naturel et les fonctionnalités enrichies, comme les suggestions en un clic et les cartes enrichies, pour aider les utilisateurs à atteindre leurs objectifs. Dans ce cas, leurs objectifs sont les suivants : (1) personnaliser mon expérience de vol, (2) recevoir ma carte d'embarquement et (3) l'ajouter à Google Wallet pour y accéder rapidement à l'aéroport.

Ensuite, vous trouverez un aperçu de la conversation. Vous trouverez ensuite des conseils de conception et une présentation détaillée du flux. Pour implémenter une conception similaire pour votre agent, consultez les exemples de code suivant les étapes.

Diagramme de conversation

Conseils de conception

Gardez ces principes à l'esprit lorsque vous concevez votre flux d'enregistrement :

Votre premier message est le plus important. Indiquez brièvement l'objectif de la conversation pour donner à l'utilisateur une raison de s'engager.
Chaque message doit fournir une petite partie d'informations et inviter l'utilisateur à répondre. Les réponses suggérées et les actions suggérées aident les utilisateurs à passer à l'étape suivante.
Votre agent doit être réactif, et non robotique. Utilisez un langage qui reflète le ton de votre marque. Comment votre représentant de marque idéal discuterait-il avec un client ?
Les gens aiment se sentir spéciaux. Vous pouvez personnaliser l'expérience d'enregistrement en suggérant des sièges ou des repas en fonction de l'historique de vols de l'utilisateur.
Les cartes enrichies et les carrousels rendent la conversation plus dynamique. Utilisez-les pour partager des images et des informations qui aideront l'utilisateur à choisir parmi les options.
Une bonne conversation se termine bien. Vérifiez les informations d'enregistrement de l'utilisateur avant de lui envoyer sa carte d'embarquement. Ajoutez une touche humaine en concluant votre message de manière chaleureuse.

Processus d'enregistrement

L'agent informe l'utilisateur que l'enregistrement pour son vol est ouvert.

Message d'accueil avec des informations sur l'enregistrement et des suggestions de réponses

Exemple de code

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

L'utilisateur appuie sur une réponse suggérée pour s'enregistrer.

L'agent définit les attentes concernant la procédure d'enregistrement.

Le message indique : "Parfait." Il vous suffit de suivre trois étapes pour vous enregistrer. Voici la première étape à suivre pour commencer

Exemple de code

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

L'agent demande à l'utilisateur d'accepter les règles de sécurité.

Carte enrichie avec une infographie sur le règlement de sécurité et des suggestions pour accepter ou refuser. Le texte sur la carte indique : "Pour nous aider à assurer un vol sûr, consultez notre règlement de sécurité et indiquez-nous que vous l'acceptez."

Exemple de code

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

L'utilisateur appuie sur une suggestion de réponse pour accepter.

L'agent remercie l'utilisateur et lui indique la prochaine étape.

Le message indique : "Merci, un passager en sécurité est un passager heureux !" Voici l'étape suivante

Exemple de code

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

L'agent invite l'utilisateur à choisir un siège.

Carte enrichie avec une infographie du plan de salle. Le texte sur la carte indique : "Il est temps de vous asseoir et de vous détendre !" Nous vous avons recommandé des sièges en fonction de votre dernier vol. Choisissez celui qui vous convient ou indiquez-nous votre place préférée en saisissant le numéro. Les suggestions qui suivent la fiche présentent quelques options de places assises.

Exemple de code

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

L'utilisateur appuie sur une suggestion de réponse pour la place de son choix.

L'agent confirme le choix de l'utilisateur.

Message : Siège 18A, c'est noté.

Exemple de code

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

L'agent demande à l'utilisateur de choisir son repas en vol.

Le message indique : "Parlons maintenant de nourriture." Vous pouvez précommander votre repas en vol. Souhaiteriez-vous un plat végétarien ou un plat à base de poulet ?

Exemple de code

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

L'agent présente les options de repas.

Carrousel de fiches enrichies montrant deux fiches : l'une avec une image de salade et l'autre avec une image de poulet rôti. Les deux cartes contiennent une liste d'ingrédients et une suggestion de choisir ce repas.

Exemple de code

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

L'utilisateur appuie sur une suggestion de réponse pour le repas de son choix.

L'agent confirme le choix de l'utilisateur.

Le message indique : "Végétarien, c'est parti !"

Exemple de code

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

let self = this;  

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

L'agent résume les informations d'enregistrement.

Le message indique : Voici ce que nous avons noté : Vous avez choisi le siège 18A et un repas végétarien. Veuillez confirmer vos choix. Des suggestions s'affichent sous le message pour confirmer les détails, modifier le repas ou changer de siège.

Exemple de code

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

L'utilisateur appuie sur une réponse suggérée pour confirmer les détails de l'enregistrement.

L'agent annonce que l'enregistrement est terminé.

Le message indique : Bravo ! Vous êtes maintenant enregistré pour votre vol. Voici votre carte d'embarquement. Nous sommes ravis de vous accueillir bientôt !

Exemple de code

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

L'agent envoie la carte d'embarquement de l'utilisateur.
Exemple de code
```
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);
}); 
```
Dans cette carte enrichie horizontale, l'image est une carte d'embarquement entièrement fonctionnelle fournie par la compagnie aérienne. L'image doit afficher toutes les informations d'embarquement nécessaires, y compris un code-barres pouvant être scanné. Les utilisateurs peuvent appuyer sur l'image pour afficher et scanner leur carte d'embarquement depuis l'application Messages de Google.

Remarque : L'image sur la fiche enrichie n'est pas un aperçu de la carte d'embarquement créée dans Google Wallet. Il s'agit d'un pass autonome créé par la compagnie aérienne. Pour plus de cohérence, le pass affiché sur la carte enrichie doit ressembler à celui dans Google Wallet. Utilisez le modèle de carte d'embarquement de Wallet comme référence.

Une suggestion Ajouter à Google Wallet s'affiche sur la fiche enrichie. Cette suggestion déclenche une action d'ouverture d'URL qui ouvre l'application Google Wallet, où l'utilisateur peut ajouter la carte d'embarquement à son portefeuille. (Si l'application n'est pas installée sur l'appareil de l'utilisateur, il est invité à l'installer.) Une fois la carte ajoutée à Google Wallet, l'utilisateur reçoit automatiquement un rappel de vol et des mises à jour de l'état si les informations de son vol changent.

Les utilisateurs qui n'ajoutent pas leur carte à Google Wallet doivent également être tenus informés. Envoyez un message à l'utilisateur concernant toute modification des informations d'embarquement affichées sur la fiche enrichie.
L'utilisateur appuie sur une action suggérée pour ajouter la carte à Google Wallet.
L'application Google Wallet s'ouvre. L'utilisateur appuie sur un bouton pour ajouter la carte à son portefeuille.
L'utilisateur appuie sur un bouton pour afficher son pass.
La carte d'embarquement avec le code QR s'affiche.

Ajouter une carte d'embarquement à Google Wallet Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Implémentation technique

Prérequis

API Google Wallet

API RBM

Conception de conversations

Conseils de conception

Processus d'enregistrement

Exemple de code

Exemple de code

Exemple de code

Exemple de code

Exemple de code

Exemple de code

Exemple de code

Exemple de code

Exemple de code

Exemple de code

Exemple de code

Exemple de code

Ajouter une carte d'embarquement à Google Wallet