Dodawanie karty pokładowej do Portfela Google

Możesz używać Wiadomości Google z RCS i Portfela Google, aby zaprojektować płynny proces odprawy: użytkownik dokonuje odprawy, otrzymuje kartę pokładową i dodaje ją bezpośrednio do Portfela Google z aplikacji Wiadomości. Po dodaniu do portfela karta jest automatycznie aktualizowana, jeśli zmienią się szczegóły lotu. Użytkownicy mają szybki dostęp do aktualnej karty pokładowej bezpośrednio na telefonie.

Ten dokument zawiera opis technicznych kroków wdrażania procesu dodawania karty pokładowej do Portfela Google. Zawiera też przykładową rozmowę z wskazówkami dotyczącymi projektowania, które pomogą zapewnić płynny i skuteczny proces odprawy za pomocą RBM.

Implementacja techniczna

Aby wdrożyć proces dodawania karty pokładowej do Portfela Google, musisz użyć interfejsów Google Wallet API i RBM API.

Wymagania wstępne

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

1. Zarejestruj się, aby utworzyć konto wydawcy w Portfelu Google. Dzięki temu będziesz mieć możliwość tworzenia i dystrybuowania kart do Portfela Google.
2. Utwórz projekt Google Cloud (GCP), jeśli jeszcze go nie masz.
3. Włącz Google Wallet API.
4. Utwórz konto usługi i klucz, aby móc wywoływać interfejs Google Wallet API.
5. Autoryzuj konto usługi w konsoli Google Pay i Portfela Google.
6. Aby utworzyć nową klasę Boarding, użyj szablonu karty pokładowej.

Google Wallet API

Aby utworzyć kartę pokładową i wygenerować adres URL „Dodaj do Portfela Google” na potrzeby RBM, wykonaj te czynności:

1. Przeprowadź niezbędne uwierzytelnianie i autoryzację.
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 JWT, aby wygenerować adres URL Dodaj do Portfela Google.

RBM API

Aby wysłać sugestię „Dodaj do Portfela Google” z RBM, wyślij działanie „Otwórz adres URL”. W ładunku wiadomości wykonaj te czynności:

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

Ikona Portfela Google będzie automatycznie wyświetlana na etykiecie sugestii.

Projektowanie rozmowy

Ten przykład wykorzystuje wyjątkową moc konwersacji, aby przeprowadzić użytkowników przez cały proces odprawy. Pokazuje, jak za pomocą naturalnego dialogu i zaawansowanych funkcji, takich jak sugestie jednym kliknięciem i karty z elementami multimedialnymi, możesz pomagać użytkownikom w osiąganiu celów. W tym przypadku są to: (1) dostosowanie lotu, (2) otrzymanie karty pokładowej i (3) dodanie jej do Portfela Google, aby mieć do niej szybki dostęp na lotnisku.

Uwaga: ten przykład przedstawia przypadek użycia transakcji w kategorii fakturowania konwersacyjnego. W przypadku rozliczeń konwersacyjnych wszystkie wiadomości wysł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 prowadzić z użytkownikiem dialog dotyczący tej transakcji bez dodatkowych kosztów.

Następnie znajdziesz omówienie rozmowy. Następnie znajdziesz wskazówki dotyczące projektowania i szczegółowy opis procesu. Aby wdrożyć podobny projekt w przypadku agenta, zapoznaj się z przykładowym kodem po wykonaniu tych czynności.

Porady dotyczące projektowania

Projektując proces odprawy, pamiętaj o tych zasadach:

• Pierwsza wiadomość jest najważniejsza. Krótko opisz cel rozmowy, aby użytkownik miał powód do zaangażowania się w nią.
• Każda wiadomość powinna zawierać niewielką porcję informacji i zachęcać użytkownika do odpowiedzi. Sugerowane odpowiedzi i sugerowane działania pomagają użytkownikom wykonać kolejny krok.
• Agent powinien reagować na potrzeby użytkownika, a nie odpowiadać w sposób zautomatyzowany. Używaj języka, który odzwierciedla styl Twojej marki. Jak idealny przedstawiciel Twojej marki rozmawia z klientem?
• Ludzie lubią czuć się wyjątkowo. Możesz spersonalizować proces odprawy, sugerując miejsca lub posiłki na podstawie historii lotów użytkownika.
• Karty informacyjne i karuzele sprawiają, że rozmowa jest bardziej dynamiczna. Używaj ich do udostępniania zdjęć i szczegółów, które pomogą użytkownikowi wybrać jedną z opcji.
• Dobra rozmowa dobrze się kończy. Przed wysłaniem karty pokładowej potwierdź szczegóły odprawy użytkownika. Dodaj osobisty akcent, kończąc rozmowę w przyjazny sposób.

Proces odprawy

1. Agent powiadamia użytkownika, że odprawa na lot jest otwarta.

   

   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 powiadomić o przybyciu.

   

3. Przedstawiciel GHN określa oczekiwania dotyczące procesu odprawy.

   

   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 wyrazić zgodę.

   

6. Przedstawiciel dziękuje użytkownikowi i przedstawia 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. Agent 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. Agent 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 na pokładzie.

    

    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. Pracownik obsługi klienta wyświetla opcje posiłków.

    

    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ź dotyczącą wybranego posiłku.

    

13. Agent 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. Przedstawiciel podsumowuje szczegóły odprawy.

    

    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 odprawy.

    

16. Pracownik ogłasza, że odprawa 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 tym poziomym karcie informacyjnym obraz jest w pełni funkcjonalną kartą pokładową dostarczoną przez linię lotniczą. Obraz powinien zawierać wszystkie potrzebne informacje o wejściu na pokład, w tym kod kreskowy, który można zeskanować. Użytkownicy mogą dotknąć obrazu, aby wyświetlić i zeskanować kartę pokładową w aplikacji Wiadomości Google.

    Uwaga: obraz na karcie z elementami rozszerzonymi nie jest podglądem karty pokładowej utworzonej w Portfelu Google. Jest to samodzielna karta utworzona przez linię lotniczą. Aby zachować spójność, karta na karcie z elementami rozszerzonymi powinna wyglądać tak samo jak karta w Portfelu Google. Skorzystaj z szablonu karty pokładowej w Portfelu Google, aby uzyskać informacje na ten temat.

    Na karcie z elementami rozszerzonymi pojawi się sugestia Dodaj do Portfela Google. Ta sugestia wywołuje działanie Otwórz adres URL, które otwiera aplikację Portfel Google, w której użytkownik może dodać kartę pokładową do portfela. (Jeśli aplikacja nie jest zainstalowana na urządzeniu użytkownika, pojawi się prośba o jej zainstalowanie). Gdy karta zostanie dodana do Portfela Google, użytkownik automatycznie otrzyma przypomnienie o locie i aktualizacje stanu, jeśli zmienią się szczegóły lotu.

    Użytkownicy, którzy nie dodadzą karty do Portfela Google, również powinni być na bieżąco informowani. Wysyłaj użytkownikowi wiadomości o wszelkich zmianach w informacjach o odprawie wyświetlanych na karcie z elementami multimedialnymi.

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.