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

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

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

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

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

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

Макет

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

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

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

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

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

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

Портретные In-App сообщения

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

Альбомные In-App сообщения

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

Добавление колонок в альбомные In-App сообщения

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

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

Примечание

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

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

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

Заголовок

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

Примечание

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

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

Текст

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

Примечание

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

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

Изображение

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

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

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

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

Примечание

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

Кнопка

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

Примечание

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

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

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

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

Вы можете локализовать тексты вашего шаблона 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;
• Отправить push-уведомление, которое открывает In-App при нажатии;
• Показать отдельное In-App сообщение вашим пользователям.