Добавьте посадочный талон в Google Кошелек

С помощью Google Сообщений , RCS и Google Кошелька можно создать удобный процесс регистрации: пользователь проходит регистрацию, получает посадочный талон и добавляет его непосредственно в Google Кошелек из приложения «Сообщения». После добавления в Кошелек талон автоматически обновляется при изменении данных рейса. Пользователи получают быстрый доступ к актуальному посадочному талону прямо на своем телефоне.

В этом документе описаны технические шаги по внедрению процесса регистрации пассажиров через Google Wallet. Также представлен пример диалога с рекомендациями по дизайну для обеспечения плавной и эффективной регистрации с использованием RBM.

Техническая реализация

Для реализации процесса отправки посадочного талона в Google Wallet вам потребуется использовать API Google Wallet и API RBM.

Предварительные требования

Для начала работы с API Google Wallet выполните следующие необходимые шаги :

  1. Зарегистрируйтесь в качестве эмитента кошелька, чтобы создавать и распространять пропуска для Google Wallet.
  2. Если у вас его еще нет, создайте проект в Google Cloud (GCP).
  3. Включите API Google Wallet.
  4. Создайте учетную запись службы и ключ, чтобы иметь возможность вызывать API Google Wallet.
  5. Авторизуйте учетную запись сервиса в консоли Google Pay и Wallet.
  6. Используйте шаблон посадочного талона для создания нового класса посадки.

API Google Wallet

Чтобы создать посадочный талон и сгенерировать URL-адрес для добавления в Google Wallet для RBM, выполните следующие шаги :

  1. Выполните необходимые действия по аутентификации и авторизации.
  2. Создайте объект Passes.
  3. Получите подписанный JSON Web Token (JWT). Максимальная длина закодированного JWT составляет 2048 символов.
  4. Используйте JWT для генерации URL-адреса для добавления в Google Wallet.

API RBM

Чтобы отправить предложение «Добавить в Google Wallet» из RBM, отправьте действие «Открыть URL» . В полезной нагрузке сообщения выполните следующие действия:

  1. В text " введите "Добавить в Google Wallet".
  2. В url введите URL-адрес функции «Добавить в Google Wallet».

Значок Google Wallet автоматически отобразится в подсказке.

Значок Google Wallet в предложении «Добавить в Google Wallet»

Дизайн диалога

В этом примере используется уникальная возможность диалога, чтобы провести пользователей через полный процесс регистрации. Он демонстрирует, как можно использовать естественный диалог и расширенные функции, такие как подсказки в одно касание и расширенные карточки, чтобы помочь пользователям достичь своих целей. В данном случае их цели: (1) персонализировать свой полет, (2) получить посадочный талон и (3) добавить его в Google Wallet для быстрого доступа в аэропорту.

Далее следует обзор диалога. За ним следуют советы по проектированию и пошаговое описание процесса. Чтобы реализовать аналогичный дизайн для вашего агента, ознакомьтесь с примерами кода, приведенными после шагов.

Схема разговора

Советы по дизайну

При разработке процедуры регистрации учитывайте следующие принципы:

  • Ваше первое сообщение — самое важное. Кратко изложите цель разговора, чтобы у пользователя была причина вступить в диалог.
  • Каждое сообщение должно содержать небольшой фрагмент информации и побуждать пользователя к ответу. Предложенные ответы и действия помогают пользователям сделать следующий шаг.
  • Ваш агент должен быть отзывчивым, а не роботизированным. Используйте язык, отражающий стиль общения вашего бренда. Как бы ваш идеальный представитель бренда общался с клиентом?
  • Людям нравится чувствовать себя особенными. Вы можете персонализировать процесс регистрации, предлагая места или питание на основе истории полетов пользователя.
  • Наполненные карточками элементы и карусели делают общение более динамичным. Используйте их для демонстрации изображений и подробной информации, которая поможет пользователю выбрать подходящий вариант.
  • Хороший разговор заканчивается хорошо. Подтвердите данные регистрации пользователя, прежде чем отправлять ему посадочный талон. Добавьте человечности, дружелюбно прощаясь.

Процесс регистрации

  1. Сотрудник уведомляет пользователя о том, что регистрация на его рейс открыта.

    Приветственное сообщение с информацией о регистрации и предлагаемыми вариантами ответов.

    Пример кода 

    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. Пользователь нажимает на предложенный ответ, чтобы отметиться.

    Предложение о регистрации принято

  3. Агент разъясняет, чего ожидать от процесса регистрации.

    Сообщение гласит: Отлично. Для регистрации нужно всего 3 шага. Вот первый шаг, чтобы вы присоединились к нам.

    Пример кода 

    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. Агент просит пользователя согласиться с политикой безопасности.

    Карточка с инфографикой, иллюстрирующей политику безопасности, и предложениями согласиться или не согласиться. Текст на карточке гласит: Чтобы помочь нам обеспечить безопасный полет, ознакомьтесь с нашей политикой безопасности и сообщите нам о своем согласии.

    Пример кода 

    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. Пользователь нажимает на предложенный ответ, чтобы согласиться.

    Предложение о согласии было учтено.

  6. Агент благодарит пользователя и сообщает о следующем шаге.

    В сообщении говорится: Спасибо, безопасный пассажир — счастливый пассажир! Вот следующий шаг.

    Пример кода 

    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. Агент предлагает пользователю выбрать место.

    Карточка с инфографикой схемы рассадки. Текст на карточке гласит: «Пора устроиться поудобнее! Мы порекомендовали вам несколько мест, исходя из вашего последнего рейса. Выберите желаемое место или сообщите нам свой выбор, введя номер места». Далее на карточке представлены несколько вариантов рассадки.

    Пример кода 

    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. Пользователь выбирает предложенный ответ для выбранного им места.

    Предложение по месту 18А было рассмотрено.

  9. Агент подтверждает выбор пользователя.

    Сообщение гласит: Место 18А, вы его получили.

    Пример кода 

    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. Агент предлагает пользователю выбрать питание на борту самолета.

    В сообщении говорится: «Теперь поговорим о еде. Вы можете предварительно заказать питание на борту. Вас устроит вегетарианское блюдо или блюдо из курицы?»

    Пример кода 

    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. Агент показывает варианты блюд.

    В карусели карточек Rich Card Carousel представлены две карточки: одна с изображением салата, а другая — с изображением жареной курицы. На обеих карточках указан список ингредиентов и предложен вариант блюда.

    Пример кода 

    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. Пользователь нажимает на предложенный вариант ответа для выбранного им блюда.

    Предложение выбрать вегетарианский вариант было принято.

  13. Агент подтверждает выбор пользователя.

    В сообщении указано: Это вегетарианское блюдо.

    Пример кода 

    const params = {
  messageText: `Vegetarian it is 💚`,
  msisdn: msisdn,
};  

let self = this;  

rbmApiHelper.sendMessage(params, function (response, err) {
  self.sendAskConfirmation(msisdn);  
});

  14. Агент подводит итоги регистрации.

    В сообщении говорится: «Вот что мы записали: вы выбрали место 18A и вегетарианское питание. Пожалуйста, подтвердите свой выбор. Ниже сообщения появятся предложения по подтверждению деталей, изменению питания или места».

    Пример кода 

    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. Пользователь нажимает на предложенный ответ, чтобы подтвердить данные для регистрации.

    Была подана просьба подтвердить данные.

  16. Сотрудник объявляет, что регистрация завершена.

    Сообщение гласит: Ура! Ваша регистрация на рейс завершена. Вот ваш посадочный талон. Мы будем очень рады видеть вас в ближайшее время!

    Пример кода 

    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. Агент отправляет пользователю посадочный талон.

    На расширенной карточке отображается изображение посадочного талона с QR-кодом и информацией о рейсе. Текст на карточке гласит: «Мы будем держать вас в курсе! Вы получите уведомление, если информация о вашем рейсе изменится». В качестве варианта на карточке предлагается «Добавить в Google Wallet».

    Пример кода 

    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 Сообщения.

    В расширенной карточке появляется предложение «Добавить в Google Wallet» . Это предложение запускает действие «Открыть URL» , которое открывает приложение Google Wallet, где пользователь может добавить посадочный талон в свой кошелек. (Если приложение не установлено на устройстве пользователя, ему будет предложено установить его.) После добавления посадочного талона в Google Wallet пользователь автоматически получает напоминание о рейсе и обновления статуса , если данные о рейсе изменяются.

    Пользователей, которые не добавили свой проездной в Google Wallet, также следует информировать об изменениях. Сообщайте пользователю о любых изменениях в посадочной информации, отображаемой на расширенной карте.

  18. Пользователь нажимает на предложенное действие, чтобы добавить пароль в Google Wallet.

    Значок Google Wallet и предложение «Добавить в Google Wallet».

  19. Открывается приложение Google Wallet. Пользователь нажимает кнопку, чтобы добавить пароль в свой кошелек.

    В приложении Wallet отображается упрощенный посадочный талон и кнопка «Добавить».

  20. Пользователь нажимает кнопку, чтобы просмотреть свой пропуск.

    Над паролем отображается галочка. Появляется кнопка «Просмотреть в Google Wallet».

  21. Показан посадочный талон с QR-кодом.

    Посадочный талон со всеми данными о рейсе и QR-кодом.