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

Перейдите в Контент → Rich media и нажмите Добавить шаблон:

Введите название шаблона, выберите Создать новый шаблон и нажмите Добавить шаблон:

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

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

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

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

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

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

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

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

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

После проектирования вашего Rich media с колонками для альбомной ориентации, переключитесь на вкладку Мобильные. Прокрутите вниз до раздела АДАПТИВНЫЙ ДИЗАЙН, который находится внизу панели настроек, и включите опцию Не группировать на мобильных устройствах.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В шаблонах по умолчанию есть готовый шаблон 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>

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

Чтобы добавить элемент меню, нажмите Добавить новый элемент:

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

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

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

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

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

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

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

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

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

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

• Показать in-app как часть Customer Journey;
• Отправить push-уведомление, которое открывает in-app при нажатии;
• Отобразить одно in-app сообщение вашим пользователям.