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

Видео на Youtube: Создание In-App сообщений без программирования в нашем простом редакторе

Добавление нового шаблона

Чтобы создать шаблон In-App сообщения, перейдите в Контент → In-App и нажмите Добавить шаблон:

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

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

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

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

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

Добавление контента

Макет

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

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

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

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

Создание In-App сообщений для портретной и альбомной ориентации

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

In-App сообщения в портретной ориентации

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

In-App сообщения в альбомной ориентации

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

Добавление колонок в In-App сообщения в альбомной ориентации

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

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

Примечание

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

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

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

Заголовок

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

Примечание

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

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

Текст

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

Примечание

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

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

Изображение

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

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

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

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

Примечание

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

Кнопка

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

Примечание

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

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

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

Примечание

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

Разделитель

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

Форма

Примечание

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

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

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

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

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

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

HTML

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

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

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

В шаблонах по умолчанию есть готовый шаблон In-App сообщения с пользовательской формой опроса. Вы можете использовать его в качестве примера или отправной точки для ваших собственных форм опросов.

Также вы можете улучшить свои 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>

Меню

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

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

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

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

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

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

Сначала вам нужно настроить Теги и настроить сбор данных от пользователей (например, через форму обратной связи). При создании In-App сообщений выберите необходимый блок контента, нажмите Объединить теги и выберите Тег, который вы хотите использовать:

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

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

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

Примечание

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

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

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

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

Настройка внешнего вида и поведения In-App сообщений (нативные приложения для iOS и Android)

Используйте Настройки In-App, чтобы контролировать, как ваши In-App сообщения выглядят и ведут себя в нативных приложениях для iOS и Android. Вы можете настроить положение на экране, выбрать анимацию и включить жесты смахивания для закрытия.

Чтобы настроить параметры In-App:

1. Нажмите Настройки в верхней части экрана.

2. В окне настроек выберите, как должно выглядеть и вести себя ваше In-App сообщение, настроив доступные опции:

Установить положение сообщения на экране

Выберите, где должно появляться сообщение.

Варианты: Во весь экран, Вверху, По центру, Внизу

Выбрать анимацию появления

Выберите, как сообщение появляется на экране.

Варианты: Вверх, Вниз, Влево, Вправо

Выбрать анимацию исчезновения

Выберите, как сообщение исчезает.

Варианты: Вверх, Вниз, Влево, Вправо

Включить смахивание для закрытия (необязательно)

Разрешите пользователям закрывать сообщение, смахивая в одном или нескольких направлениях.

Варианты: Влево, Вправо, Вверх, Вниз

3. После выбора предпочтений нажмите Применить, чтобы сохранить изменения, или Отмена, чтобы их отменить.

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

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

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

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