Bordkarte zu Google Wallet hinzufügen

Sie können Google Messages mit RCS und Google Wallet kombinieren, um einen reibungslosen Check-in-Vorgang zu gestalten: Der Nutzer führt den Check-in durch, erhält seine Bordkarte und fügt sie direkt über die Messages App zu Google Wallet hinzu. Sobald sich die Flugdetails ändern, wird die Karte automatisch aktualisiert. Nutzer haben schnellen Zugriff auf einen aktuellen Bordpass direkt auf ihrem Smartphone.

In diesem Dokument werden die technischen Schritte zur Implementierung einer Bordkarte im Google Wallet-Ablauf beschrieben. Es enthält auch ein Beispielgespräch mit Designtipps für einen reibungslosen und effizienten Check-in mit RBM.

Technische Implementierung

Wenn Sie einen Ablauf für Bordkarten zu Google Wallet implementieren möchten, verwenden Sie die Google Wallet API und die RBM API.

Vorbereitung

Führe die erforderlichen Schritte aus, um die Google Wallet API zu nutzen:

1. Registrieren Sie sich für ein Wallet-Ausstellerkonto, damit Sie Karten/Tickets für Google Wallet erstellen und verteilen können.
2. Erstellen Sie ein Google Cloud-Projekt (GCP), falls Sie noch keines haben.
3. Aktivieren Sie die Google Wallet API.
4. Erstelle ein Dienstkonto und einen Schlüssel, damit du die Google Wallet API aufrufen kannst.
5. Autorisieren Sie das Dienstkonto in der Google Pay and Wallet Console.
6. Verwenden Sie die Bordkartenvorlage, um eine neue Bordklasse zu erstellen.

Google Wallet API

So erstellst du einen Boardingpass und generierst eine „Add to Google Wallet“-URL für RBM: Folge dieser Anleitung.

1. Führen Sie die erforderlichen Authentifizierungen und Autorisierungen durch.
2. Erstellen Sie ein Karten-/Ticketobjekt.
3. Holen Sie sich ein signiertes JSON Web Token (JWT). Die maximale Länge eines codierten JWT beträgt 2.048 Zeichen.
4. Verwende das JWT, um eine „Zu Google Wallet hinzufügen“-URL zu generieren.

RBM API

Wenn du einen Vorschlag zum Hinzufügen zu Google Wallet über RBM senden möchtest, sende eine URL-Aktion öffnen. Gehen Sie in der Nachrichtennutzlast so vor:

1. Geben Sie unter text „Zu Google Wallet hinzufügen“ ein.
2. Geben Sie unter url die URL für „Zu Google Wallet hinzufügen“ ein.

Das Google Wallet-Symbol wird automatisch auf dem Label für den Vorschlag angezeigt.

Konversationsdesign

In diesem Beispiel wird die einzigartige Kraft von Konversationen genutzt, um Nutzer durch einen vollständigen Check-in-Vorgang zu führen. Es zeigt, wie Sie mithilfe von natürlichem Dialog und umfangreichen Funktionen wie Vorschlägen mit nur einem Tippen und Karten mit umfangreichen Informationen Nutzern helfen können, ihre Ziele zu erreichen. In diesem Fall sind das die Ziele: (1) Flugreise anpassen, (2) Bordkarte erhalten und (3) sie Google Wallet hinzufügen, um am Flughafen schnell darauf zugreifen zu können.

Hinweis: Dieses Beispiel stellt einen Transaktions-Use-Case in der Kategorie für die konversationelle Abrechnung dar. Bei der konversationellen Abrechnung werden alle Nachrichten, die innerhalb von 24 Stunden nach der ersten Antwort des Nutzers gesendet werden, mit einer Pauschalgebühr abgedeckt. Das bedeutet, dass du 24 Stunden lang ohne zusätzliche Kosten mit dem Nutzer in einem Hin- und Rück-Dialog über die Transaktion interagieren kannst.

Als Nächstes erhalten Sie einen Überblick über das Gespräch. Es folgen Designtipps und eine detaillierte Aufschlüsselung des Ablaufs. In den Codebeispielen nach den Schritten erfahren Sie, wie Sie ein ähnliches Design für Ihren Kundenservicemitarbeiter implementieren.

Designtipps

Beachten Sie beim Entwerfen des Check-in-Vorgangs die folgenden Prinzipien:

• Die erste Nachricht ist die wichtigste. Beschreiben Sie kurz den Zweck des Gesprächs, damit die Nutzenden einen Grund haben, sich einzubringen.
• Jede Nachricht sollte einen kleinen Teil der Informationen enthalten und den Nutzer zum Antworten auffordern. Vorgeschlagene Antworten und vorgeschlagene Aktionen helfen Nutzern beim nächsten Schritt.
• Der Bot sollte reaktionsschnell und nicht roboterartig sein. Verwenden Sie eine Sprache, die den Tonfall Ihrer Marke widerspiegelt. Wie würde Ihr idealer Markenrepräsentant mit einem Kunden chatten?
• Menschen möchten sich besonders fühlen. Sie können den Check-in personalisieren, indem Sie basierend auf dem Flugverlauf des Nutzers Sitzplätze oder Mahlzeiten vorschlagen.
• Interaktive Chat-Nachrichten und Karussells lassen die Unterhaltung dynamischer werden. Verwenden Sie sie, um Bilder und Details zu teilen, die den Nutzern bei der Auswahl der Optionen helfen.
• Ein gutes Gespräch endet gut. Bestätigen Sie die Check-in-Details des Nutzers, bevor Sie seinen Bordpass senden. Mit einem freundlichen Gruß sorgen Sie für eine persönliche Note.

Ablauf für Check-in

1. Der Kundenservicemitarbeiter informiert den Nutzer darüber, dass der Check-in für seinen Flug geöffnet ist.

   

   Codebeispiel

   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. Der Nutzer tippt auf eine vorgeschlagene Antwort, um einzuchecken.

   

3. Der Kundenservicemitarbeiter informiert den Kunden über den Check-in-Vorgang.

   

   Codebeispiel

   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. Der Kundenservicemitarbeiter bittet den Nutzer, den Sicherheitsrichtlinien zuzustimmen.

   

   Codebeispiel

   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. Der Nutzer tippt auf eine vorgeschlagene Antwort, um zuzustimmen.

   

6. Der Kundenservicemitarbeiter bedankt sich bei der Kundin und führt den nächsten Schritt aus.

   

   Codebeispiel

   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. Der Agent fordert den Nutzer auf, einen Sitzplatz auszuwählen.

   

   Codebeispiel

   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. Der Nutzer tippt auf eine vorgeschlagene Antwort für den ausgewählten Sitzplatz.

   

9. Der Kundenservicemitarbeiter bestätigt die Auswahl des Nutzers.

   

   Codebeispiel

   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. Der Kundenservicemitarbeiter bittet den Nutzer, eine Mahlzeit während des Flugs auszuwählen.

    

    Codebeispiel

    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. Der Agent zeigt die Essensoptionen an.

    

    Codebeispiel

    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. Die Nutzenden tippen auf eine vorgeschlagene Antwort für ihre ausgewählte Mahlzeit.

    

13. Der Agent bestätigt die Auswahl des Nutzers.

    

    Codebeispiel

    const params = {
      messageText: `Vegetarian it is 💚`,
      msisdn: msisdn,
    };  
    
    let self = this;  
    
    rbmApiHelper.sendMessage(params, function (response, err) {
      self.sendAskConfirmation(msisdn);  
    });
    

14. Der Kundenservicemitarbeiter fasst die Details zum Check-in zusammen.

    

    Codebeispiel

    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. Der Nutzer tippt auf eine vorgeschlagene Antwort, um die Check-in-Details zu bestätigen.

    

16. Der Kundenservicemitarbeiter teilt mit, dass der Check-in abgeschlossen ist.

    

    Codebeispiel

    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. Der Kundenservicemitarbeiter sendet den Boardingpass des Nutzers.

    

    Codebeispiel

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

    Auf dieser horizontalen Rich Card ist das Bild eine voll funktionsfähige Bordkarte der Fluggesellschaft. Das Bild muss alle erforderlichen Informationen zur Bordkarte enthalten, einschließlich eines scanbaren Barcodes. Nutzer können auf das Bild tippen, um ihre Bordkarte in der Google Messages App aufzurufen und zu scannen.

    Hinweis: Das Bild auf der Rich Card ist keine Vorschau der in Google Wallet erstellten Bordkarte. Es handelt sich vielmehr um einen eigenständigen Pass, der von der Fluggesellschaft erstellt wird. Aus Gründen der Einheitlichkeit sollte die Karte/das Ticket auf der erweiterten Karte der Karte/dem Ticket in Google Wallet entsprechen. Verwenden Sie als Referenz die Boardingpass-Vorlage von Wallet.

    Auf der Rich Card wird der Vorschlag Zu Google Wallet hinzufügen angezeigt. Dieser Vorschlag löst die Aktion „URL öffnen“ aus, wodurch die Google Wallet App geöffnet wird. Dort kann der Nutzer die Bordkarte zu seinem Wallet hinzufügen. Wenn die App nicht auf dem Gerät des Nutzers installiert ist, wird er aufgefordert, sie zu installieren. Sobald die Karte bzw. das Ticket Google Wallet hinzugefügt wurde, erhält der Nutzer automatisch eine Flugreise-Erinnerung und Statusaktualisierungen, wenn sich seine Flugdetails ändern.

    Auch Nutzer, die ihr Ticket nicht zu Google Wallet hinzufügen, sollten auf dem neuesten Stand sein. Informieren Sie den Nutzer über Änderungen an den auf der Rich Card angezeigten Informationen zur Boardingzeit.

18. Der Nutzer tippt auf eine vorgeschlagene Aktion, um die Karte bzw. das Ticket in Google Wallet hinzuzufügen.

    

19. Die Google Wallet App wird geöffnet. Der Nutzer tippt auf eine Schaltfläche, um die Karte/das Ticket seiner Wallet hinzuzufügen.

    

20. Der Nutzer tippt auf eine Schaltfläche, um seine Karte/seinen Ausweis aufzurufen.

    

21. Die Bordkarte mit QR-Code wird angezeigt.