Bordkarte zu Google Wallet hinzufügen

Mit Google Messages, RCS und Google Wallet können Sie einen reibungslosen Ablauf für den Check-in gestalten: Der Nutzer führt den Check-in aus, erhält seine Bordkarte und fügt sie direkt aus der Messages App zu Google Wallet hinzu. Dort wird die Karte automatisch aktualisiert, wenn sich die Flugdetails ändern. Nutzer haben so schnell Zugriff auf eine aktuelle Bordkarte auf ihrem Smartphone.

In diesem Dokument werden die technischen Schritte zur Implementierung eines Ablaufs für die Bordkarte in Google Wallet beschrieben. Außerdem finden Sie ein Beispiel für eine Unterhaltung mit Designtipps für einen reibungslosen und effizienten Check-in mit RBM.

Technische Implementierung

Um einen Ablauf für die Bordkarte in Google Wallet zu implementieren, arbeiten Sie mit der Google Wallet API und der RBM API.

Vorbereitung

So legen Sie mit der Google Wallet API los: Folgen Sie diesen erforderlichen Schritten:

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, falls Sie noch keines haben.
3. Aktivieren Sie die Google Wallet API.
4. Erstellen Sie ein Dienstkonto und einen Schlüssel, damit Sie die Google Wallet API aufrufen können.
5. Autorisieren Sie das Dienstkonto in der Google Pay and Wallet Console.
6. Verwenden Sie die Vorlage für Bordkarten, um eine neue Bordkartenklasse zu erstellen.

Google Wallet API

So erstellen Sie eine Bordkarte und generieren eine „Zu Google Wallet hinzufügen“-URL für RBM: Gehen Sie wie folgt vor:

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

RBM API

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

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

Das Google Wallet-Symbol wird automatisch auf dem Vorschlagslabel angezeigt.

Unterhaltung gestalten

In diesem Beispiel wird die einzigartige Leistungsfähigkeit von Unterhaltungen genutzt, um Nutzer durch einen vollständigen Check-in-Ablauf zu führen. Es wird gezeigt, wie Sie natürliche Dialoge und umfangreiche Funktionen wie Vorschläge mit einem Fingertipp und interaktive Chat-Nachrichten verwenden können, um Nutzern zu helfen, ihre Ziele zu erreichen. In diesem Fall sind die Ziele: (1) Flug anpassen, (2) Bordkarte erhalten und (3) sie zu Google Wallet hinzufügen, um am Flughafen schnell darauf zugreifen zu können.

Hinweis: Dieses Beispiel stellt einen Transaktionsanwendungsfall in der Kategorie „Abrechnung über Unterhaltungen“ dar. Bei der Abrechnung über Unterhaltungen gilt für alle Nachrichten, die innerhalb von 24 Stunden nach der ersten Antwort des Nutzers gesendet werden, eine Pauschalgebühr. Das bedeutet, dass Sie 24 Stunden lang ohne zusätzliche Kosten mit dem Nutzer über diese Transaktion kommunizieren können.

Im Folgenden finden Sie eine Übersicht über die Unterhaltung. Danach folgen Designtipps und eine detaillierte Beschreibung des Ablaufs. Wenn Sie ein ähnliches Design für Ihren Agenten implementieren möchten, sehen Sie sich die Codebeispiele nach den Schritten an.

Designtipps

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

• Ihre erste Nachricht ist die wichtigste. Geben Sie kurz den Zweck der Unterhaltung an, damit der Nutzer einen Grund hat, zu interagieren.
• Jede Nachricht sollte einen kleinen Informationsblock enthalten und den Nutzer auffordern, zu antworten. Vorschläge für Antworten und Vorschläge für Aktionen helfen Nutzern, den nächsten Schritt auszuführen.
• Ihr Agent sollte reaktionsschnell und nicht roboterhaft sein. Verwenden Sie eine Sprache, die den Ton Ihrer Marke widerspiegelt. Wie würde Ihr idealer Markenvertreter mit einem Kunden chatten?
• Menschen möchten sich besonders fühlen. Sie können den Check-in-Ablauf personalisieren, indem Sie Sitzplätze oder Mahlzeiten basierend auf der Flughistorie des Nutzers vorschlagen.
• Interaktive Chat-Nachrichten und Karussells machen die Unterhaltung dynamischer. Verwenden Sie sie, um Bilder und Details zu teilen, die dem Nutzer bei der Auswahl helfen.
• Eine gute Unterhaltung endet gut. Bestätigen Sie die Check-in-Details des Nutzers, bevor Sie ihm die Bordkarte senden. Verabschieden Sie sich freundlich, um eine persönliche Note zu setzen.

Ablauf für Check-in

1. Der Agent benachrichtigt den Nutzer, 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 Agent informiert den Nutzer über den Check-in-Ablauf.

   

   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 Agent bittet den Nutzer, der Sicherheitsrichtlinie 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 Agent bedankt sich beim Nutzer und stellt den nächsten Schritt vor.

   

   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 Agent 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 Agent bittet den Nutzer, seine Mahlzeit für den Flug 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 Mahlzeitenoptionen 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. Der Nutzer tippt auf eine vorgeschlagene Antwort für die 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 Agent fasst die Check-in-Details 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 Agent teilt dem Nutzer 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 Agent sendet die Bordkarte 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);
    }); 

    In dieser horizontalen interaktiven Chat-Nachricht, ist das Bild eine voll funktionsfähige Bordkarte, die von der Fluggesellschaft bereitgestellt wird. Das Bild sollte alle erforderlichen Informationen für die Bordkarte enthalten, einschließlich eines scannbaren 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 interaktiven Chat-Nachricht ist keine Vorschau der Bordkarte , die in Google Wallet erstellt wurde. Es handelt sich vielmehr um eine eigenständige Bordkarte, die von der Fluggesellschaft erstellt wurde. Aus Gründen der Konsistenz sollte die Bordkarte auf der interaktiven Chat-Nachricht so aussehen wie die Bordkarte in Google Wallet. Verwenden Sie die Vorlage für Bordkarten von Wallet als Referenz.

    Auf der interaktiven Chat-Nachricht wird ein Vorschlag zum Hinzufügen zu Google Wallet angezeigt. Dieser Vorschlag löst eine Aktion zum Öffnen einer URL aus, die die Google Wallet App öffnet. Dort kann der Nutzer die Bordkarte zu seinem Wallet hinzufügen. Wenn die App nicht auf dem Gerät des Nutzers vorhanden ist, wird er aufgefordert, sie zu installieren. Sobald die Bordkarte zu Google Wallet hinzugefügt wurde, erhält der Nutzer automatisch eine Flugerinnerung und Statusaktualisierungen , wenn sich die Flugdetails ändern.

    Nutzer, die ihre Bordkarte nicht zu Google Wallet hinzufügen, sollten ebenfalls auf dem Laufenden gehalten werden. Informieren Sie den Nutzer über alle Änderungen an den Informationen auf der Bordkarte, die auf der interaktiven Chat-Nachricht angezeigt werden.

18. Der Nutzer tippt auf eine vorgeschlagene Aktion, um die Bordkarte zu Google Wallet hinzuzufügen.

    

19. Die Google Wallet App wird geöffnet. Der Nutzer tippt auf eine Schaltfläche, um die Bordkarte zu seinem Wallet hinzuzufügen.

    

20. Der Nutzer tippt auf eine Schaltfläche, um seine Bordkarte aufzurufen.

    

21. Die Bordkarte mit QR-Code wird angezeigt.