Adicionar cartão de embarque à Carteira do Google

Você pode usar o Google Mensagens com RCS e a Carteira do Google para projetar um fluxo de check-in contínuo: o usuário conclui o check-in, recebe o cartão de embarque e o adiciona diretamente à Carteira do Google pelo app Mensagens. Depois de adicionado, o cartão é atualizado automaticamente se os detalhes do voo mudarem. Os usuários têm acesso rápido a um cartão de embarque atualizado diretamente no smartphone.

Neste documento, descrevemos as etapas técnicas para implementar um cartão de embarque no fluxo da Carteira do Google. Ele também apresenta uma conversa de exemplo com dicas de design para uma experiência de check-in tranquila e eficiente com o RBM.

Implementação técnica

Para implementar um fluxo de cartão de embarque na Carteira do Google, você vai trabalhar com a API Google Wallet e a API RBM.

Pré-requisitos

Para começar a usar a API Google Wallet, siga estas etapas obrigatórias:

1. Inscreva-se para ter uma conta de emissor da Carteira e criar e distribuir cartões para a Carteira do Google.
2. Crie um projeto do Google Cloud (GCP) se você ainda não tiver um.
3. Ative a API Google Wallet.
4. Crie uma conta de serviço e uma chave para chamar a API Google Wallet.
5. Autorize a conta de serviço no Console do Google Pay e da Carteira.
6. Use o modelo de cartão de embarque para criar uma nova classe Boarding.

API Google Wallet

Para criar um cartão de embarque e gerar um URL "Adicionar à Carteira do Google" para o RBM, siga estas etapas:

1. Faça as autenticações e autorizações necessárias.
2. Crie um objeto de cartão.
3. Receba um JSON Web Token (JWT) assinado. O comprimento máximo de um JWT codificado é de 2.048 caracteres.
4. Use o JWT para gerar um URL de "Adicionar à Carteira do Google".

API RBM

Para enviar uma sugestão de "Adicionar à Carteira do Google" do RBM, envie uma ação de abrir URL. No payload da mensagem, faça o seguinte:

1. Para text, digite "Adicionar à Carteira do Google".
2. Em url, insira o URL de "Adicionar à Carteira do Google".

O ícone da Carteira do Google vai aparecer automaticamente no rótulo da sugestão.

Design de conversação

Este exemplo usa o poder único da conversa para guiar os usuários por um fluxo completo de check-in. Ele demonstra como usar diálogos naturais e recursos avançados, como sugestões com um toque e cards avançados, para ajudar os usuários a alcançar os objetivos deles. Neste caso, os objetivos são: (1) personalizar minha experiência de voo, (2) receber meu cartão de embarque e (3) adicioná-lo à Carteira do Google para acesso rápido no aeroporto.

Observação: este exemplo representa um caso de uso transacional na categoria de faturamento conversacional. Com o faturamento conversacional, todas as mensagens enviadas em até 24 horas após a primeira resposta do usuário são cobertas por uma taxa fixa. Isso significa que, por 24 horas, você pode interagir com o usuário em uma conversa sobre essa transação sem custo adicional.

Em seguida, há uma visão geral da conversa. Em seguida, há dicas de design e um detalhamento do fluxo. Para implementar um design semelhante no seu agente, consulte os exemplos de código após as etapas.

Conselhos de design

Tenha em mente estes princípios ao criar seu fluxo de check-in:

• Sua primeira mensagem é a mais importante. Declare brevemente o propósito da conversa para que o usuário tenha um motivo para interagir.
• Cada mensagem precisa fornecer uma pequena parte de informações e pedir que o usuário responda. As respostas sugeridas e as ações sugeridas ajudam os usuários a seguir para a próxima etapa.
• Seu agente precisa ser responsivo, não robótico. Use uma linguagem que reflita o tom de voz da sua marca. Como seria a conversa do representante ideal da sua marca com um cliente?
• As pessoas gostam de se sentir especiais. Você pode personalizar a experiência de check-in sugerindo assentos ou refeições com base no histórico de voos do usuário.
• Os rich cards e os carrosséis tornam a conversa mais dinâmica. Use-os para compartilhar imagens e detalhes que ajudem o usuário a escolher entre as opções.
• Uma boa conversa termina bem. Confirme os detalhes do check-in do usuário antes de enviar o cartão de embarque. Adicione um toque humano com uma despedida amigável.

Fluxo de check-in

1. O agente notifica o usuário de que o check-in do voo está aberto.

   

   Exemplo de código

   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. O usuário toca em uma resposta sugerida para fazer check-in.

   

3. O agente define as expectativas para o processo de check-in.

   

   Exemplo de código

   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. O agente pede que o usuário concorde com a política de segurança.

   

   Exemplo de código

   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. O usuário toca em uma resposta sugerida para concordar.

   

6. O agente agradece ao usuário e apresenta a próxima etapa.

   

   Exemplo de código

   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. O agente pede que o usuário escolha um assento.

   

   Exemplo de código

   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. O usuário toca em uma resposta sugerida para a licença escolhida.

   

9. O agente confirma a escolha do usuário.

   

   Exemplo de código

   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. O agente pede que o usuário escolha a refeição a bordo.

    

    Exemplo de código

    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. O agente mostra as opções de refeição.

    

    Exemplo de código

    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. O usuário toca em uma resposta sugerida para a refeição escolhida.

    

13. O agente confirma a escolha do usuário.

    

    Exemplo de código

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

14. O agente resume os detalhes do check-in.

    

    Exemplo de código

    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. O usuário toca em uma resposta sugerida para confirmar os detalhes do check-in.

    

16. O agente anuncia que o check-in foi concluído.

    

    Exemplo de código

    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. O agente envia o cartão de embarque do usuário.

    

    Exemplo de código

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

    Neste Rich Card horizontal, a imagem é um cartão de embarque totalmente funcional fornecido pela companhia aérea. A imagem precisa mostrar todas as informações de embarque necessárias, incluindo um código de barras que possa ser escaneado. Os usuários podem tocar na imagem para ver e digitalizar o cartão de embarque no app Mensagens do Google.

    Observação: a imagem no card avançado não é uma prévia do cartão de embarque criado na Carteira do Google. Em vez disso, é um cartão independente criado pela companhia aérea. Para manter a consistência, o cartão no rich card precisa ser igual ao cartão na Carteira do Google. Use o modelo de cartão de embarque da Carteira como referência.

    Uma sugestão de Adicionar à Carteira do Google aparece no card avançado. Essa sugestão aciona uma ação de abrir URL que abre o app Carteira do Google, onde o usuário pode adicionar o cartão de embarque à carteira. Se o app não estiver no dispositivo do usuário, ele vai receber uma solicitação para instalar. Depois que o cartão é adicionado à Carteira do Google, o usuário recebe automaticamente um lembrete de voo e atualizações de status se os detalhes do voo mudarem.

    Os usuários que não adicionarem o cartão à Carteira do Google também precisam receber atualizações. Envie uma mensagem ao usuário sobre mudanças nas informações de embarque mostradas no card avançado.

18. O usuário toca em uma ação sugerida para adicionar o cartão à Carteira do Google.

    

19. O app Carteira do Google vai abrir. O usuário toca em um botão para adicionar o cartão à carteira.

    

20. O usuário toca em um botão para ver o cartão.

    

21. O cartão de embarque com QR code vai aparecer.