Dodawanie karty pokładowej do Portfela Google

Możesz użyć Google Messages z RCS i Portfelem Google, aby zaprojektować płynny proces odprawy: użytkownik przeprowadza odprawę, otrzymuje kartę pokładową i dodaje ją bezpośrednio do Portfela Google z poziomu aplikacji Wiadomości. Gdy karta znajdzie się w portfelu, aktualizuje się automatycznie, jeśli zmienią się szczegóły lotu. Użytkownicy mają szybki dostęp do aktualnej karty pokładowej na telefonie.

Ten dokument zawiera opis czynności technicznych, które należy wykonać, aby wdrożyć kartę pokładową w ramach procesu Google Wallet. Znajdziesz w nim też przykładową rozmowę z wskazówkami dotyczącymi projektowania, które pomogą Ci zapewnić sprawne i wygodne zameldowanie za pomocą RBM.

Implementacja techniczna

Aby wdrożyć kartę pokładową w Portfelu Google, musisz pracować z interfejsem API Portfela Google i interfejsem RBM API.

Wymagania wstępne

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

  1. Zarejestruj się na koncie wydawcy Google Wallet, aby tworzyć i rozpowszechniać karty w Google Wallet.
  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 usług Google Pay i Portfela Google.
  6. Utwórz nową klasę za pomocą szablonu karty pokładowej.

Interfejs Google Wallet API

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

  1. Przeprowadź niezbędne uwierzytelnianie i autoryzację.
  2. Utwórz obiekt „Passes”.
  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 dodawania do Portfela Google.

RBM API

Aby wysłać sugestię dodania do Portfela Google z poziomu RBM, wyślij działanie Otwieranie adresu URL. W ładunku wiadomości:

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

Ikona Portfela Google automatycznie pojawi się na etykiecie sugestii.

Ikona Portfela Google w propozycji dodania do Portfela Google

Projektowanie rozmów

Ten przykład wykorzystuje wyjątkową moc konwersacji, aby poprowadzić użytkowników przez cały proces zameldowania. Pokazuje, jak korzystać z naturalnych dialogów i zaawansowanych funkcji, takich jak sugestie obsługiwane jednym kliknięciem i karty rozszerzone, aby pomóc użytkownikom osiągnąć swoje cele. W tym przypadku ich cele 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.

Poniżej znajdziesz omówienie rozmowy. Następnie znajdziesz wskazówki dotyczące projektowania i szczegółowy opis procesu. Aby wdrożyć podobny projekt w swoim agencie, zapoznaj się z przykładami kodu i wykonaj podane w nich instrukcje.

Diagram rozmowy

Porady dotyczące projektowania

Podczas projektowania procesu zameldowania pamiętaj o tych zasadach:

  • Pierwsza wiadomość jest najważniejsza. Krótko opisz cel rozmowy, aby użytkownik miał powód do zaangażowania.
  • Każda wiadomość powinna zawierać niewielką ilość informacji i zachęcać użytkownika do odpowiedzi. Sugerowane odpowiedzi i sugerowane działania ułatwiają użytkownikom wykonanie dalszych czynności.
  • Twój agent powinien być responsywny, a nie działać jak robot. Używaj języka, który odzwierciedla ton marki. Jak idealny przedstawiciel marki rozmawiałby z klientem?
  • Ludzie lubią czuć się wyjątkowo. Możesz spersonalizować proces zameldowania, sugerując miejsca lub posiłki na podstawie historii lotów użytkownika.
  • Karty informacyjne i karuzele sprawiają, że rozmowa jest bardziej dynamiczna. Użyj ich, aby udostępnić zdjęcia i szczegóły, które pomogą użytkownikowi wybrać opcję.
  • Dobra rozmowa kończy się dobrze. Przed wysłaniem karty pokładowej sprawdź dane dotyczące zameldowania użytkownika. Dodaj ludzki akcent, używając przyjaznego pożegnania.

Proces zameldowania

  1. Pracownik obsługi klienta informuje użytkownika, że odprawa na lot jest otwarta.

    powitanie z szczegółami dotyczącymi zameldowania i sugerowanymi odpowiedziami,

    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ę zameldować.

    Sugestia zameldowania została kliknięta

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

    Komunikat: OK, świetnie. Zameldowanie zajmuje tylko 3 kroki. Oto pierwszy krok, który musisz wykonać, aby rozpocząć korzystanie z usługi

    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. Użytkownik musi zaakceptować zasady bezpieczeństwa.

    Karta z infografiką zasad bezpieczeństwa i sugestia zaakceptowania lub odrzucenia zasad Tekst na karcie: Aby pomóc nam zapewnić bezpieczny lot, zapoznaj się z naszymi zasadami bezpieczeństwa i potwierdź, że się z nimi zgadzasz.

    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 zaakceptować.

    Kliknięcie sugestii wyrażenia zgody

  6. Przedstawiciel dziękuje użytkownikowi i przedstawia kolejny krok.

    Treść wiadomości: Dziękujemy! Bezpieczny pasażer to szczęśliwy pasażer. Następny 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 obsługi klienta prosi użytkownika o wybranie miejsca.

    Karta informacyjna z infografiką mapy miejsc siedzących. Napis na karcie brzmi: „Czas usiąść i się wyprostować!”. Na podstawie Twojego ostatniego lotu polecamy kilka miejsc. Wybierz żądane miejsce lub poinformuj nas o wybranym miejscu, wpisując jego numer. Sugerowane opcje po karcie to kilka opcji miejsc siedzących

    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.

    Sugestia dotycząca miejsca 18A została wybrana

  9. Pracownik obsługi klienta potwierdza wybór użytkownika.

    Wiadomość: Miejsce 18A, masz je.

    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 trakcie lotu.

    Komunikat: Porozmawiajmy teraz o jedzeniu. Możesz zamówić posiłek na pokładzie z wyprzedzeniem. Czy zadowala Cię wegetariańskie przystawki czy danie z kurczaka?

    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 pokazuje opcje posiłków.

    Karuzela z kartami multimedialnymi zawiera 2 karty: jedną z obrazem sałaty, a drugą z obrazem kurczaka. Obie karty zawierają listę składników i sugestię dotyczącą wyboru 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 temat wybranego posiłku.

    Wybrano sugestię, aby wybrać wegetariańskie danie.

  13. Pracownik obsługi klienta potwierdza wybór użytkownika.

    Treść wiadomości: Vegetarian it is.

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

    Treść wiadomości: Oto, co zapiszemy: wybrano miejsce 18A i posiłek wegetariański. Potwierdź swoje wybory. Pod wiadomością pojawią się sugestie dotyczące potwierdzenia szczegółów, zmiany posiłku lub zmiany miejsca.

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

    Sugestia potwierdzenia, że szczegóły zostały kliknięte.

  16. Przedstawiciel informuje, że zameldowanie zostało zakończone.

    Treść wiadomości: Hura! Nastąpiła odprawa przed lotem. Oto Twoja karta pokładowa. Cieszymy się, że wkrótce będziemy mogli Cię gościć.

    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. Pracownik obsługi klienta wysyła użytkownikowi kartę pokładową.

    Karta rozszerzona zawiera zdjęcie karty pokładowej z kodem QR i szczegółami lotu. Napis na karcie brzmi: Będziemy na bieżąco! Jeśli szczegóły lotu ulegną zmianie, otrzymasz powiadomienie. Sugestia na karcie brzmi Dodaj do Portfela Google.

    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 przedstawia w pełni funkcjonalny bilet lotniczy wydany przez linię lotniczą. Obraz powinien zawierać wszystkie niezbędne informacje dotyczące karty pokładowej, w tym kod kreskowy, który można zeskanować. Użytkownicy mogą kliknąć obraz, aby wyświetlić i zeskanować kartę pokładową w aplikacji Wiadomości Google.

    Na karcie rozszerzonej pojawia się sugestia Dodaj do Portfela Google. Ta sugestia powoduje wykonanie działania Otwórz URL, które otwiera aplikację Portfel Google, gdzie użytkownik może dodać kartę pokładową do portfela. (jeśli aplikacja nie jest na urządzeniu użytkownika, wyświetli się prośba o jej zainstalowanie). Gdy karta zostanie dodana do Portfela Google, użytkownik automatycznie otrzyma przypomnienie o locie oraz aktualizacje stanu, jeśli zmienią się szczegóły lotu.

    Należy też aktualizować dane użytkowników, którzy nie dodali karty do Portfela Google. wysłać użytkownikowi wiadomość o wszelkich zmianach informacji o pokładzie wyświetlanych na karcie rozszerzonej;

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

    Ikona Portfela Google i sugestia dodania do Portfela Google

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

    Aplikacja Portfel wyświetla uproszczoną kartę pokładową i przycisk Dodaj.

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

    Nad dokumentem wyświetla się znacznik wyboru. Pojawi się przycisk Wyświetl w Portfelu Google.

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

    Kartę pokładową ze wszystkimi szczegółami lotu i kodem QR