Puoi utilizzare Messaggi di Google con RCS e Google Wallet per progettare un flusso di check-in senza interruzioni: l'utente completa il check-in, riceve la carta d'imbarco e la aggiunge direttamente a Google Wallet dall'app Messaggi. Una volta nel portafoglio, la tessera viene aggiornata automaticamente se i dettagli del volo cambiano. Gli utenti possono accedere rapidamente a una carta d'imbarco aggiornata direttamente sul proprio telefono.
Questo documento descrive i passaggi tecnici per implementare una carta d'imbarco al flusso di Google Wallet. Inoltre, include una conversazione di esempio con suggerimenti di progettazione per un'esperienza di check-in fluida ed efficiente con RBM.
Implementazione tecnica
Per implementare una carta d'imbarco nel flusso di Google Wallet, lavorerai con l'API Google Wallet e l'API RBM.
Prerequisiti
Per iniziare a utilizzare l'API Google Wallet, segui questi passaggi obbligatori:
- Registrati per creare un account emittente di Wallet per poter creare e distribuire le tessere per Google Wallet.
- Se non ne hai già uno, crea un progetto Google Cloud Platform (GCP).
- Abilita l'API Google Wallet.
- Crea un account di servizio e una chiave per chiamare l'API Google Wallet.
- Autorizzare l'account di servizio in Google Pay e nella console di Wallet.
- Utilizza il modello di carta d'imbarco per creare una nuova classe d'imbarco.
API Google Wallet
Per creare una carta d'imbarco e generare un URL Aggiungi a Google Wallet per RBM, segui questi passaggi:
- Esegui le autenticazioni e le autorizzazioni necessarie.
- Crea un oggetto Pass.
- Ottenere un token JWT (JSON Web Token) firmato. La lunghezza massima di un JWT codificato è di 2048 caratteri.
- Utilizza il JWT per generare un URL Aggiungi a Google Wallet.
API RBM
Per inviare un suggerimento Aggiungi a Google Wallet da RBM, invia un'azione Apri URL. Nel payload dei messaggi, segui questi passaggi:
- Per
text, inserisci "Aggiungi a Google Wallet". - Per
url, inserisci l'URL Aggiungi a Google Wallet.
L'icona di Google Wallet verrà mostrata automaticamente sull'etichetta del suggerimento.
Progettazione di conversazioni
Questo esempio sfrutta le potenzialità uniche della conversazione per guidare gli utenti attraverso un flusso di check-in completo. Dimostra come utilizzare dialoghi naturali e funzionalità avanzate, come suggerimenti con un tocco e schede interattive, per aiutare gli utenti a raggiungere i loro obiettivi. In questo caso, i loro obiettivi sono: (1) personalizzare la mia esperienza di volo, (2) ricevere la carta d'imbarco e (3) aggiungerla a Google Wallet per accedervi facilmente in aeroporto.
Di seguito una panoramica della conversazione. Sono seguiti da suggerimenti per la progettazione e una descrizione dettagliata del flusso. Per implementare una struttura simile per l'agente, consulta gli esempi di codice riportati di seguito per i passaggi.
Consigli di progettazione
Tieni a mente questi principi quando progetti il flusso di check-in:
- Il tuo primo messaggio è il più importante. Indica brevemente lo scopo della conversazione, in modo che l'utente abbia un motivo per interagire.
- Ogni messaggio deve fornire una piccola parte di informazioni e chiedere all'utente di rispondere. Le risposte suggerite e le azioni suggerite semplificano il passaggio successivo.
- Il tuo agente deve essere reattivo, non robotizzato. Utilizza un linguaggio che rifletta il tono di voce del tuo brand. In che modo il tuo rappresentante ideale del brand chiacchiera con un cliente?
- Alle persone piace sentirsi speciali. Puoi personalizzare l'esperienza di check-in suggerindo posti o pasti in base alla cronologia dei voli dell'utente.
- Le schede interattive e i caroselli rendono la conversazione più dinamica. Utilizzale per condividere immagini e dettagli che aiuteranno l'utente a scegliere tra le opzioni disponibili.
- Una bella conversazione finisce bene. Conferma i dettagli del check-in dell'utente prima di inviare la carta d'imbarco. Aggiungi un tocco umano con una spedizione amichevole.
Flusso di check-in
L'agente notifica all'utente che il check-in del volo è aperto.
Esempio di codice
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'utente tocca una risposta suggerita per il check-in.
L'agente definisce le aspettative per la procedura di check-in.
Esempio di codice
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'agente chiede all'utente di accettare le norme sulla sicurezza.
Esempio di codice
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'utente tocca una risposta suggerita per accettare.
L'agente ringrazia l'utente e introduce il passaggio successivo.
Esempio di codice
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'agente richiede all'utente di scegliere un posto.
Esempio di codice
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'utente tocca una risposta suggerita per il posto selezionato.
L'agente conferma la scelta dell'utente.
Esempio di codice
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'agente chiede all'utente di scegliere il pasto durante il volo.
Esempio di codice
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'agente mostra le opzioni per i pasti.
Esempio di codice
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'utente tocca una risposta suggerita per il pasto che ha scelto.
L'agente conferma la scelta dell'utente.
Esempio di codice
const params = { messageText: `Vegetarian it is 💚`, msisdn: msisdn, }; let self = this; rbmApiHelper.sendMessage(params, function (response, err) { self.sendAskConfirmation(msisdn); });L'agente riassume i dettagli del check-in.
Esempio di codice
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'utente tocca una risposta suggerita per confermare i dettagli del check-in.
L'agente annuncia che il check-in è stato completato.
Esempio di codice
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'agente invia la carta d'imbarco dell'utente.
Esempio di codice
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); });In questa scheda interattiva orizzontale, l'immagine è una carta d'imbarco completamente funzionante fornita dalla compagnia aerea. L'immagine dovrebbe mostrare tutte le informazioni di imbarco necessarie, incluso un codice a barre scansionabile. Gli utenti possono semplicemente toccare l'immagine per visualizzare e scansionare la carta d'imbarco dall'app Messaggi di Google.
Nella scheda interattiva viene visualizzato un suggerimento Aggiungi a Google Wallet. Questo suggerimento attiva un'azione URL aperto che apre l'app Google Wallet, in cui l'utente può aggiungere facilmente la carta d'imbarco al proprio portafoglio. Se l'app non è installata sul dispositivo dell'utente, verrà chiesto di installarla. Una volta aggiunto il pass a Google Wallet, l'utente riceve automaticamente un promemoria di volo e un aggiornamento dello stato se i dettagli del volo cambiano.
Gli utenti che non aggiungono il pass a Google Wallet devono essere sempre aggiornati. Invia un messaggio all'utente per eventuali modifiche alle informazioni di imbarco mostrate nella scheda interattiva.
L'utente tocca un'azione suggerita per aggiungere il pass a Google Wallet.
Si apre l'app Google Wallet. L'utente tocca un pulsante per aggiungere il pass al portafoglio.
L'utente tocca un pulsante per visualizzare il proprio pass.
Viene mostrata la carta d'imbarco con codice QR.
