Vous pouvez utiliser Messages par Google avec RCS et Google Wallet pour créer un flux d'enregistrement fluide: l'utilisateur termine son enregistrement, reçoit sa carte d'embarquement et l'ajoute directement à Google Wallet à partir de l'application Messages. Une fois dans son portefeuille, la carte est automatiquement mise à jour si les détails du vol changent. Les utilisateurs ont rapidement accès à une carte d'embarquement à jour directement sur leur téléphone.
Ce document décrit les étapes techniques de mise en œuvre d'une carte d'embarquement dans Google Wallet. Il propose également un exemple de conversation avec des conseils de conception pour une expérience d'enregistrement fluide et efficace avec le RBM.
Implémentation technique
Pour implémenter une carte d'embarquement dans Google Wallet, vous utiliserez l'API Google Wallet et l'API RBM.
Prérequis
Pour commencer à utiliser l'API Google Wallet, suivez ces étapes obligatoires:
- Inscrivez-vous à un compte d'émetteur Wallet pour créer et distribuer des cartes pour Google Wallet.
- Créez un projet Google Cloud Platform (GCP) si vous n'en avez pas déjà un.
- 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 console Google Pay et Wallet.
- Utilisez le modèle de carte d'embarquement pour créer une classe de carte d'embarquement.
API Google Wallet
Pour créer une carte d'embarquement et générer une URL d'ajout à Google Wallet pour le service RBM, suivez ces étapes:
- Effectuez les authentifications et les 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 d'ajout à Google Wallet depuis le service RBM, envoyez une action d'ouverture d'URL. Dans la charge utile du message, procédez comme suit:
- Pour
text, saisissez "Add to Google Wallet". - Pour
url, saisissez l'URL d'ajout à Google Wallet.
L'icône Google Wallet s'affiche automatiquement sur le libellé de la suggestion.
Concevoir une conversation
Cet exemple utilise le pouvoir unique de la conversation pour guider les utilisateurs tout au long d'un processus d'enregistrement complet. Il montre comment utiliser la boîte de dialogue naturelle et des fonctionnalités enrichies, comme les suggestions en un seul geste et les cartes enrichies, pour aider les utilisateurs à atteindre leurs objectifs. Dans ce cas, les 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 facilement à l'aéroport.
Voici un aperçu de la conversation. Elle est suivie de conseils de conception et d'une répartition détaillée du flux. Pour implémenter une conception similaire pour votre agent, consultez les exemples de code ci-dessous.
Conseils de conception
Tenez compte de ces principes lorsque vous concevez votre parcours d'arrivée:
- Votre premier message est le plus important. Expliquez brièvement l'objectif de la conversation pour que l'utilisateur ait une raison d'interagir.
- Chaque message doit fournir un petit fragment d'informations et inviter l'utilisateur à répondre. Les réponses suggérées et les actions suggérées permettent de passer facilement à l'étape suivante.
- Votre agent doit être réactif, et non robotisé. 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 uniques. Vous pouvez personnaliser l'expérience d'arrivée en suggérant des sièges ou des repas en fonction de l'historique des vols de l'utilisateur.
- Les cartes enrichies et les carrousels rendent la conversation plus dynamique. Utilisez-les pour partager des images et des détails qui aideront l'utilisateur à choisir parmi les options.
- Une bonne conversation se termine bien. Confirmez les informations d'enregistrement de l'utilisateur avant d'envoyer sa carte d'embarquement. Apportez une touche humaine à votre personnel.
Flux d'arrivée
L'agent informe l'utilisateur que l'enregistrement de son vol est ouvert.
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 la réponse suggérée pour se connecter.
L'agent définit les attentes concernant le processus d'enregistrement.
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é.
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 réponse suggérée pour accepter.
L'agent remercie l'utilisateur et présente 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.
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 la suggestion de réponse pour le siège choisi.
L'agent confirme le choix de l'utilisateur.
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 cours de vol.
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 affiche les options de 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 la réponse suggérée pour le repas choisi.
L'agent confirme le choix de l'utilisateur.
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écapitule les informations concernant l'arrivée.
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 informations d'arrivée.
L'agent annonce que l'arrivée est terminée.
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); });Sur 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 lisible. Il suffit aux clients d'appuyer sur l'image pour afficher et scanner leur carte d'embarquement à partir de l'application Messages de Google.
Une suggestion Ajouter à Google Wallet s'affiche sur la carte enrichie. Cette suggestion déclenche une action Ouvrir l'URL qui ouvre l'application Google Wallet, où l'utilisateur peut facilement 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 d'état si les détails du vol changent.
Les utilisateurs qui n'ajoutent pas leur carte à Google Wallet doivent également être tenus à jour. Envoyez un message à l'utilisateur en cas de modification des informations d'embarquement affichées sur la carte 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 sa carte.
La carte d'embarquement contenant le code QR s'affiche.
