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

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

Примечание

Прежде чем начать, интегрируйте Pushwoosh SDK, чтобы In-App сообщения могли появляться в вашем приложении. Узнать больше

Создание нового шаблона In-App

Шаблон In-App — это многоразовый дизайн, который вы создаете один раз, а затем показываете пользователям в кампаниях. Вы можете создать его, загрузив собственный HTML ZIP-архив или собрав его во встроенном редакторе. В этой статье рассматривается создание шаблона с нуля во встроенном редакторе. Следуйте этим же шагам для настройки существующего шаблона.

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

3. Введите название шаблона.
4. Выберите способ создания шаблона:
   • Загрузить ZIP: загрузите ZIP-файл с вашим HTML In-App сообщением.
   • Создать новый шаблон: соберите шаблон во встроенном редакторе.
5. Выберите Создать новый шаблон.
6. Нажмите Добавить шаблон.

Изучение интерфейса редактора

Встроенный редактор состоит из четырех областей. Каждая из них имеет свое четкое предназначение.

Верхняя панель

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

Холст

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

Слои

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

Правая панель

Используйте Блоки на правой панели для добавления контента в сообщение и Настройки, когда хотите применить стили ко всему шаблону сразу. См. Настройка стилей для всего шаблона.

Начало сборки шаблона

После создания шаблона редактор открывается с пустым холстом и вкладкой Блоки справа.

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

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

Блоки контента — это строительные элементы шаблона In-App во встроенном редакторе. Вы комбинируете заголовки, текст, изображения, кнопки и другие блоки в один макет.

Откройте вкладку Блоки и перетащите блок на холст или нажмите на блок, чтобы добавить его. Доступные блоки:

• Заголовок: заголовки и короткие подзаголовки в сообщении
• Текст: основной текст и длинные описания
• Кнопка: кликабельный призыв к действию
• Изображение: картинки из Медиахранилища, загруженные или по URL
• Разделитель: линия, визуально разделяющая секции
• 2 колонки: две равные колонки рядом
• 3 колонки: три равные колонки рядом
• 4 колонки: четыре равные колонки рядом
• 33 / 67: две колонки, где левая занимает около 33% ширины, а правая — около 67%
• 67 / 33: две колонки, где левая занимает около 67% ширины, а правая — около 33%
• Таймер: обратный отсчет для предложений и сроков
• Меню: ряд или колонка ссылок, например, навигация или контакты
• Соцсети: иконки со ссылками на ваши профили в социальных сетях
• HTML: пользовательский HTML, например, форма или встроенное видео

Заголовок и текст

Блоки Заголовок и Текст содержат текст, который пользователи читают в In-App сообщении. Редактируйте текст на холсте и форматируйте его с помощью панели инструментов.

Нажмите на блок Заголовок или Текст, чтобы отредактировать его содержимое на холсте. Выделите часть текста, чтобы появилась панель форматирования: полужирный, курсив, подчеркнутый, выравнивание, кнопка ссылки и выпадающий список стилей текста.

Merge Tags — это плейсхолдеры, которые вставляют значение тега (Tag) из профиля пользователя в сообщение, чтобы каждый подписчик видел персонализированный текст. Чтобы добавить его, выделите текст, нажмите Merge Tags на панели инструментов и выберите тег из вашего аккаунта. Узнайте больше о персонализированных In-App сообщениях

Изображение

Блок Изображение отображает картинку в шаблоне In-App. Выберите его на холсте, чтобы открыть настройки Изображения на правой панели.

• Добавить изображение / Заменить изображение: нажмите Добавить изображение, когда блок пуст, или Заменить изображение, когда картинка уже установлена. Вы можете загрузить файл или выбрать его из вашего Медиахранилища.
• URL изображения: вставьте ссылку на размещенное изображение.
• Alt текст: опишите изображение для доступности.
• URL ссылки: откройте веб-сайт при нажатии на изображение.
• Цель ссылки: откройте ссылку в той же вкладке или в новой.
• Файл: после добавления изображения показывает путь к используемому файлу.

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

Кнопка

Кнопка — это кликабельный призыв к действию в In-App сообщении. Используйте ее, чтобы открыть URL, запустить пользовательский JavaScript или закрыть сообщение.

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

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

1. Нажмите на иконку ссылки на панели инструментов, чтобы открыть Вставить/Редактировать ссылку.
2. Выберите Тип действия.
3. Заполните поля для этого действия (см. ниже).
4. Нажмите Сохранить.

Открыть веб-сайт

Открыть веб-сайт открывает ссылку, когда пользователь нажимает на кнопку. Введите адрес в поле URL. Что можно ввести:

• Веб-сайт: https://example.com
• Ссылка на приложение, которая открывает экран внутри вашего приложения: myapp://promo
• Закрыть In-App без JavaScript: pushwoosh://close

Запустить пользовательский JavaScript

Пользовательский Javascript запускает код, когда пользователь нажимает на кнопку. Введите код в поле onClick.

Используйте его, когда нажатие должно выполнить какое-то действие в Pushwoosh, а не просто открыть ссылку. Человек в приложении по-прежнему видит обычную кнопку. Он не видит теги или события. Вы решаете, что произойдет на экране дальше: оставить сообщение открытым или закрыть его в том же onClick.

Доступные методы в onClick

• pushwoosh.closeInApp(): закрыть In-App сообщение. Опустите его, чтобы сообщение осталось открытым после нажатия.
• pushwoosh.sendTags({...}): сохранить значения как теги устройства для последующих кампаний.
• pushwoosh.postEvent(...): отправить пользовательское событие, например, для запуска Customer Journey.
• pushwoosh.getTags(...): прочитать текущие теги. Полезно в пользовательском HTML для изменения того, что показывает сообщение.
• pushwoosh.getCustomData(): прочитать пользовательские данные, переданные из push-уведомления, которое открыло это In-App сообщение.

Пример: позвольте пользователям выбрать интерес и сохранить его для будущих кампаний

1. Добавьте вопрос в блок Текст или Заголовок, например: «Каким спортом вы увлекаетесь?»
2. Добавьте по одной Кнопке на каждый вариант, например: Йога и Тренажерный зал.

3. Установите Тип действия на Пользовательский Javascript для каждой кнопки.
4. Для кнопки Йога вставьте это в onClick:

pushwoosh.sendTags({ interest: "yoga" });
pushwoosh.closeInApp();

5. Для кнопки Тренажерный зал вставьте это в onClick:

pushwoosh.sendTags({ interest: "gym" });
pushwoosh.closeInApp();

Когда пользователь нажимает Йога, Pushwoosh записывает тег interest на его устройство и закрывает In-App. Затем вы можете таргетировать этого пользователя в сегменте или Customer Journey.

Узнайте больше о том, как создавать In-App сообщения с помощью JavaScript

Разделитель

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

Настройте стиль линии (Сплошная, Пунктирная, Точечная), цвет, толщину и ширину на панели настроек.

HTML

Блок HTML позволяет вставлять пользовательский HTML в шаблон In-App. Используйте его для пользовательской формы, опроса или встроенного видео, когда нет специального блока «Форма» для In-App сообщений.

Примеры

Примеры ниже показывают распространенные способы использования блока HTML в шаблоне In-App: форма для сбора лидов, опрос и встроенное видео.

Примечание

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

Форма для лидов

Эта форма для сбора лидов записывает имя и email как теги, отправляет событие promo_requested, показывает сообщение с благодарностью, а затем закрывает In-App.

HTML-код

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
  h2 { font-size: 18px; margin-bottom: 8px; color: #222; }
  p { font-size: 14px; color: #666; margin-bottom: 20px; }
  input {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
  }
  button {
    width: 100%;
    padding: 14px;
    background: #FF6B35;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
  .thanks { display: none; text-align: center; padding: 40px 0; font-size: 18px; color: #333; }
</style>
</head>
<body>

<h2>Get your 20% discount</h2>
<p>Leave your name and email — we'll send the promo code right away.</p>

<div id="form">
  <input type="text" id="name" placeholder="Your name" />
  <input type="email" id="email" placeholder="Your email" />
  <button onclick="submit()">Send me the code</button>
</div>

<div class="thanks" id="thanks">
  🎉 Done! Check your inbox for the promo code.
</div>

<script>
function submit() {
  const name = document.getElementById('name').value.trim();
  const email = document.getElementById('email').value.trim();
  if (!name || !email) return;

  pushwoosh.sendTags({ name: name, email: email });
  pushwoosh.postEvent("promo_requested", { email: email });

  document.getElementById('form').style.display = 'none';
  document.getElementById('thanks').style.display = 'block';
  setTimeout(() => pushwoosh.closeInApp(), 3000);
}
</script>

</body>
</html>

Опрос

Этот опрос сохраняет выбранное время тренировки как тег, отправляет событие schedule_survey_completed, показывает сообщение с благодарностью, а затем закрывает In-App.

HTML-код

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; text-align: center; }
  h2 { font-size: 18px; margin-bottom: 6px; color: #222; }
  p { font-size: 13px; color: #888; margin-bottom: 20px; }
  .option {
    display: block;
    width: 100%;
    padding: 14px;
    margin-bottom: 10px;
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    box-sizing: border-box;
  }
  .option:hover { border-color: #FF6B35; background: #fff5f0; }
  .thanks { display: none; font-size: 17px; padding: 40px 0; color: #333; }
</style>
</head>
<body>

<h2>When do you prefer to work out?</h2>
<p>Help us schedule the best classes for you</p>

<button class="option" onclick="pick('morning')">☀️ Morning (6:00–10:00)</button>
<button class="option" onclick="pick('afternoon')">🌤️ Afternoon (12:00–15:00)</button>
<button class="option" onclick="pick('evening')">🌙 Evening (18:00–21:00)</button>
<button class="option" onclick="pick('weekend')">📅 Weekends only</button>

<div class="thanks" id="thanks">Got it! We'll send you the best schedule 💪</div>

<script>
function pick(time) {
  pushwoosh.sendTags({ preferred_time: time });
  pushwoosh.postEvent("schedule_survey_completed", { time: time });
  document.querySelector('h2').style.display = 'none';
  document.querySelector('p').style.display = 'none';
  document.querySelectorAll('.option').forEach(el => el.style.display = 'none');
  document.getElementById('thanks').style.display = 'block';
  setTimeout(() => pushwoosh.closeInApp(), 2000);
}
</script>

</body>
</html>

Видео

Этот пример встраивает видео с YouTube в In-App сообщение.

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>

Меню

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

Для каждого элемента меню установите:

• Надпись: текст, который видят пользователи
• URL: куда ведет элемент
• Цель: та же вкладка или новая вкладка

В настройках блока вы также можете установить:

• Направление: Горизонтальное или Вертикальное
• Выравнивание: Слева, По центру или Справа
• Разделитель: необязательный разделитель между элементами
• Шрифт, размер, начертание, межбуквенный интервал и цвета ссылок/текста

Соцсети

Блок Соцсети отображает ряд иконок социальных сетей, которые ссылаются на ваши профили. Используйте его, чтобы направлять пользователей на Facebook, Instagram, X и другие платформы из In-App сообщения.

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

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

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

Чтобы его настроить:

1. В разделе Обратный отсчет установите Дату окончания и Время окончания, затем выберите Часовой пояс и Язык для надписей таймера.
2. Включите Надписи, чтобы показывать подписи «дни / часы / минуты / секунды» под цифрами, или выключите для отображения только чисел.
3. В разделе Внешний вид установите Фон, Цвет цифр, Цвет надписей и размер шрифта для цифр (по умолчанию 40px) и надписей (по умолчанию 16px).
4. При необходимости настройте Отступы (внутренние отступы).

Колонки

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

Перетащите один из этих блоков на холст:

• 2 колонки: две равные колонки
• 3 колонки: три равные колонки
• 4 колонки: четыре равные колонки
• 33 / 67: левая колонка шириной около 33%, правая — около 67%
• 67 / 33: левая колонка шириной около 67%, правая — около 33%

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

Настройка стилей для всего шаблона

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

Откройте вкладку Настройки на правой панели.

Доступные разделы:

• Документ: размер и внешний вид всей области сообщения: ширина, внутренние отступы, цвет фона или изображение, цвет текста, семейство шрифтов и расстояние между блоками.
• Всплывающее окно: как сообщение располагается на затемненном фоне: радиус скругления углов, а также цвет и прозрачность наложения.
• Настройки блоков по умолчанию: общие начальные стили для блоков, которые вы добавите позже, чтобы новый контент соответствовал шаблону, пока вы не переопределите стиль блока на холсте.
• Настройки колонок по умолчанию: отступы для всех макетов с колонками: внешние отступы, внутренние отступы в каждой колонке и расстояние между колонками.
• Настройки карточек по умолчанию: начальный вид для контейнеров «Карточка», которые группируют контент в макете, применяется до тех пор, пока вы не стилизуете карточку индивидуально.
• Настройки группы кнопок по умолчанию: отступы и выравнивание, когда несколько кнопок расположены вместе как группа.
• Настройки кнопок по умолчанию: начальный вид для новых блоков «Кнопка», чтобы призывы к действию оставались единообразными по всему шаблону, пока вы не стилизуете одну из них отдельно.
• Настройки разделителей по умолчанию: начальный стиль линии, цвет, толщина и ширина для новых блоков «Разделитель».

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

Примечание

Настройки высоты нет. Всплывающее окно растет вместе со своим содержимым. Для полноэкранного сообщения установите Ширину в Настройках и выберите Полноэкранный в Настройках In-App.

Локализация шаблона

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

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

Примечание

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

Настройка внешнего вида In-App на устройстве

Настройки In-App управляют тем, как сообщение появляется и ведет себя на устройстве: положение, анимация, жесты смахивания и кнопка закрытия. Эти настройки применяются только к iOS и Android Native.

Нажмите Настройки In-App на верхней панели:

• Положение на экране: Полноэкранный, Сверху, По центру или Снизу.
• Анимация появления / Анимация закрытия: Нет, Затухание, Слева, Справа, Вверх или Вниз, или По умолчанию, чтобы использовать значение по умолчанию из SDK вашего приложения.

Примечание

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

• Длительность анимации (МС): от 100 до 3000 миллисекунд. Оставьте пустым, чтобы использовать время по умолчанию из SDK.
• Смахнуть для закрытия: включите любую комбинацию: Влево, Вправо, Вверх и Вниз.
• Показывать кнопку закрытия: включите или выключите элемент управления закрытием. Если включено, установите Положение (Сверху справа, Сверху слева, Снизу справа, Снизу слева), Фон (цвет или Прозрачный) и Цвет иконки. В отличие от других настроек в этом модальном окне, внешний вид кнопки закрытия рендерится в самом сообщении и отображается на всех платформах, а не только на iOS и Android Native.

Нажмите Применить, чтобы сохранить ваш выбор, или Отмена, чтобы отменить его.

Сохранение шаблона

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

Примечание

При сохранении ваш шаблон In-App сохраняется в Контент → In-apps. Оттуда вы можете просматривать, редактировать и управлять шаблонами. Узнать больше

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

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

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