Создание нативных In-App сообщений

Нативные In-App сообщения используют готовые макеты, которые Pushwoosh SDK отображает непосредственно на устройстве, в отличие от HTML-страницы, которую загружает кастомное In-App сообщение. Это позволяет им загружаться быстрее и анимироваться более плавно, а для их создания вам не потребуются навыки дизайна или разработки.

Используйте нативные In-App сообщения, когда вам нужно быстро запустить акцию, напоминание или анонс функции, и при этом полностью кастомный макет не является обязательным. Если вам нужен полный контроль над дизайном, создайте In-App сообщение на основе HTML.

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

Прежде чем создавать шаблон нативного In-App сообщения, убедитесь, что:

Pushwoosh SDK интегрирован в ваше приложение, чтобы In-App сообщения могли отображаться. Узнать больше
Ваше приложение использует iOS SDK 7.2.0+ или Android SDK 6.10.0+ для модального окна, полноэкранного режима и историй. Для нижнего экрана, карусели и баннера требуется iOS SDK 7.2.1+ или Android SDK 6.10.1+. Видео пока доступно только для iOS.

Создание шаблона нативного In-App сообщения

Перейдите в Content → In-apps.
Нажмите Create in-app.
Введите название шаблона.
Выберите Create native rich media.
В DISPLAY TYPE выберите тип отображения: modal (модальное окно), fullscreen (полноэкранный), stories (истории), sheet (нижний экран), carousel (карусель), banner (баннер) или video (видео).
Нажмите Create in-app.

Диалоговое окно добавления нового шаблона с выбранной опцией «Создать нативный Rich Media» и выпадающим списком типа отображения, установленным на «модальное окно»

Откроется редактор с живым предпросмотром на мобильном устройстве справа и полями шаблона слева, сгруппированными в Content, Config и Actions. То, что вы видите в каждой группе, зависит от выбранного типа отображения.

Настройка типа отображения

Карточка, расположенная по центру, опционально отображаемая на затемненном фоне.

В разделе Content добавьте заголовок и сообщение, каждое со своим цветом текста, а также необязательное изображение. См. Добавление изображения.
В разделе Config установите цвет фона карточки. Он заполнит пространство за вашим текстом и изображением.
Включите Close button, если хотите, чтобы у пользователей была кнопка ✕ для закрытия In-App сообщения без нажатия на кнопку.
Включите Dim background, чтобы затемнить экран за карточкой и сфокусировать внимание на вашем сообщении.
В разделе Actions добавьте одну или несколько кнопок. См. Настройка кнопок.

Редактор нативных In-App сообщений для модального типа отображения с полями Content, Config и Actions, а также живым предпросмотром на мобильном устройстве

Полноэкранный режим (Fullscreen)

Изображение-обложка от края до края с текстом и кнопками поверх него. Заполните следующие поля на левой панели:

В разделе Content добавьте изображение-обложку, а также заголовок и сообщение, каждое со своим цветом текста. См. Добавление изображения.
В разделе Config установите цвет обложки. Он будет отображаться во время загрузки изображения-обложки или сам по себе, если вы оставите поле изображения пустым.
Включите Close button, если хотите, чтобы у пользователей была кнопка ✕ для закрытия In-App сообщения без нажатия на кнопку.
В разделе Actions добавьте одну или несколько кнопок. См. Настройка кнопок.

Редактор нативных In-App сообщений для полноэкранного типа отображения с полями для изображения-обложки, заголовка, сообщения и цвета обложки

Истории (Stories)

Последовательность полноэкранных слайдов с индикаторами прогресса вверху, похожая на истории в социальных сетях. Каждый слайд — это отдельная запись Stories в разделе Content.

Заполните Image, Title и Message (каждое со своим цветом текста) для первого слайда. См. Добавление изображения.
Установите Seconds — время в секундах, в течение которого слайд будет отображаться на экране перед переходом к следующему. Значение по умолчанию — 5. Введите значение от 1 до 30. Значения за пределами этого диапазона заблокируют кнопку Save с ошибкой валидации.
При желании нажмите Add внутри слайда, чтобы добавить для него собственную кнопку CTA. См. Настройка кнопок.

Слайд историй с полями Image, Title, Message и Seconds, а также вложенной записью Buttons с собственной ссылкой Add

Нажмите Add под последним слайдом, чтобы добавить еще один, затем повторите шаги 1-3 для него.
В разделе Config включите Loop, если хотите, чтобы история начиналась заново с первого слайда после завершения последнего.
Включите Close button, если хотите, чтобы у пользователей была кнопка ✕ для выхода до того, как все слайды будут просмотрены.

Панель Config для типа отображения «истории» с переключателями Loop и Close button

Пример того, как готовая история выглядит для пользователя

Нижний экран (Sheet)

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

Заполните следующие поля на левой панели:

В разделе Content добавьте заголовок и сообщение, каждое со своим цветом текста, а также необязательное изображение. См. Добавление изображения.
В разделе Config установите цвет фона экрана. Он заполнит панель за вашим текстом и изображением.
Включите Close button, если хотите, чтобы у пользователей была кнопка ✕ для закрытия экрана без нажатия на кнопку.
В разделе Actions добавьте одну или несколько кнопок. См. Настройка кнопок.

Редактор нативных In-App сообщений для типа отображения «нижний экран» с полями Content, Config и Actions, а также живым предпросмотром на мобильном устройстве

Карусель (Carousel)

Полноэкранное сообщение с несколькими карточками, которые пользователи могут пролистывать. Точки внизу показывают, какая карточка активна. В разделе Content каждая карточка — это отдельная запись Cards.

Заполните Image, Title и Message (каждое со своим цветом текста) для первой карточки. См. Добавление изображения.
Установите Action для карточки. Выберите close, чтобы закрыть In-App сообщение при нажатии на карточку, или url, чтобы открыть ссылку (те же опции, что и в Настройке кнопок).
Нажмите Add под последней карточкой, чтобы добавить еще одну, затем повторите шаги 1-2 для нее.
Включите Close button, если хотите, чтобы у пользователей была кнопка ✕ для выхода из карусели без нажатия на карточку.

Редактор нативных In-App сообщений для типа отображения «карусель» с двумя записями Cards и живым предпросмотром, показывающим точки пагинации

Компактная полоса, закрепленная у верхнего или нижнего края экрана, для сообщений, которые не должны блокировать весь интерфейс.

В разделе Content добавьте заголовок и сообщение, каждое со своим цветом текста, а также необязательное маленькое изображение. См. Добавление изображения.
В разделе Config установите Position на top или bottom, чтобы закрепить баннер у нужного края экрана.
Установите Auto-dismiss, sec, чтобы баннер автоматически закрывался через указанное количество секунд. Оставьте поле пустым, чтобы баннер оставался на экране, пока пользователь его не закроет.
Установите цвет фона для полосы.
Включите Close button, если хотите, чтобы на баннере была кнопка ✕.
В разделе Actions установите Action на close или url. У баннеров нет отдельных кнопок. Нажатие в любом месте баннера выполняет это действие. См. Настройка кнопок для описания поведения close и url.

Редактор нативных In-App сообщений для типа отображения «баннер» с полями Position, Auto-dismiss и Action, а также живым предпросмотром, закрепленным внизу

Видео (Video)

Полноэкранный плеер для ссылки на HLS-поток (.m3u8) или прямой файл .mp4, с необязательным заголовком, сообщением и кнопками поверх.

В разделе Content установите Video URL (обязательно) на абсолютную HTTPS-ссылку на файл .m3u8 или .mp4. При желании добавьте изображение-Poster, которое будет показано до начала воспроизведения, и Fallback image, которое будет показано, если видео не может воспроизвестись.
Добавьте заголовок и сообщение, каждое со своим цветом текста.
В разделе Config включите Loop, чтобы видео перезапускалось после окончания.
Включите Muted, чтобы воспроизведение начиналось без звука.
Включите Close button, если хотите, чтобы у пользователей была кнопка ✕ для закрытия In-App сообщения, не дожидаясь окончания видео.
В разделе Actions добавьте одну или несколько кнопок. См. Настройка кнопок.

Редактор нативных In-App сообщений для типа отображения «видео» с полями Content и Config, а также живым предпросмотром на мобильном устройстве

Настройка текстовых полей

Текстовые поля не поддерживают многострочный текст. Если вы нажмете Enter, редактор может показать перенос строки, но Pushwoosh сохранит вместо него пробел. На устройстве текст будет отображаться одной строкой.

Чтобы добавить эмодзи, нажмите Emoji рядом с панелью инструментов поля. Эмодзи поддерживаются в тех же текстовых полях, что и обычный текст. Проверьте живой предпросмотр, чтобы увидеть, как они выглядят в макете.

Добавление динамического контента

Каждое текстовое поле поддерживает персонализацию с помощью тегов и User ID.

Нажмите Personalization рядом с панелью инструментов поля.
В разделе Tag выберите тег или User ID.
Выберите модификатор формата (например, CapitalizeFirst или regular).
При желании введите Default Tag Value.
Нажмите Insert.

Поле сообщения с чипом тега имени, элементами управления Personalization и Emoji, а также панелью для тега, модификатора формата и значения тега по умолчанию

Вставленный тег отображается в виде чипа в поле. Вы можете изменить тег, модификатор и значение по умолчанию перед нажатием Insert. Персонализация использует те же теги, модификаторы и значения по умолчанию, что и Динамический контент.

Когда вы нажимаете Save, Pushwoosh проверяет динамический контент и Liquid в каждом текстовом поле. Если поле не проходит проверку (например, незакрытый тег {% if %}), кнопка Save блокируется, и появляется уведомление Dynamic content contains errors с указанием поля и языка, где произошла ошибка. Исправьте ошибку, затем снова нажмите Save.

Настройка кнопок

Модальное окно, полноэкранный режим, каждый слайд историй, нижний экран и видео используют одни и те же поля для кнопок:

Button text и его цвет.
Background, Border color и Border radius.
Action: выберите, что произойдет, когда пользователь нажмет на кнопку:
- close: закрывает In-App сообщение.
- url: открывает ссылку, которую вы вводите в появившемся поле. Используйте веб-адрес (например, https://example.com) или deep link в ваше приложение (например, myapp://product/123).

Панель Actions с записью Buttons, показывающей поля Button text, Color, Background, Border color, Border radius и Action

Нажмите Add, чтобы добавить еще одну кнопку, или × на кнопке, чтобы удалить ее.

Добавление изображения

Каждое поле для изображения (image, cover image и изображение каждой карточки или слайда) работает одинаково. Вставьте URL-адрес размещенного изображения непосредственно в поле или нажмите Choose from Media storage рядом с ним, чтобы открыть Хранилище медиафайлов и выбрать уже загруженное изображение. Выбор изображения из Хранилища медиафайлов заменяет любой URL-адрес, который в данный момент находится в поле.

Добавление локализаций

По умолчанию нативное In-App сообщение имеет один язык. Чтобы добавить больше:

Нажмите + рядом с селектором языка в верхней панели.
Выберите языки для добавления и нажмите Apply.

Диалоговое окно выбора языков с полем поиска, ссылками «Выбрать все», «Снять выделение со всех» и «Использовать последний выбор», а также списком языков

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

Сохранение шаблона

Нажмите Save в правом верхнем углу, чтобы сохранить изменения.

Затем шаблон появится в Content → In-apps вместе с другими вашими шаблонами In-App сообщений.

Использование в кампании

Шаблон нативного In-App сообщения появится в селекторе шаблонов вместе с другими вашими шаблонами In-App сообщений.

Вы можете использовать его, чтобы:

Отправить мгновенное In-App сообщение
Добавить шаг с In-App сообщением в Customer Journey
Открыть In-App сообщение, когда пользователь нажимает на пуш-уведомление