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

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

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

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

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

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

Прежде чем создавать шаблон нативного 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 SDK 7.2.0+ или Android SDK 6.11.0+.

Кроссплатформенные фреймворки

Модуль нативных in-app сообщений поставляется по-разному в зависимости от вашего стека:

• Flutter автоматически включает модуль нативных in-app сообщений. Дополнительная настройка, кроме плагина Pushwoosh для Flutter, не требуется.
• React Native, Cordova, Capacitor, Unity и Expo не включают модуль нативных in-app сообщений. Добавьте его в базовый Android/iOS проект вашего приложения самостоятельно: pushwoosh-inapp-ui на Android, PushwooshInApp на iOS. Информацию о том, как добавлять нативные модули в ваш проект, смотрите в руководстве по интеграции для вашего фреймворка.
• Веб не поддерживается. Нативные in-app сообщения отображаются через Android и iOS SDK, а у Web SDK нет модуля для нативных in-app сообщений.

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

1. Перейдите в Контент → In-apps.
2. Нажмите на стрелку рядом с Создать in-app и выберите Нативный in-app. Нативный редактор откроется сразу.
3. Введите название шаблона.
4. В Типе отображения в верхней части редактора выберите тип: модальное окно, полноэкранное, истории, лист, карусель, баннер или видео. О том, что требуется для каждого типа, см. Настройка типа отображения.

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

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

Осторожно

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

Модальное окно

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

1. В разделе Контент добавьте заголовок и сообщение, каждое со своим цветом текста, а также необязательное изображение. См. Добавление изображения.
2. В разделе Конфигурация установите цвет фона карточки. Он заполнит пространство за вашим текстом и изображением.
3. Включите Кнопку закрытия, если хотите, чтобы у пользователей был элемент управления ✕ для закрытия in-app сообщения без нажатия на кнопку.
4. Включите Затемнить фон, чтобы затемнить экран за карточкой и сфокусировать внимание на вашем сообщении.
5. В разделе Действия добавьте одну или несколько кнопок. См. Настройка кнопок.

Полноэкранное

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

1. В разделе Контент добавьте изображение-обложку, а также заголовок и сообщение, каждое со своим цветом текста. См. Добавление изображения.
2. В разделе Конфигурация установите цвет обложки. Он будет отображаться во время загрузки изображения-обложки или сам по себе, если вы оставите поле изображения пустым.
3. Включите Кнопку закрытия, если хотите, чтобы у пользователей был элемент управления ✕ для закрытия in-app сообщения без нажатия на кнопку.
4. В разделе Действия добавьте одну или несколько кнопок. См. Настройка кнопок.

Истории

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

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

4. Нажмите Добавить под последним слайдом, чтобы добавить еще один, затем повторите шаги 1-3 для него.
5. В разделе Конфигурация включите Зациклить, если хотите, чтобы история начиналась заново с первого слайда после завершения последнего.
6. Включите Кнопку закрытия, если хотите, чтобы у пользователей был элемент управления ✕ для выхода до того, как все слайды будут просмотрены.

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

Лист

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

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

1. В разделе Контент добавьте заголовок и сообщение, каждое со своим цветом текста, а также необязательное изображение. См. Добавление изображения.
2. В разделе Конфигурация установите цвет фона листа. Он заполнит панель за вашим текстом и изображением.
3. Включите Кнопку закрытия, если хотите, чтобы у пользователей был элемент управления ✕ для закрытия листа без нажатия на кнопку.
4. В разделе Действия добавьте одну или несколько кнопок. См. Настройка кнопок.

Карусель

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

1. Заполните Изображение, Заголовок и Сообщение первой карточки (каждое со своим цветом текста). См. Добавление изображения.
2. Установите Действие для карточки. Выберите закрыть, чтобы закрыть in-app сообщение, когда пользователь нажмет на карточку, или url, чтобы открыть ссылку (те же опции, что и в Настройке кнопок).
3. Нажмите Добавить под последней карточкой, чтобы добавить еще одну, затем повторите шаги 1-2 для нее.
4. Включите Кнопку закрытия, если хотите, чтобы у пользователей был элемент управления ✕ для выхода из карусели без нажатия на карточку.

Осторожно

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

Баннер

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

1. В разделе Контент добавьте заголовок и сообщение, каждое со своим цветом текста, а также необязательное небольшое изображение. См. Добавление изображения.
2. В разделе Конфигурация установите Позицию на сверху или снизу, чтобы закрепить баннер у нужного края экрана.
3. Установите Автозакрытие, сек, чтобы баннер автоматически закрывался через указанное количество секунд. Оставьте поле пустым, чтобы баннер оставался на экране, пока пользователь его не закроет.
4. Установите цвет фона для полосы.
5. Включите Кнопку закрытия, если хотите, чтобы на баннере был элемент управления ✕.
6. В разделе Действия установите Действие на закрыть или url. У баннеров нет отдельных кнопок. Нажатие в любом месте баннера выполняет это действие. См. Настройка кнопок для описания поведения закрыть и url.

Осторожно

Если вы отключите Кнопку закрытия, установите Действие на url и оставите Автозакрытие пустым, баннер останется на экране без возможности его закрыть. Нажатие всегда будет открывать ссылку, а не закрывать сообщение.

Видео

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

Примечание

Для видео требуется iOS SDK 7.2.0+ или Android SDK 6.11.0+. На более старой версии Android SDK шаблон, использующий этот тип отображения, не будет отображаться. Подробности см. в разделе Поддержка платформ.

1. В разделе Контент установите URL видео (обязательно) на абсолютную HTTPS-ссылку на файл .m3u8 или .mp4. При желании добавьте изображение-постер, которое будет показано до начала воспроизведения, и резервное изображение, которое будет показано, если видео не может воспроизвестись.
2. Добавьте заголовок и сообщение, каждое со своим цветом текста.
3. В разделе Конфигурация включите Зациклить, чтобы видео перезапускалось после окончания.
4. Включите Без звука, чтобы воспроизведение начиналось с выключенным звуком.
5. Включите Кнопку закрытия, если хотите, чтобы у пользователей был элемент управления ✕ для закрытия in-app сообщения, не дожидаясь окончания видео.
6. В разделе Действия добавьте одну или несколько кнопок. См. Настройка кнопок.

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

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

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

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

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

1. Нажмите Персонализация рядом с панелью инструментов поля.
2. В разделе Тег выберите тег или User ID.
3. Выберите модификатор формата (например, С заглавной буквы или обычный).
4. При желании введите Значение тега по умолчанию.
5. Нажмите Вставить.

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

Совет

Для условной логики (например, показывать этот текст, только если тег равен определенному значению) введите синтаксис Liquid непосредственно в поле.

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

Примечание

Проверка Liquid при сохранении выявляет синтаксические ошибки, такие как незакрытый тег. Однако она может пропустить неполные выражения, которые вызовут ошибку только при отправке сообщения. Отправьте себе тестовое сообщение, если вы используете что-то сложнее простого тега.

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

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

• Текст кнопки и его цвет.
• Фон, Цвет рамки и Радиус рамки.
• Действие: выберите, что произойдет, когда пользователь нажмет на кнопку:
  • закрыть: закрывает in-app сообщение.
  • url: открывает ссылку, которую вы вводите в появившемся поле. Используйте веб-адрес (например, https://example.com) или диплинк в ваше приложение (например, myapp://product/123).

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

Осторожно

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

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

Каждое поле для изображения (изображение, изображение-обложка и изображение каждой карточки или слайда) работает одинаково. Вставьте URL размещенного изображения непосредственно в поле или нажмите Выбрать из Медиахранилища рядом с ним, чтобы открыть Медиахранилище и выбрать уже загруженное изображение. Выбор изображения из Медиахранилища заменяет любой URL, который в данный момент находится в поле.

Добавление штрих-кода

Рядом с Выбрать из Медиахранилища нажмите Создать штрих-код, чтобы открыть панель, которая генерирует сканируемый код Code 128, EAN-13, EAN-8, UPC-A или QR-код и записывает полученный URL в поле:

• Код. Значение для кодирования: либо фиксированный код, например SAVE20, либо тег устройства, например {Coupon|String|} или {LoyaltyCardNumber|String|}, чтобы каждый получатель видел свой собственный код. Тег устройства заполняется реальным значением получателя прямо на его устройстве, непосредственно перед появлением in-app сообщения. По умолчанию используется {Coupon|String|}.

• Символика. Выберите формат штрих-кода: Code 128, EAN-13, EAN-8 и UPC-A — это стандартные розничные штрих-коды, считываемые ручными сканерами, а QR — это квадратный код, который может сканировать любая камера телефона.
• Коррекция ошибок. Появляется только после того, как вы установите Символику на QR. В реальной жизни QR-коды могут быть поцарапаны, размыты или частично закрыты логотипом, а коррекция ошибок — это дополнительная информация, встроенная в код, чтобы он все равно сканировался, несмотря на повреждения. Выберите, какую степень повреждения он может выдержать: L, M, Q или H, от наименее до наиболее устойчивого. Более высокие уровни выдерживают больше повреждений, но создают более плотный и насыщенный код. По умолчанию используется M.

• Печатать код цифрами. Показать значение под кодом.

Когда Код является тегом устройства, в предпросмотре подставляется образец значения, так как он не может разрешить реальный тег получателя. Фиксированный код, например SAVE20, отображается в предпросмотре точно так, как был введен.

Нажмите Вставить в поле изображения, чтобы скопировать сгенерированный URL в поле Изображение выше.

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

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

Примечание

Селектор языка здесь учитывает только устройства на платформах, которые отображают контент in-app сообщений. Значения языка, установленные через теги на уровне пользователя, не привязаны к платформе устройства, поэтому они здесь не отображаются.

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

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

Примечание

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

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

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

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

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

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

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

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

Примечание

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