Создание нативных 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+ для modal, fullscreen и stories. Для Sheet, carousel и banner требуется iOS SDK 7.2.1+ или Android SDK 6.10.1+.

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

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

Диалоговое окно добавления нового шаблона с выбранной опцией Create native rich media и выпадающим списком типа отображения, установленным на modal

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

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

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

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

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

Fullscreen

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

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

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

Stories

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

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

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

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

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

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

Sheet

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

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

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

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

Carousel

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

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

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

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

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

Редактор нативных in-app сообщений для типа отображения banner с полями Position, Auto-dismiss и Action, и предпросмотром на мобильном устройстве, закрепленным внизу

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

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

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

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

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

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

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

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

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

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

Для modal, fullscreen, каждого слайда stories и sheet используются одни и те же поля кнопок:

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

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

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

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

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

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

Диалоговое окно выбора языков с полем поиска, ссылками Select all, Deselect all и Reuse last selection, а также списком языков

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

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

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

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

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

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

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

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