Создание 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 сообщениях. Вы можете настроить определенные колонки так, чтобы они группировались вертикально, а другие оставались горизонтальными. Для этого настройте каждый блок колонки по мере необходимости.

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

Заголовок

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

Примечание

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

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

Текст

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

Примечание

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

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

Изображение

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

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

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

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

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

Примечание

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

Кнопка

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

Примечание

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

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

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

Примечание

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

Разделитель

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

Форма

Примечание

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

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

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

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

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

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

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

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

Выбрать анимацию закрытия

Выберите, как сообщение исчезает. В настройках это опция Анимация закрытия.

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

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

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

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

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

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

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

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

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