Создание in-app сообщений в no-code редакторе

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

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

Загрузить ZIP-файл с вашим HTML-кодом in-app сообщения.
Выбрать и настроить один из готовых шаблонов.
Создать собственный шаблон с нуля.

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

Определение макета

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

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

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

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

Создание Rich Media для портретной и альбомной ориентации

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

Портретная ориентация Rich Media

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

Альбомная ориентация Rich Media

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

Добавление колонок в Rich Media альбомной ориентации

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

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

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

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

Элементы контента

Заголовок

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

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

Текст

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

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

Изображение

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

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

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

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

Если вы хотите, чтобы при клике на изображение открывалась страница в вашем мобильном приложении, выберите опцию Открыть веб-сайт и вставьте Deep Link.

Кнопка

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

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

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

Если вы хотите, чтобы при нажатии кнопки открывалась страница в вашем мобильном приложении, выберите опцию Открыть веб-сайт и вставьте Deep Link.

Разделитель

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

Форма

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

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

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

Тип поля: тип данных, которые должны передаваться в поле;
Имя поля: имя параметра, в который передаются данные из поля;
Метка поля: текст, отображаемый над полем;
Текст-заполнитель;
Флажок, указывающий, является ли поле обязательным для отправки формы.

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

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

HTML

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

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

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

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

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

Персонализация контента

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

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

Многоязычные шаблоны

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

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

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

Общие настройки шаблона

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

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

Сохранение и использование шаблона

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

Теперь вы можете использовать ваш шаблон Rich Media для отправки in-app сообщений. Для этого следуйте данному руководству >