Справочник по блокам редактора In-App

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

Каждый тип блока служит разной цели в сообщении:

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

Как настраивать блоки редактора

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

Совет

У каждого блока также есть настройки Visibility (Видимость) и Display condition (Условие отображения). Используйте их, чтобы скрыть блок на телефоне или компьютере, или показывать его только определенным пользователям. Узнать больше

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

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

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

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

Изображение

Блок Изображение отображает картинку в шаблоне In-App.

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

• Добавить изображение / Заменить изображение: нажмите Добавить изображение, когда блок пуст, или Заменить изображение, когда картинка уже установлена. Вы можете загрузить файл или выбрать его из вашей Медиатеки.
• URL изображения: вставьте ссылку на размещенное изображение.
• Альтернативный текст: опишите изображение для доступности.
• Промпт: промпт для генерации ИИ для изображения, которое вы создали с помощью Сгенерировать с помощью ИИ.
• Ширина (px) / Высота (px): зафиксируйте изображение в пиксельном размере. Оставьте поле пустым, чтобы размер определялся автоматически.
• Радиус скругления углов (px): скруглите углы изображения.
• Выравнивание: по левому краю, по центру или по правому краю.

В разделе Ссылка установите Тип действия (например, Открыть веб-сайт или URL или диплинк) и его URL, чтобы что-то открывалось при нажатии на изображение, а также Цель ссылки, чтобы открыть ее в той же вкладке или в новой.

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

Видео

Блок Видео добавляет видео с YouTube или Vimeo в сообщение в виде кликабельной миниатюры. В сообщении отображается статичное изображение с наложением значка ▶. Нажатие на него открывает видео в приложении YouTube или Vimeo, или в браузере.

Выберите блок на холсте, чтобы открыть его настройки:

• URL видео: вставьте ссылку на YouTube или Vimeo. Редактор автоматически загрузит миниатюру.
• Альтернативный текст: опишите видео для доступности.
• URL миниатюры: оставьте автоматически загруженную миниатюру, или нажмите Добавить миниатюру / Заменить миниатюру, чтобы выбрать ее из Медиатеки, или вставьте прямую ссылку на размещенное изображение.
• Наложение кнопки воспроизведения: включено по умолчанию. Выключите, чтобы показать обычную миниатюру без наложения значка ▶.
• Ширина (px), Радиус скругления углов (px) и Выравнивание: управляют внешним видом миниатюры и ее расположением в макете.

Карточка

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

• Макет: выберите, с какой стороны от контента будет находиться изображение, или включите Обтекание текста вокруг изображения.
• Изображение: добавьте или замените изображение, установите альтернативный текст, отредактируйте Промпт для генерации ИИ, добавьте Внутренний отступ и установите Радиус скругления углов (px).
• Размер и подгонка: установите Ширину, Высоту, Обрезку (Оригинал или фиксированное соотношение) и Подгонку (Покрытие или фокусная точка) изображения. Точные поля зависят от выбранного Макета.
• Ссылка: сделайте так, чтобы вся карточка открывала URL при нажатии.

Редактируйте заголовок, текст и кнопку карточки так же, как вы редактируете отдельные блоки Заголовок, Текст и Кнопка.

Кнопка

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

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

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

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

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

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

URL или диплинк

URL или диплинк открывает ссылку или диплинк, когда пользователь нажимает на кнопку. Введите адрес в поле URL, например, экран приложения: myapp://screen.

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

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

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

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

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

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

Товары

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

В панели настроек, в разделе Источник, выберите, откуда берутся товары:

• Вручную: введите товары вручную или нажмите Выбрать из каталога…, чтобы выбрать определенные товары из вашего Каталога товаров по ID. Вы можете смешивать оба способа в одном блоке.
• Правило каталога: автоматически подгружать товары по категории и порядку сортировки, обновляя их из каталога при показе сообщения.
• Корзина: показывать товары из текущей брошенной корзины каждого пользователя. Как настроить кампанию по брошенным корзинам

Примечание

Для Правила каталога и Корзины требуются Шаблоны контента в вашем тарифном плане и токен доступа к API (Настройки → Доступ к API). Если переключатель Источник не переключается на один из них, или блок не отображает товары, свяжитесь со службой поддержки или вашим аккаунт-менеджером, или создайте токен и выберите источник заново.

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

• Количество товаров (или Макс. показываемых товаров для Корзины): сколько карточек показывать.
• Колонки: 1, 2 или 3 карточки в ряду.
• Расстояние: пространство между карточками.
• Ограничение описания: лимит символов, до которого обрезается текст описания, чтобы карточки оставались одинакового размера.
• Шаблон карточки: выберите макет, затем установите Фон карточки, Радиус скругления углов карточки и Внутренний отступ контента для каждой карточки.

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

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

1. Выберите блок на холсте.
2. Нажмите на иконку закладки (Сохранить блок для повторного использования) на панели инструментов блока и дайте ему имя.

Сохраненные блоки появляются в разделе Сохраненные блоки внизу вкладки Блоки.

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

Синхронизация копий

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

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

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

Примечание

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