Agrega una tarjeta de embarque a la Billetera de Google

Puedes usar Mensajes de Google con RCS y la Billetera de Google para diseñar un flujo de registro sin problemas: el usuario completa su registro, recibe su tarjeta de embarque y la agrega directamente a la Billetera de Google desde la app de Mensajes. Una vez que la tarjeta está en la billetera, se actualiza automáticamente si cambian los detalles del vuelo. Los usuarios tienen acceso rápido a una tarjeta de embarque actualizada directamente en su teléfono.

En este documento, se describen los pasos técnicos para implementar un flujo de tarjeta de embarque en la Billetera de Google. También incluye una conversación de ejemplo con sugerencias de diseño para una experiencia de registro fluida y eficiente con RBM.

Implementación técnica

Para implementar un flujo de tarjeta de embarque en la Billetera de Google, trabajarás con la API de la Billetera de Google y la API de RBM.

Requisitos previos

Para comenzar a usar la API de la Billetera de Google, sigue estos pasos obligatorios:

1. Regístrate para obtener una cuenta de entidad emisora de la Billetera y, así, poder crear y distribuir pases para la Billetera de Google.
2. Crea un proyecto de Google Cloud (GCP) si aún no tienes uno.
3. Habilita la API de la Billetera de Google.
4. Crea una cuenta de servicio y una clave para poder llamar a la API de Google Wallet.
5. Autoriza la cuenta de servicio en la consola de Google Pay y la Billetera.
6. Usa la plantilla de tarjeta de embarque para crear una clase Boarding nueva.

API de la Billetera de Google

Para crear un pase de abordar y generar una URL de Agregar a la Billetera de Google para RBM, sigue estos pasos:

1. Realiza las autenticaciones y autorizaciones necesarias.
2. Crea un objeto de pase.
3. Obtén un token web JSON (JWT) firmado. La longitud máxima de un JWT codificado es de 2,048 caracteres.
4. Usa el JWT para generar una URL de Agregar a la Billetera de Google.

API de RBM

Para enviar una sugerencia de Agregar a la Billetera de Google desde RBM, envía una acción de abrir URL. En la carga útil del mensaje, haz lo siguiente:

1. En text, ingresa "Agregar a la Billetera de Google".
2. En url, ingresa la URL de Agregar a la Billetera de Google.

El ícono de la Billetera de Google se mostrará automáticamente en la etiqueta de sugerencia.

Diseño de conversación

En este ejemplo, se usa el poder único de la conversación para guiar a los usuarios a través de un flujo de registro completo. Demuestra cómo puedes usar diálogos naturales y funciones enriquecidas, como sugerencias con un solo toque y tarjetas enriquecidas, para ayudar a los usuarios a alcanzar sus objetivos. En este caso, los objetivos son los siguientes: (1) personalizar mi experiencia de vuelo, (2) recibir mi tarjeta de embarque y (3) agregarla a la Billetera de Google para acceder a ella rápidamente en el aeropuerto.

Nota: Este ejemplo representa un caso de uso transaccional en la categoría de facturación conversacional. Con la facturación conversacional, los mensajes que se envían en un plazo de 24 horas después de la primera respuesta del usuario se cubren con una tarifa plana. Esto significa que, durante 24 horas, puedes mantener un diálogo con el usuario sobre esta transacción sin costo adicional.

A continuación, se muestra una descripción general de la conversación. A continuación, se incluyen sugerencias de diseño y un desglose paso a paso del flujo. Para implementar un diseño similar para tu agente, consulta las muestras de código que se encuentran después de los pasos.

Asesoramiento de diseño

Ten en cuenta estos principios cuando diseñes el flujo de registro:

• Tu primer mensaje es el más importante. Indica brevemente el propósito de la conversación para que el usuario tenga un motivo para participar.
• Cada mensaje debe proporcionar una pequeña porción de información y solicitar al usuario que responda. Las respuestas sugeridas y las acciones sugeridas ayudan a los usuarios a dar el próximo paso.
• Tu agente debe ser receptivo, no robótico. Usa un lenguaje que refleje el tono de voz de tu marca. ¿Cómo chatearía el representante ideal de tu marca con un cliente?
• A las personas les gusta sentirse especiales. Puedes personalizar la experiencia de registro sugiriendo asientos o comidas según el historial de vuelos del usuario.
• Las tarjetas enriquecidas y los carruseles hacen que la conversación sea más dinámica. Úsalos para compartir imágenes y detalles que ayudarán al usuario a elegir entre las opciones.
• Una buena conversación termina bien. Confirma los detalles del check-in del usuario antes de enviarle su tarjeta de embarque. Agrega un toque humano con una despedida amigable.

Flujo de registro

1. El agente le notifica al usuario que ya puede hacer el check-in para su vuelo.

   

   Muestra 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. El usuario presiona una respuesta sugerida para registrarse.

   

3. El agente establece las expectativas para el proceso de registro.

   

   Muestra 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. El agente le pide al usuario que acepte la política de seguridad.

   

   Muestra 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. El usuario presiona una respuesta sugerida para aceptar.

   

6. El agente le agradece al usuario y le indica el siguiente paso.

   

   Muestra 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. El agente le solicita al usuario que elija un asiento.

   

   Muestra 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. El usuario presiona una respuesta sugerida para el asiento que eligió.

   

9. El agente confirma la elección del usuario.

   

   Muestra 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. El agente le pide al usuario que elija su comida a bordo.

    

    Muestra 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. El agente muestra las opciones de comida.

    

    Muestra 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. El usuario presiona una respuesta sugerida para la comida que eligió.

    

13. El agente confirma la elección del usuario.

    

    Muestra de código

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

14. El agente resume los detalles del registro.

    

    Muestra 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. El usuario presiona una respuesta sugerida para confirmar los detalles del registro.

    

16. El agente anuncia que se completó el registro.

    

    Muestra 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. El agente envía el pase de abordar del usuario.

    

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

    En esta tarjeta enriquecida horizontal, la imagen es una tarjeta de embarque completamente funcional proporcionada por la aerolínea. La imagen debe mostrar toda la información de embarque necesaria, incluido un código de barras escaneable. Los usuarios pueden presionar la imagen para ver y escanear su tarjeta de embarque desde la app de Mensajes de Google.

    Nota: La imagen de la tarjeta enriquecida no es una vista previa de la tarjeta de embarque creada en la Billetera de Google. En cambio, es un pase independiente creado por la aerolínea. Para garantizar la coherencia, el pase de la tarjeta enriquecida debe verse igual que el pase de la Billetera de Google. Usa la plantilla de tarjeta de embarque de la Billetera como referencia.

    En la tarjeta enriquecida, aparece una sugerencia para agregarla a la Billetera de Google. Esta sugerencia activa una acción de abrir URL que abre la app de la Billetera de Google, en la que el usuario puede agregar la tarjeta de embarque a su billetera. (Si la app no está en el dispositivo del usuario, se le pedirá que la instale). Una vez que se agrega el pase a la Billetera de Google, el usuario recibe automáticamente un recordatorio de vuelo y actualizaciones de estado si cambian los detalles de su vuelo.

    También se debe mantener actualizados a los usuarios que no agreguen su pase a la Billetera de Google. Enviar un mensaje al usuario sobre cualquier cambio en la información de embarque que se muestra en la tarjeta enriquecida

18. El usuario presiona una acción sugerida para agregar el pase a la Billetera de Google.

    

19. Se abrirá la app de la Billetera de Google. El usuario presiona un botón para agregar el pase a su billetera.

    

20. El usuario presiona un botón para ver su pase.

    

21. Se muestra la tarjeta de embarque con el código QR.