Bordkarte zu Google Wallet hinzufügen

Sie können Messages by Google mit RCS und Google Wallet verwenden, um einen nahtlosen Check-in-Ablauf zu entwerfen: Der Nutzer schließt seinen Check-in ab, 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 auf ihrem Smartphone schnellen Zugriff auf eine aktuelle Bordkarte.

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

Technische Implementierung

Wenn Sie eine Bordkarte in Google Wallet implementieren möchten, verwenden Sie die Google Wallet API und die RBM API.

Voraussetzungen

Erste Schritte mit der Google Wallet API:

1. Registrieren Sie sich bei einem Wallet-Ausstellerkonto, damit Sie Karten/Tickets für Google Wallet erstellen und verteilen können.
2. ein Google Cloud Platform-Projekt (GCP) zu erstellen, wenn Sie noch keines haben
3. Aktivieren Sie die Google Wallet API.
4. ein Dienstkonto und einen Schlüssel erstellen, um die Google Wallet API aufrufen zu 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 Bordkarte zu erstellen.

Google Wallet-API

Wenn Sie eine Bordkarte erstellen und eine „Zu Google Wallet hinzufügen“-URL für RBM generieren möchten, führen Sie diese Schritte aus:

1. Führen Sie die erforderlichen Authentifizierungen und Autorisierungen aus.
2. Karten-/Ticketobjekt erstellen
3. Ein signiertes JSON-Webtoken (JWT) abrufen. Die maximale Länge eines codierten JWT beträgt 2.048 Zeichen.
4. Generieren Sie mit dem JWT eine „Zu Google Wallet hinzufügen“-URL.

RBM-API

Wenn Sie einen „Zu Google Wallet hinzufügen“-Vorschlag von RBM senden möchten, senden Sie eine URL-Aktion öffnen. Führen Sie in der Nachrichtennutzlast die folgenden Schritte aus:

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

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

Unterhaltungsdesign

In diesem Beispiel wird die einzigartige Funktion von Unterhaltungen genutzt, um Nutzer durch einen vollständigen Check-in-Vorgang zu leiten. Hier erfahren Sie, wie Sie mithilfe von natürlichen Dialogen und Rich-Funktionen wie Vorschlägen mit nur einem Tippen und Rich-Karten den Nutzern helfen können, ihre Ziele zu erreichen. In diesem Fall sind es (1) die Anpassung meiner Flugangebote, (2) die Bordkarte und (3) die Verknüpfung mit Google Wallet für einen einfachen Zugriff am Flughafen.

Hinweis: Dieses Beispiel stellt einen Transaktionsanwendungsfall in der Kategorie Unterhaltungsabrechnung dar. Bei dieser Funktion wird für alle Nachrichten, die innerhalb von 24 Stunden nach der ersten Antwort des Nutzers gesendet werden, eine Pauschale erhoben. Das bedeutet, dass Sie den Nutzer 24 Stunden lang ohne zusätzliche Kosten in einem Dialogfeld zu dieser Transaktion bewegen können.

Nachstehend findest du einen Überblick über die Unterhaltung. Es folgen Tipps zum Design und eine detaillierte Aufschlüsselung des Ablaufs. Wie Sie ein ähnliches Design für Ihren Agent implementieren, erfahren Sie in den Codebeispielen unter den Schritten.

Designberatung

Berücksichtigen Sie diese Aspekte, wenn Sie einen Check-in-Vorgang gestalten:

• Die erste Nachricht ist die wichtigste. Nenne kurz den Zweck des Gesprächs, damit der Nutzer einen Grund hat, sich zu beteiligen.
• Jede Nachricht sollte eine kleine Menge an Informationen enthalten und den Nutzer dazu auffordern, zu antworten. Vorgeschlagene Antworten und vorgeschlagene Aktionen erleichtern den nächsten Schritt.
• Der Agent sollte reaktionsschnell und nicht Robot sein. Verwenden Sie eine Sprache, die den Ton Ihrer Marke widerspiegelt. Wie würde Ihre ideale Markenbeauftragte mit einem Kunden chatten?
• Die Menschen wollen etwas Besonderes fühlen. Sie können den Check-in personalisieren, indem Sie Sitzplätze oder Mahlzeiten basierend auf der Flughistorie des Nutzers vorschlagen.
• Mit Rich-Infokarten und Karussells wird die Unterhaltung dynamischer. Damit können Sie Bilder und Details mit anderen Nutzern teilen, um diese Optionen leichter wählen zu können.
• Ein gutes Gespräch endet gut. Prüfe die Check-in-Informationen des Nutzers, bevor du die Bordkarte sendest. Mit freundlichem Grusel erhältst du einen persönlichen Touch.

Check-in-Vorgang

1. Der Agent benachrichtigt 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 den Antwortvorschlag, um einzuchecken.

   

3. Der Kundenservicemitarbeiter erwartet, dass er den Check-in durchführt.

   

   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 seine Zustimmung zu geben.

   

6. Der Kundenservicemitarbeiter möchte dem Nutzer danken und den nächsten Schritt erklären.

   

   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 zu wä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 einen Antwortvorschlag 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 Kundenservicemitarbeiter wird aufgefordert, die aktuelle Mahlzeit 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 Optionen für die Mahlzeit.

    

    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 einen Antwortvorschlag für die gewä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 Kundenservicemitarbeiter teilt Ihnen 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);
    }); 
    

    Auf dieser horizontalen Rich Card ist das Bild eine voll funktionsfähige Bordkarte, die von der Fluggesellschaft bereitgestellt wird. Auf dem Bild sollten alle erforderlichen Informationen zu den Boardingfunktionen zu sehen sein, auch ein scanbarer Barcode. Nutzer können dann einfach auf das Bild tippen, um ihre Bordkarte über die Messages App von Google anzusehen und zu scannen.

    Hinweis: Das Bild auf der interaktiven Karte ist keine Vorschau der Bordkarte, die in Google Wallet erstellt wurde. Es handelt sich stattdessen um eine eigenständige Karte der Fluggesellschaft. Aus Gründen der Konsistenz sollte die Karte / das Ticket auf der interaktiven Karte wie die Karte / das Ticket in Google Wallet aussehen. Verwenden Sie als Referenz die Bordkarte von Wallet.

    Auf der interaktiven Chat-Karte wird der Vorschlag Zu Google Wallet hinzufügen angezeigt. Durch diesen Vorschlag wird eine URL-Aktion öffnen ausgelöst, mit der die Google Wallet App geöffnet wird. Der Nutzer kann dann seine Bordkarte ganz einfach zu seiner Wallet hinzufügen. Wenn die App nicht auf dem Gerät des Nutzers installiert ist, wird der Nutzer dazu aufgefordert, sie zu installieren. Sobald die Karte oder das Ticket zu Google Wallet hinzugefügt wurde, erhält der Nutzer automatisch eine Erinnerung und Statusaktualisierungen, wenn sich die Flugdetails ändern.

    Nutzer, die Google Wallet ihre Karten/Tickets nicht hinzufügen, sollten ebenfalls auf dem neuesten Stand sein. Informiere den Nutzer über alle Änderungen an der Bordkarte, die auf der interaktiven Chat-Nachricht angezeigt wird.

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

    

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

    

20. Der Nutzer tippt auf eine Schaltfläche, um sich seine Karte bzw. sein Ticket anzusehen.

    

21. Die Bordkarte mit QR-Code wird angezeigt.