Dodawanie karty pokładowej do Portfela Google

Aby ułatwić odprawę, możesz użyć Wiadomości Google z RCS i Portfelem Google: użytkownik dokonuje odprawy, otrzymuje kartę pokładową i dodaje ją bezpośrednio do Portfela Google z poziomu aplikacji Wiadomości. Gdy zmienisz port lotniczy, karta zaktualizuje się automatycznie. Użytkownicy mają szybki dostęp do aktualnej karty pokładowej bezpośrednio na telefonie.

Ten dokument zawiera opis technicznych aspektów wdrożenia karty pokładowej w Portfelu Google. Znajdziesz w nim również przykładowe rozmowy ze wskazówkami projektowymi, które ułatwiają sprawne rejestrowanie się w RBM.

Implementacja techniczna

Aby wdrożyć kartę pokładową w przepływie Portfela Google, będziesz współpracować z interfejsem Google Wallet API i RBM API.

Wymagania wstępne

Aby zacząć korzystać z interfejsu API Portfela Google, wykonaj te wymagane czynności:

1. Zarejestruj konto wydawcy Portfela, aby móc tworzyć i rozpowszechniać karty w Portfelu Google.
2. Utwórz projekt Google Cloud Platform (GCP), jeśli jeszcze go nie masz.
3. Włącz interfejs API Portfela Google.
4. Utwórz konto usługi i klucz, by móc wywoływać interfejs API Portfela Google.
5. Autoryzuj konto usługi w Konsoli usług Google Pay i Portfela Google.
6. Użyj szablonu karty pokładowej, aby utworzyć nową klasę.

Interfejs API Portfela Google

Aby utworzyć kartę pokładową i wygenerować adres URL do dodania do Portfela Google dla RBM, wykonaj te czynności:

1. Wykonaj niezbędne uwierzytelnianie i autoryzacje.
2. Utwórz obiekt kart.
3. Uzyskaj podpisany token sieciowy JSON (JWT). Maksymalna długość zakodowanego tokena JWT to 2048 znaków.
4. Użyj tokena JWT, aby wygenerować adres URL usługi Dodaj do Portfela Google.

Interfejs API RBM

Aby wysłać sugestię RBM do Portfela Google, wyślij działanie związane z otwartym adresem URL. W ładunku wiadomości wykonaj te czynności:

1. W polu text wpisz „Dodaj do Portfela Google”.
2. W polu url wpisz adres URL Portfela Google.

Ikona Portfela Google automatycznie pojawi się na etykiecie sugestii.

Projekt rozmowy

Ta próbka pokazuje niepowtarzalną rozmowę, przeprowadzić użytkownika przez proces rejestracji. Pokazuje, jak używać naturalnego okna dialogowego i zaawansowanych funkcji, takich jak sugestie i karty informacyjne jednym dotknięciem, aby pomóc użytkownikom w osiąganiu celów. W tym przypadku: (1) dostosujesz wygląd lotu, (2) otrzymasz kartę pokładową i (3) dodasz ją do Portfela Google, aby mieć do niej łatwy dostęp na lotnisku.

Uwaga: ta próbka przedstawia przypadek użycia związany z transakcją w kategorii wątków związanych z płatnościami. W przypadku płatności konwersacyjnych wszystkie wiadomości wysyłane w ciągu 24 godzin od pierwszej odpowiedzi użytkownika są objęte stałą opłatą. Oznacza to, że przez 24 godziny możesz angażować użytkownika w transakcję z tą osobą, bez ponoszenia żadnych dodatkowych kosztów.

Poniżej znajdziesz omówienie rozmowy. Następnie przedstawimy wskazówki dotyczące projektowania i szczegółowe omówienie procedury. Aby wdrożyć podobny projekt dla agenta, zapoznaj się z przykładowym kodem podanym poniżej.

Porady dotyczące projektowania

Podczas projektowania interfejsu pamiętaj o tych zasadach:

• Pierwsza wiadomość jest najważniejsza. Krótko przedstaw cel rozmowy, aby użytkownik miał powód się zaangażować.
• Każda wiadomość powinna zawierać krótki fragment informacji i zachęcać użytkowników do odpowiadania. Sugerowane odpowiedzi i sugerowane działania ułatwiają podjęcie kolejnego kroku.
• Twój agent powinien być elastyczny, a nie automatyczny. Zwracaj się do nich w sposób, który odzwierciedla styl Twojej marki. Jak Twój idealny przedstawiciel marki rozmawia z klientem?
• Ludzie poczują się wyjątkowo. Możesz spersonalizować miejsca zameldowania, sugerując miejsca lub posiłki na podstawie historii lotu użytkownika.
• Karty informacyjne i karuzele zwiększają dynamiczny przebieg rozmowy. Za ich pomocą możesz udostępniać obrazy i inne informacje, które pomogą użytkownikom wybrać jedną z dostępnych opcji.
• Dobra rozmowa dobrze się kończy. Potwierdź dane logowania, zanim wyślesz kartę pokładową. Nadaj człowiekowi przyjaznego charakteru

Proces zgłaszania się

1. Agent powiadomi użytkownika, że jego lot jest oddany.

   

   Przykładowy kod

   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. Użytkownik klika sugerowaną odpowiedź, aby się zalogować.

   

3. Przedstawiciel ustala oczekiwania na odprawę.

   

   Przykładowy kod

   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. Agent prosi użytkownika o zaakceptowanie zasad bezpieczeństwa.

   

   Przykładowy kod

   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. Użytkownik klika sugerowaną odpowiedź, aby się zgodzić.

   

6. Pracownik obsługi podziękuje użytkownikowi i przedstawi kolejny krok.

   

   Przykładowy kod

   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. Pracownik prosi użytkownika o wybranie miejsca.

   

   Przykładowy kod

   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. Użytkownik klika sugerowaną odpowiedź dotyczącą wybranego miejsca.

   

9. Przedstawiciel potwierdza wybór użytkownika.

   

   Przykładowy kod

   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. Agent prosi użytkownika o wybranie posiłku w samolocie.

    

    Przykładowy kod

    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. Agent pokazuje opcje posiłku.

    

    Przykładowy kod

    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. Użytkownik klika sugerowaną odpowiedź na wybrany posiłek.

    

13. Przedstawiciel potwierdza wybór użytkownika.

    

    Przykładowy kod

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

14. Agent podsumowuje szczegóły zameldowania.

    

    Przykładowy kod

    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. Użytkownik klika sugerowaną odpowiedź, aby potwierdzić szczegóły zameldowania.

    

16. Pracownik obsługi klienta informuje, że rejestracja została zakończona.

    

    Przykładowy kod

    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. Agent wysyła kartę pokładową użytkownika.

    

    Przykładowy kod

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

    Na tej poziomej karcie informacyjnej obraz to w pełni funkcjonalna karta pokładowa linii lotniczej. Obraz powinien zawierać wszystkie niezbędne informacje o karcie pokładowej, w tym kod kreskowy, który można zeskanować. Użytkownicy mogą po prostu kliknąć obraz, aby wyświetlić i zeskanować kartę pokładową w aplikacji Wiadomości Google.

    Uwaga: obraz na karcie informacyjnej nie przedstawia podglądu karty pokładowej utworzonej w Portfelu Google. Zamiast tego jest to samodzielna karta utworzona przez linię lotniczą. Aby zapewnić spójność, karta informacyjna powinna wyglądać jak karta w Portfelu Google. Możesz użyć szablonu karty pokładowej w Portfelu.

    Na karcie informacyjnej pojawi się sugestia Dodaj do Portfela Google. Ta sugestia uruchamia działanie związane z otwartym adresem URL, które otwiera aplikację Portfel Google, umożliwiając użytkownikowi łatwe dodanie karty pokładowej do portfela. Jeśli aplikacji nie ma na urządzeniu użytkownika, pojawi się prośba o jej zainstalowanie. Po dodaniu karty do Portfela Google użytkownik automatycznie otrzymuje przypomnienie o locie i aktualizacje stanu w przypadku zmiany szczegółów lotu.

    Użytkownicy, którzy nie dodali karty do Portfela Google, też powinni być na bieżąco. Wyślij do użytkownika wiadomość o wszelkich zmianach informacji o pokładach wyświetlanych na karcie informacyjnej.

18. Użytkownik klika sugerowane działanie, aby dodać kartę do Portfela Google.

    

19. Otworzy się aplikacja Portfel Google. Użytkownik klika przycisk, aby dodać kartę do portfela.

    

20. Użytkownik klika przycisk, aby wyświetlić kartę.

    

21. Wyświetli się karta pokładowa z kodem QR.