Веб-просмотр

Платформа Messenger позволяет использовать стандартный веб-просмотр и загружать веб-страницы в самом Messenger. Веб-просмотр предоставляет дополнительные возможности в общении с клиентами: например, позволяет им выбрать товары для покупки, места и даты для бронирования и т. д.

Отображение веб-просмотра

Открыть веб-просмотр можно следующими способами:

В каждом случае можно настроить внешний вид и работу веб-просмотра.

Если вы используете расширения Messenger, описанные в этом разделе, задайте для параметра messenger_extensions значение true. Это нужно сделать в элементе или кнопке меню, из которого вы вызываете этот параметр.

SDK расширений Messenger — обязательное внесение доменов в белый список

Для отображения веб-страницы с включенным SDK расширений Messenger в режиме веб-просмотра Messenger необходимо занести домен (включая субдомен) в белый список в свойстве whitelisted_domains профиля Messenger вашего бота. Благодаря этому доступ к данным пользователя через функции SDK будет только у доверенных доменов.

Дополнительные сведения о занесении доменов в белый список см. в справке по whitelisted_domains.

Настройка заголовка веб-просмотра

Как и для обычных веб-страниц, заголовок веб-просмотра определяется тегом <title>.

<html><head><title>My Awesome Webview</title></head>
   ...
</html>

Закрытие веб-просмотра

После выполнения транзакции рекомендуется закрыть веб-просмотр, особенно если после действий пользователя будет создано новое сообщение в переписке. Это можно сделать с помощью SDK расширений Messenger или URL перенаправления.

Закрытие с помощью SDK расширений Messenger

Чтобы закрыть веб-просмотр с помощью SDK, вызовите функцию MessengerExtensions.requestCloseBrowser(). Также можно реализовать обратные вызовы при успешном завершении или ошибке операции.

MessengerExtensions.requestCloseBrowser(function success() {
  // webview closed
}, function error(err) {
  // an error occurred
});

Закрытие с помощью перенаправления

Чтобы закрыть веб-просмотр, перенаправьте пользователя на URL следующего вида:

https://www.messenger.com/closeWindow/?image_url=<IMAGE_URL>&display_text=<DISPLAY_TEXT>

Значения параметров display_text и image_url будут отображаться в течение короткого времени, пока окно не закроется. Этот способ работает, только если вы перенаправляете пользователя со своего URL или Страницы. Если перейти по URL напрямую, браузер не закроется.

Этот метод работает только в Android. На устройствах с iOS текст и изображение будут показаны, но браузер не закроется автоматически.

SDK расширений Messenger

Для более качественной интеграции веб-просмотра в Messenger мы добавили SDK расширений Messenger для JavaScript. Он позволяет предоставить в веб-просмотре дополнительную информацию, например контекст переписки.

Подробнее см. в статье Добавление SDK расширений Messenger.

Рекомендации

Используйте веб-просмотр для многоступенчатого взаимодействия (более трех ступеней), при котором люди могут изменять вносимую информацию или перемещаться между этапами не последовательно.

Используйте веб-просмотр для отображения чисто визуального контента.

Используйте веб-просмотр для установки предпочтений пользователя или для изменения выбранных ранее вариантов.

Используйте веб-просмотр вместе с переписками.

Высота веб-просмотра должна соответствовать высоте контента. При этом должно оставаться достаточно места для контекста переписки.

Используйте расширения веб-просмотра Messenger, чтобы добавить в веб-просмотр контекст переписки.

Помните, что собирать информацию для заполнения форм можно поэтапно. Например, сначала можно получить ее в переписке, а для последующих изменений использовать форму в веб-просмотре.

Комбинируйте переписку и веб-просмотр и следите за краткостью. Каждое взаимодействие с пользователем не должно занимать много времени.

Примеры использования

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

Рекомендуемое оформление

  1. Люди переходят к веб-просмотру двумя способами: с помощью кнопки, если веб-просмотр встроен в переписку, или с помощью элемента меню, если доступ к веб-просмотру нужен постоянно (например, для изменения настроек и предпочтений). Можно использовать оба способа одновременно.
  2. Веб-просмотр отображается как наложение на переписку и может занимать 100 %, 75 % или 50 % высоты экрана в зависимости от контента и сценария использования.
  3. Во время или после взаимодействия пользователя с веб-просмотром можно отправить контент в переписку.
  4. После взаимодействия пользователь может закрыть веб-просмотр и вернуться к переписке самостоятельно. Вы также можете закрыть веб-просмотр, если пользователь выполнит необходимое действие (например, нажмет кнопку "Сохранить").