Вы можете использовать Сообщения от Google с RCS и Google Кошельком , чтобы организовать беспрепятственный процесс регистрации: пользователь завершает регистрацию, получает свой посадочный талон и добавляет его непосредственно в Google Кошелек из приложения Сообщения. Оказавшись в кошельке, пропуск автоматически обновляется, если данные о рейсе меняются. Пользователи имеют быстрый доступ к актуальному посадочному талону прямо на своем телефоне.
В этом документе описываются технические шаги по внедрению посадочного талона в поток Google Кошелька. В нем также есть образец беседы с советами по дизайну для удобной и эффективной регистрации с помощью RBM.
Техническая реализация
Чтобы внедрить посадочный талон в поток Google Кошелька, вы будете работать с API Google Кошелька и RBM API.
Предпосылки
Чтобы начать работу с Google Wallet API, выполните следующие действия :
- Зарегистрируйте учетную запись эмитента Кошелька, чтобы создавать и распространять пропуска для Google Кошелька.
- Создайте проект Google Cloud Platform (GCP), если у вас его еще нет.
- Включите API Google Кошелька.
- Создайте учетную запись службы и ключ, чтобы вы могли вызывать API Google Wallet.
- Авторизуйте сервисный аккаунт в консоли Google Pay и Wallet.
- Используйте шаблон посадочного талона для создания нового класса интерната.
API Google Кошелька
Чтобы создать посадочный талон и сгенерировать URL-адрес добавления в Google Кошелек для RBM, выполните следующие действия :
- Выполните необходимые проверки подлинности и авторизации.
- Создайте объект пропуска.
- Получите подписанный веб-токен JSON (JWT). Максимальная длина закодированного JWT составляет 2048 символов.
- Используйте JWT для создания URL-адреса добавления в Google Wallet.
API УБМ
Чтобы отправить предложение «Добавить в Google Кошелек» из RBM, отправьте действие «Открыть URL» . В полезной нагрузке сообщения выполните следующие действия:
- Для
textвведите «Добавить в Google Кошелек». - В поле
urlвведите URL-адрес добавления в Google Кошелек.
Значок Google Кошелька будет автоматически отображаться на ярлыке предложения.
Дизайн разговора
В этом образце используется уникальная возможность диалога, чтобы провести пользователей через полный процесс регистрации. Он демонстрирует, как можно использовать естественный диалог и расширенные функции, такие как предложения одним касанием и расширенные карточки, чтобы помочь пользователям достичь своих целей. В этом случае их целями являются: (1) настроить мой опыт полета, (2) получить мой посадочный талон и (3) добавить его в Google Wallet для быстрого доступа в аэропорту.
Ниже приведен обзор разговора. Далее следуют советы по дизайну и пошаговое описание процесса. Чтобы реализовать аналогичный дизайн для вашего агента, см. примеры кода ниже шагов.
Совет по дизайну
Помните об этих принципах при разработке процесса регистрации:
- Ваше первое сообщение самое важное. Кратко сформулируйте цель разговора, чтобы у пользователя была причина участвовать.
- Каждое сообщение должно содержать небольшой фрагмент информации и предлагать пользователю ответить. Предлагаемые ответы и рекомендуемые действия упрощают переход к следующему шагу.
- Ваш агент должен быть отзывчивым, а не роботизированным. Используйте язык, который отражает тон голоса вашего бренда. Как бы ваш идеальный представитель бренда общался с покупателем?
- Людям нравится чувствовать себя особенными. Вы можете персонализировать процесс регистрации, предлагая места или блюда на основе истории полетов пользователя.
- Богатые карточки и карусели делают общение более динамичным. Используйте их, чтобы делиться изображениями и деталями, которые помогут пользователю выбрать один из вариантов.
- Хороший разговор заканчивается хорошо. Перед отправкой посадочного талона подтвердите данные регистрации пользователя. Добавьте человеческое прикосновение с дружескими проводами.
Процесс регистрации
Агент уведомляет пользователя о том, что регистрация на его рейс открыта.
Пример кода
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);Пользователь нажимает на предложенный ответ, чтобы отметиться.
Агент устанавливает ожидания для процесса регистрации.
Пример кода
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); });Агент просит пользователя согласиться с политикой безопасности.
Пример кода
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);Пользователь нажимает на предложенный ответ, чтобы согласиться.
Агент благодарит пользователя и представляет следующий шаг.
Пример кода
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); });Агент предлагает пользователю выбрать место.
Пример кода
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);Пользователь нажимает на предложенный ответ для выбранного места.
Агент подтверждает выбор пользователя.
Пример кода
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); });Агент просит пользователя выбрать питание на борту.
Пример кода
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); });Агент показывает варианты питания.
Пример кода
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);Пользователь нажимает на предложенный ответ для выбранного блюда.
Агент подтверждает выбор пользователя.
Пример кода
const params = { messageText: `Vegetarian it is 💚`, msisdn: msisdn, }; let self = this; rbmApiHelper.sendMessage(params, function (response, err) { self.sendAskConfirmation(msisdn); });Агент суммирует детали регистрации.
Пример кода
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);Пользователь нажимает предложенный ответ, чтобы подтвердить данные регистрации.
Агент сообщает, что регистрация завершена.
Пример кода
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); });Агент отправляет посадочный талон пользователя.
Пример кода
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); });На этой горизонтальной расширенной карточке изображение представляет собой полнофункциональный посадочный талон, предоставленный авиакомпанией. Изображение должно отображать всю необходимую информацию о посадке, включая сканируемый штрих-код. Пользователи могут просто коснуться изображения, чтобы просмотреть и отсканировать свой посадочный талон из приложения Google Messages.
На расширенной карточке появится предложение «Добавить в Google Кошелек» . Это предложение запускает действие «Открыть URL» , которое открывает приложение «Google Кошелек», где пользователь может легко добавить посадочный талон в свой кошелек. (Если приложение не установлено на устройстве пользователя, ему будет предложено установить его.) После добавления пропуска в Google Кошелек пользователь автоматически получает напоминание о рейсе и обновления статуса , если информация о его рейсе меняется.
Пользователей, которые не добавляют свой пропуск в Google Wallet, также следует держать в курсе. Сообщайте пользователю о любых изменениях в информации о посадке, отображаемой на расширенной карточке.
Пользователь нажимает на предложенное действие, чтобы добавить пропуск в Google Wallet.
Откроется приложение Google Кошелек. Пользователь нажимает кнопку, чтобы добавить пропуск в свой кошелек.
Пользователь нажимает кнопку, чтобы просмотреть свой пропуск.
Показан посадочный талон с QR-кодом.
