Puedes usar Mensajes de Google con RCS y Google Wallet para diseñar un flujo de registro fluido: 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 esté en su billetera, el pase se actualizará automáticamente si cambian los detalles del vuelo. Los usuarios tienen acceso rápido a una tarjeta de embarque actualizada en sus teléfonos.
En este documento, se describen los pasos técnicos para implementar una tarjeta de embarque en el flujo de la Billetera de Google. También cuenta con una conversación de muestra con sugerencias de diseño para una experiencia de registro eficiente y sin problemas con RBM.
Implementación técnica
Para implementar una tarjeta de embarque en el flujo de la Billetera de Google, deberás trabajar 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:
- Regístrate para obtener una cuenta de la entidad emisora de la Billetera y crear y distribuir pases para la Billetera de Google.
- Crea un proyecto de Google Cloud Platform (GCP) si aún no tienes uno.
- Habilita la API de la Billetera de Google.
- Crea una cuenta de servicio y una clave para llamar a la API de la Billetera de Google.
- Autoriza la cuenta de servicio en Google Pay y en la Consola de la Billetera.
- Usa la plantilla de tarjeta de embarque para crear una nueva clase de embarque.
API de Billetera de Google
Para crear una tarjeta de embarque y generar una URL de Add to Google Wallet para RBM, sigue estos pasos:
- Realiza las autenticaciones y autorizaciones necesarias.
- Crea un objeto Passes.
- Obtener un token web JSON (JWT) firmado La longitud máxima de un JWT codificado es de 2,048 caracteres.
- Usa el JWT para generar una URL de Add to Google Wallet.
API de RBM
Para enviar una sugerencia de agregar a la Billetera de Google desde RBM, envía una acción de URL abierta. En la carga útil del mensaje, haz lo siguiente:
- En
text, ingresa "Agregar a la Billetera de Google". - 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 sugerencias.
Diseño de conversación
En esta muestra, se usa la potencia única de la conversación para guiar a los usuarios en un flujo de registro completo. Demuestra cómo puedes usar el diálogo natural y funciones enriquecidas, como sugerencias con solo presionar y tarjetas enriquecidas, para ayudar a los usuarios a alcanzar sus objetivos. En este caso, sus objetivos son: (1) personalizar mi experiencia de vuelo, (2) recibir mi tarjeta de embarque y (3) agregarla a la Billetera de Google para facilitar el acceso en el aeropuerto.
A continuación, se incluye una descripción general de la conversación. Luego, se incluyen sugerencias de diseño y un desglose paso a paso del flujo. A fin de implementar un diseño similar para tu agente, consulta las muestras de código que se encuentran a continuación.
Consejos de diseño
Ten en cuenta estos principios cuando diseñes tu flujo de verificación:
- Su primer mensaje es el más importante. Establece brevemente el propósito de la conversación para que el usuario tenga un motivo para participar.
- Cada mensaje debe proporcionar un pequeño fragmento de información y solicitarle al usuario que responda. Las respuestas sugeridas y las acciones sugeridas facilitan dar el siguiente paso.
- Tu agente debe ser responsivo, no robótico. Usa un lenguaje que refleje el tono de voz de tu marca. ¿Cómo hablaría su representante de marca ideal con un cliente?
- A las personas les gusta sentirse especiales. Puedes personalizar la experiencia de check-in si sugieres 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 de registro del usuario antes de enviarle su tarjeta de embarque. Dale un toque humano con un despeje amable.
Flujo de registro
El agente notifica al usuario que el check-in de su vuelo está abierto.
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);El usuario presiona una respuesta sugerida para acceder.
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); });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);El usuario presiona una respuesta sugerida para aceptarla.
El agente agradece al usuario y presenta 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); });El agente le pide 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);El usuario presiona una respuesta sugerida para el asiento que eligió.
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); });El agente le pide al usuario que elija su comida en tránsito.
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); });El agente muestra las opciones de comidas.
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);El usuario presiona una respuesta sugerida para la comida que eligió.
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); });El agente resume los detalles de entrada.
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);El usuario presiona una respuesta sugerida para confirmar los detalles del registro.
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); });El agente envía la tarjeta de embarque 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 que proporciona la aerolínea. La imagen debe mostrar toda la información de embarque necesaria, incluido un código de barras para escanear. Los usuarios pueden presionar la imagen para ver y escanear su tarjeta de embarque desde la app de Mensajes de Google.
Aparecerá una sugerencia Add to Google Wallet en la tarjeta enriquecida. Esta sugerencia activa una acción de URL abierta que abre la app de la Billetera de Google, en la que el usuario puede agregar fácilmente la tarjeta de embarque a su billetera. (si la app no está en el dispositivo del usuario, se le solicita 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 las actualizaciones de estado si cambian los detalles del vuelo.
Los usuarios que no agreguen su pase a la Billetera de Google también deben estar actualizados. Envía un mensaje al usuario sobre cualquier cambio en la información de embarque que se muestra en la tarjeta enriquecida.
El usuario presiona una acción sugerida para agregar el pase a la Billetera de Google.
Se abrirá la app de la Billetera de Google. El usuario presiona un botón para agregar el pase a su billetera.
El usuario presiona un botón para ver su pase.
Se muestra la tarjeta de embarque con el código QR.
