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

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

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

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

Требуется помощь разработчика

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

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

• Pushwoosh SDK интегрирован в ваше приложение, чтобы In-App сообщения могли отображаться. Узнать больше
• Ваше приложение работает на iOS SDK 7.2.0+ или Android SDK 6.10.0+. Все три типа отображения (modal, fullscreen, stories) требуют одинаковой минимальной версии и работают на обеих платформах.

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

1. Перейдите в Content → In-apps.
2. Нажмите Add template.
3. Введите название шаблона.
4. Выберите Create native rich media.
5. В поле DISPLAY TYPE выберите modal, fullscreen или stories.
6. Нажмите Add template.

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

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

Осторожно

Выпадающий список Display type в верхней части редактора позволяет переключать типы в любое время, но при переключении все поля Content, Config и Actions ниже сбрасываются до значений по умолчанию для нового типа. Заполняйте контент только после того, как определитесь с типом.

Modal

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

• Content: заголовок и сообщение, каждое со своим цветом текста, а также опциональное изображение.
• Config: цвет фона карточки, переключатель Close button и переключатель Dim background, который затемняет экран за карточкой.
• Actions: одна или несколько кнопок. См. Настройка кнопок.

Fullscreen

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

• Content: изображение-обложка, а также заголовок и сообщение, каждое со своим цветом текста.
• Config: цвет обложки (отображается во время загрузки изображения или вместо него) и переключатель Close button.
• Actions: одна или несколько кнопок. См. Настройка кнопок.

Stories

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

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

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

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

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

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

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

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

Осторожно

Если вы отключите Close button и не добавите ни одной кнопки, у пользователя не будет на экране элемента управления для закрытия In-App сообщения.

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

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

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

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

Примечание

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

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

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

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

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

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

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

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

Примечание

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