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

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

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

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

Здесь есть два способа создать шаблон:

1. Загрузить ZIP — загрузите ZIP-файл с вашим HTML In-App сообщением.
2. Создать новый шаблон — создайте шаблон в визуальном редакторе. После его создания вы можете начать с готового шаблона или с пустого.

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

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

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

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

Прежде чем добавлять блоки контента, настройте шаблон на вкладке Всплывающее окно:

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

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

Полноэкранное In-App сообщение

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

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

Рекомендации по изображениям для полноэкранных In-App сообщений (портретная ориентация)

Изображение и текст	Высокое разрешение: 1200 x 1000 px Минимальный размер: 600 x 500 px Соотношение сторон: 6:5
Только изображение	Высокое разрешение: 1200 x 2000 px Минимальный размер: 600 x 1000 px Соотношение сторон: 3:5

Примечание

Для нативных приложений iOS и Android откройте Настройки → Настройки In-App и установите положение сообщения на Полноэкранный.

Частичноэкранное In-App сообщение

Частичноэкранные In-App сообщения — это компактные оверлейные сообщения, которые оставляют часть приложения видимой за всплывающим окном. Используйте их для запросов на подписку, объявлений и промо-контента.

На вкладке Всплывающее окно установите меньшую ширину и высоту, чтобы всплывающее окно не закрывало весь экран.

Примечание

Для нативных приложений iOS и Android откройте Настройки → Настройки In-App и выберите По центру, Сверху или Снизу для положения сообщения.

Совет

Чтобы автоматизировать всплывающие окна для запроса на подписку и восстановления отписки в Customer Journey, см. Создание всплывающих окон для подписки и отписки.

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

Блоки контента

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

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

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

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

Портретная и ландшафтная ориентация

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

Портретная (вкладка «Мобильные»)

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

Ландшафтная (вкладка «Десктоп»)

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

Колонки в ландшафтных макетах

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

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

Примечание

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

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

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

Заголовок

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

Примечание

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

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

Текст

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

Примечание

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

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

Изображение

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

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

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

Чтобы разместить текст прямо поверх изображения, выберите блок изображения и нажмите Применить эффекты. Нажмите Текст, вставьте свой контент и настройте его параметры:

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

Примечание

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

Кнопка

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

Примечание

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

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

Чтобы указать действие, которое должно быть выполнено после нажатия кнопки, перейдите в раздел Действие и откройте выпадающий список Тип действия: URL или диплинк (открыть веб-сайт или диплинк), Закрыть всплывающее окно или Пользовательский Javascript (вставить пользовательский обработчик JavaScript).

Примечание

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

Разделитель

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

Форма

Примечание

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

Формы позволяют собирать электронные адреса, номера телефонов, предпочтения и другую информацию о пользователях, которая может быть полезна для будущих коммуникаций. Этот элемент настраивается как стандартная 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 сообщении. Используйте его для демонстрации нескольких продуктов, скриншотов или шагов онбординга.

Для настройки карусели:

1. Выбрав блок Карусель, переключайтесь между Мобильные и Десктоп в верхней части панели для настройки каждого вида.

2. В разделе Изображения используйте вкладки Изображение 1, Изображение 2, Изображение 3 и т.д., чтобы выбрать слайд. Нажмите +, чтобы добавить еще один слайд, или значок удаления, чтобы удалить активный.

3. Для выбранного слайда нажмите Загрузить изображение или выберите опцию из Больше изображений. Вы также можете вставить ссылку на размещенное изображение в поле URL изображения, включая изображение из вашего Медиахранилища.

4. Введите Альтернативный текст для слайда. Чтобы настроить само изображение, нажмите Редактировать изображение рядом с миниатюрой предпросмотра.

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

Таймер обратного отсчета

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

Для настройки таймера:

1. Выбрав блок Таймер, переключайтесь между Мобильные и Десктоп в верхней части панели для настройки каждого вида.

2. В разделе Обратный отсчет установите Время окончания на дату и время, когда обратный отсчет должен достичь нуля. Выберите Часовой пояс и Язык для меток таймера.

3. Включите Метки, чтобы показывать Дни, Часы, Минуты и Секунды под цифрами, или выключите, чтобы отображать только цифры обратного отсчета.

4. В разделе Стили установите Фон, Цвет цифр и Цвет меток. Выберите Шрифт цифр, Размер шрифта цифр, Шрифт меток и Размер шрифта меток.

5. При необходимости настройте другие опции в разделах Изображение, Действие и Общие.

Таблица

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

Для настройки таблицы:

1. Выбрав блок Таблица, переключайтесь между Мобильные и Десктоп в верхней части панели для настройки каждого вида.

2. В разделе Макет установите Столбцы и Строки с помощью кнопок + и -.

3. Выберите Цвет фона. Включите Граница, чтобы установить стиль, толщину и цвет, или используйте Больше опций для расширенных настроек границ. Включите Чередующиеся строки, чтобы чередовать фон строк.

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

5. В разделах Заголовок и Контент настройте шрифты, цвета и выравнивание текста для ячеек заголовка и тела.

6. При необходимости настройте Ссылки, Общие и Адаптивный дизайн.

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

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

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

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

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

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

Примечание

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

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

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

Для настройки In-App:

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

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

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

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

Опции включают: Полноэкранный, Сверху, По центру, Снизу

Установить анимацию появления и закрытия

Выберите, как сообщение появляется и исчезает на экране. В настройках используйте Анимация появления для входа и Анимация закрытия для выхода. Оба поля предлагают одинаковые опции:

• Вверх
• Вниз
• Влево
• Вправо
• Затухание: сообщение плавно появляется или исчезает.
• Нет: сообщение появляется или исчезает мгновенно, без анимации.
• По умолчанию: используется анимация, определенная в коде вашего приложения (по умолчанию в SDK).

Примечание

Затухание и Нет в настоящее время работают на Android. На iOS модальное окно появляется или исчезает мгновенно (выравнивание скоро появится).

Установить продолжительность анимации (необязательно)

Установите, сколько времени занимают анимации появления и закрытия.

1. В поле Продолжительность анимации введите значение от 100 до 3000 миллисекунд с шагом 100.
2. Оставьте поле пустым, чтобы использовать время по умолчанию из SDK.

Эта настройка применяется к анимации показа и скрытия модального окна на нативных iOS и Android.

Примечание

Продолжительность анимации (мс) не имеет предустановленного значения по умолчанию в редакторе. Когда поле пустое, SDK использует продолжительность из кода вашего приложения.

• На Android установите ее с помощью animationDuration() в модальных rich media для Android.
• На iOS см. модальные rich media для iOS для настроек анимации модального окна.

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

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

Опции включают: Влево, Вправо, Вверх, Вниз

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

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

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

Примечание

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

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

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