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

Чтобы создать шаблон In-App сообщения (также называемого Rich Media), перейдите в Content → In-Apps (Rich Media) и нажмите Add template:

Здесь у вас есть три варианта:

1. Загрузить ZIP-файл с вашим HTML In-App сообщением.
2. Выбрать и настроить один из готовых шаблонов.
3. Создать собственный шаблон с нуля.

В этой статье мы рассмотрим создание шаблона с нуля. Следуйте тем же шагам для настройки существующего шаблона.

Определите макет шаблона, перетаскивая необходимые блоки контента в тело шаблона. Вы можете добавить изображение, текст, кнопку, разделитель, заполняемую форму, HTML-блок и меню.

Если вы хотите разместить более одного элемента контента в одном ряду, добавьте в шаблон элемент «Колонки», выберите нужный тип блока и добавьте контент в каждую колонку:

Чтобы изменить цвет фона макета, кликните на его внешние края, убедитесь, что выбран весь макет, и выберите цвет:

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

Pushwoosh предоставляет гибкие возможности для создания Rich Media контента как в портретной, так и в альбомной ориентации, гарантируя, что ваши кампании будут выглядеть привлекательно и эффективно на всех устройствах.

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

Для Rich Media в альбомной ориентации, который обычно отображается на более широких экранах, таких как планшеты, или в горизонтально-ориентированных приложениях, например, играх или музыкальных плеерах, перейдите на вкладку Desktop в редакторе. Здесь вы можете структурировать ваш Rich Media, чтобы использовать преимущества более широкого горизонтального пространства.

Если вам нужно добавить колонки в ваш Rich Media для альбомной ориентации, сначала добавьте элемент Column и определите необходимое количество и макет колонок.

После разработки Rich Media с колонками для альбомной ориентации переключитесь на вкладку Mobile.

Прокрутите вниз до раздела RESPONSIVE DESIGN, который находится внизу панели настроек, и включите опцию Do Not Stack on Mobile.

Pushwoosh также позволяет смешивать и сочетать макеты колонок в вашем Rich Media. Вы можете настроить определенные колонки так, чтобы они располагались вертикально, в то время как другие останутся горизонтальными. Для этого настройте каждый блок колонки по мере необходимости.

Вы можете редактировать шрифт, цвет, выравнивание текста, высоту строки и параметры отступов для заголовков.

Вы также можете сэкономить время, позволив ИИ сгенерировать текст заголовка для вас. Нажмите на кнопку в разделе Smart Headings, введите несколько ключевых слов и нажмите Get Suggestions:

Тексты настраиваются так же, как и заголовки: вы можете изменять шрифт, цвет, выравнивание текста, высоту строки и параметры отступов.

Вы также можете использовать ИИ-редактор Pushwoosh, чтобы переписать ваш текст в другом тоне, изменить его длину и проверить грамматику. Для этого кликните на текстовый блок → Smart Text и выберите один из встроенных форматов текста:

Чтобы добавить изображение, кликните на блок изображения и перетащите ваш файл в панель редактора:

В качестве альтернативы вы можете указать Image URL вместо загрузки файла.

Вы также можете поэкспериментировать с генерацией изображений с помощью ИИ. Для этого нажмите на кнопку в разделе Magic Image, опишите изображение, которое вы хотите создать, и нажмите Generate Images:

В разделе Action вы можете задать действие, которое должно выполняться при клике на изображение: открыть веб-сайт (или диплинк на страницу в вашем приложении) или закрыть всплывающее окно. Вы также можете вставить пользовательский атрибут обработчика JavaScript для установки действия по клику на изображение. Если никакого действия не требуется, проигнорируйте эту настройку.

Если вы хотите, чтобы при клике на изображение открывалась страница в вашем мобильном приложении, выберите опцию Open Website и вставьте диплинк.

После добавления кнопки в ваш шаблон, вы можете настроить её текст, цвет, отступы и границы.

ИИ может помочь вам придумать текст для кнопки. Просто нажмите на кнопку в разделе Smart Buttons, введите ключевые слова и нажмите Get Suggestions:

Чтобы указать действие, которое должно быть выполнено после нажатия на кнопку, перейдите в раздел Action и выберите нужный вариант: открыть веб-сайт или закрыть всплывающее окно. Вы также можете вставить пользовательский атрибут обработчика JavaScript для установки действия по клику на кнопку.

Если вы хотите, чтобы при нажатии на кнопку открывалась страница в вашем мобильном приложении, выберите опцию Open Website и вставьте диплинк.

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

Для настройки этого элемента вам понадобится помощь разработчика.

Формы позволяют собирать адреса электронной почты, номера телефонов, предпочтения и другую информацию о пользователях, которая может быть полезна для будущих коммуникаций. Этот элемент настраивается как стандартная HTML-форма: данные отправляются в GET- или POST-запросе на адрес, указанный в поле URL.

Кликните на имя поля, чтобы настроить его параметры:

• Field Type: тип данных, который должен передаваться в поле;
• Field Name: имя параметра, в который передаются данные из поля;
• Field Label: текст, отображаемый над полем;
• Placeholder Text;
• Флажок, указывающий, является ли поле обязательным для отправки формы.

Чтобы добавить еще одно поле, нажмите Add New Field и выберите тип данных:

Вы можете настраивать параметры формы, такие как ширина, выравнивание, расстояние между полями, текст кнопки, цвета и шрифты.

Добавьте блок HTML, если хотите включить в шаблон свой собственный HTML-код.

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

Чтобы добавить элемент меню, нажмите Add New Item:

Добавьте текст элемента и установите действие, которое должно выполняться при клике на него:

Выберите горизонтальный или вертикальный тип меню и при необходимости добавьте разделитель между элементами:

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

Сначала вам нужно настроить Теги и сбор данных от пользователей (например, через форму обратной связи). При создании Rich Media выберите нужный блок контента, нажмите Merge Tags и выберите Тег, который хотите использовать:

Вы можете локализовать тексты в вашем шаблоне Rich Media для каждого языка, на котором говорят ваши пользователи. Для этого переключайтесь между языками в списке Editable language и редактируйте контент для каждого языка отдельно:

Если контент не локализован, он будет отображаться на языке, указанном как default в Language settings.

Любой элемент, который вы добавляете в шаблон, появляется с одинаковым контентом для всех языков. Не забывайте локализовать добавленные тексты (включая тексты кнопок) для всех языков, которые вы используете в вашем шаблоне.

На вкладке Popup вы можете настроить общие параметры шаблона:

• Установить положение всплывающего окна на экране;
• Изменить ширину и высоту всплывающего окна;
• Настроить скругление границ;
• Настроить параметры контента для всего шаблона: выравнивание, ширину, шрифты и цвета;
• Установить цвет фона или добавить фоновое изображение;
• Настроить положение и внешний вид кнопки закрытия.

Нажмите Save, чтобы применить изменения:

Теперь вы можете использовать ваш шаблон Rich Media для отправки In-App сообщений. Пожалуйста, следуйте этому руководству, чтобы сделать это >