Puedes usar Mensajes de Google con RCS y la Billetera de Google para diseñar un flujo de registro sin problemas: el usuario completa el registro, recibe su tarjeta de embarque y la agrega directamente a la Billetera de Google desde la app de Mensajes. Una vez en la billetera, el pase 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 una tarjeta de embarque en el flujo de la Billetera de Google. También incluye una conversación de muestra con sugerencias de diseño para una experiencia de registro fluida y eficiente con RBM.
Implementación técnica
Para implementar un pase de abordar en el flujo de 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:
- Regístrate para obtener una cuenta de la entidad emisora de la Billetera para crear y distribuir pases para la Billetera de Google.
- Crea un proyecto de Google Cloud (GCP) si aún no tienes uno.
- Habilita la API de la Billetera de Google.
- Crea una cuenta de servicio y una clave para poder llamar a la API de la Billetera de Google.
- Autoriza la cuenta de servicio en la consola de Google Pay y Wallet.
- Usa la plantilla de tarjeta de embarque para crear una nueva clase de embarque.
API de la Billetera de Google
Para crear una tarjeta de embarque y generar una URL de Agregar a la Billetera de Google para RBM, sigue estos pasos:
- Realiza las autenticaciones y autorizaciones necesarias.
- Crea un objeto Passes.
- Obtén 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 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 Open URL. En la carga útil del mensaje, haz lo siguiente:
- Para
text, ingresa "Agregar a la Billetera de Google". - Para
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 la sugerencia.
Diseño de conversaciones
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. Muestra cómo puedes usar el diálogo natural y las funciones enriquecidas, como las sugerencias de un toque y las 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 acceder rápidamente 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. Para implementar un diseño similar para tu agente, consulta las muestras de código que se indican a continuación.
Consejos de diseño
Ten en cuenta estos principios cuando diseñes tu flujo de registro:
- Tu primer mensaje es el más importante. Indica brevemente el propósito de la conversación, de modo que el usuario tenga un motivo para participar.
- Cada mensaje debe proporcionar una pequeña cantidad de información y solicitarle al usuario que responda. Las respuestas sugeridas y las acciones sugeridas ayudan a los usuarios a 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 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 en función del 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 registro del usuario antes de enviar su tarjeta de embarque. Agrega un toque humano con un mensaje de despedida amigable.
Flujo de registro
El agente le notifica al usuario que el registro de entrada para 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 registrar su llegada.
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 aceptar.
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 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);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 durante el vuelo.
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 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);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 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);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 totalmente funcional que proporciona la aerolínea. La imagen debe mostrar toda la información de embarque necesaria, incluido un código de barras que se pueda escanear. Los usuarios pueden presionar la imagen para ver y escanear su tarjeta de embarque desde la app de Mensajes de Google.
Aparece una sugerencia para agregar a la Billetera de Google en la tarjeta enriquecida. Esta sugerencia activa una acción Open URL que abre la app de la Billetera de Google, en la que el usuario puede agregar el pase de abordar 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 actualizaciones de estado si cambian los detalles de su vuelo.
Los usuarios que no agreguen su pase a la Billetera de Google también deben mantenerse al día. 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 mostrará la tarjeta de embarque con el código QR.
