Создание Rich media во встроенном редакторе

1. Добавьте новый шаблон

Перейдите в Content → Rich media и нажмите Add template:

Введите название шаблона, выберите Create new template и нажмите Add template:

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

2. Добавьте контент

Макет

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

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

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

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

Создание портретных и альбомных Rich media

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

Портретные Rich media

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

Альбомные Rich media

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

Добавление колонок в альбомные Rich media

Если вам нужно добавить колонки в альбомные Rich media, сначала добавьте элемент Column и определите необходимое количество и макет колонок.

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

Note

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

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

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

Заголовок

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

Note

Если вы хотите персонализировать заголовок для каждого пользователя, добавьте в него Tags.

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

Текст

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

Note

Если вы хотите персонализировать текст для каждого пользователя, добавьте в него Tags.

Вы также можете улучшить свой текст, используя опцию Smart Text:

Изображение

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

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

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

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

Note

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

Кнопка

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

Note

Если вы хотите персонализировать текст кнопки для каждого пользователя, добавьте в него Tags.

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

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

Note

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

Разделитель

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

Форма

Note

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

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

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

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

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

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

HTML

Блок HTML позволяет добавлять в шаблон ваш собственный HTML-код.

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

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

В стандартных шаблонах есть готовый шаблон Rich media с кастомной формой опроса. Вы можете использовать его в качестве примера или отправной точки для создания собственных форм опросов.

Кроме того, вы можете улучшить свои in-app сообщения, встроив видео для более увлекательного пользовательского опыта. Вот пример того, как встроить видео с YouTube с помощью HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>In-App Video Example</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    text-align: center;
  }
  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
</head>
<body>

<h1>In-App Video Example</h1>

<div class="video-container">
       <iframe src="https://www.youtube.com/embed/TN1uyD2mONs?autoplay=1&mute=1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

</body>
</html>

Меню

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

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

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

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

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

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

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

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

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

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

Note

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

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

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

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

3. Сохраните и используйте шаблон

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

Теперь вы можете использовать ваш шаблон Rich media одним из следующих способов:

• Показать in-app как часть customer journey;
• Отправить push, который открывает in-app при нажатии;
• Показать отдельное in-app вашим пользователям.