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

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

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

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

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

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

Совет

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

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

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

Кликните по блоку Heading или Text, чтобы отредактировать его текст на холсте. Выделите часть текста, чтобы появилась панель форматирования: жирный, курсив, подчеркивание, выравнивание, кнопка ссылки и выпадающий список text style.

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

Изображение

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

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

• Add image / Replace image: нажмите Add image, когда блок пуст, или Replace image, когда изображение уже установлено. Вы можете загрузить файл или выбрать его из вашего Медиахранилища.
• Image URL: вставьте ссылку на размещенное изображение.
• Alt text: опишите изображение для доступности.
• Prompt: промпт для генерации ИИ для изображения, которое вы создали с помощью Generate with AI.
• Width (px) / Height (px): зафиксируйте изображение в пиксельном размере. Оставьте поле пустым, чтобы размер подбирался автоматически. Под этими полями подсказка показывает размер, в котором изображение отображается, и размер для загрузки: в 2 раза больше отображаемого размера, чтобы картинка оставалась четкой на экранах телефонов. Если загруженный файл меньше отображаемого размера по любой из осей, появится предупреждение, что он будет увеличен и будет выглядеть пикселизированным.
• Corner radius (px): скруглите углы изображения.
• Alignment: влево, по центру или вправо.

В разделе Link установите Action Type (например, Open Website или URL or Deeplink) и его URL, чтобы что-то открывалось при нажатии на изображение, и Link target, чтобы открыть его в той же или новой вкладке.

В разделе Spacing включите Padding, чтобы добавить пространство вокруг изображения. Используйте All sides для одинакового отступа со всех сторон или включите More options, чтобы установить каждую сторону отдельно.

Рекомендуемые размеры изображений

Загружайте изображение в 2 раза большего размера, чем указано в подсказке под Width (px) / Height (px) для этого блока. Это число следует проверять, так как оно отражает ваши собственные настройки Width/Height и кадрирования. Если вы еще не настроили блок, используйте эти общие ширины слотов в качестве отправной точки:

Где находится изображение	Отображается в размере	Загружать не менее
Изображение на всю ширину в стандартном всплывающем окне	до 600 px в ширину	1200 px в ширину
Предпросмотр на телефоне	360–430 px в ширину, в зависимости от устройства	до 860 px в ширину
Предпросмотр на планшете/десктопе	768 px в ширину	1536 px в ширину

Соотношение сторон на ваше усмотрение. Макет адаптивный, поэтому высота следует за установленным вами значением Height (px) или кадрированием. См. Размер документа и всплывающего окна, чтобы изменить стандартную ширину всплывающего окна.

Примечание

Эта таблица относится к блокам Image во встроенном редакторе. Для нативных In-App (модальное окно, полноэкранное, истории, лист, карусель, баннер, видео) пока нет рекомендуемого размера обложки.

Видео

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

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

• Video URL: вставьте ссылку на YouTube или Vimeo. Редактор автоматически загрузит миниатюру.
• Alt text: опишите видео для доступности.
• Thumbnail URL: сохраните автоматически загруженную миниатюру или нажмите Add thumbnail / Replace thumbnail, чтобы выбрать ее из Медиахранилища, или вставьте прямую ссылку на размещенное изображение.
• Play button overlay: включено по умолчанию. Выключите, чтобы показать обычную миниатюру без наложения значка ▶.
• Width (px), Corner radius (px) и Alignment: управляют внешним видом миниатюры и ее расположением в макете.

Карточка

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

• Layout: выберите, с какой стороны от контента будет находиться изображение, или включите Wrap text around image.
• Image: добавьте или замените изображение, установите альтернативный текст, отредактируйте Prompt для генерации ИИ, добавьте Padding и установите Corner radius (px).
• Size & fit: установите Width, Height, Crop (Original или фиксированное соотношение) и Fit (Cover или фокусная точка) для изображения. Точные поля зависят от выбранного вами Layout.
• Link: сделайте так, чтобы вся карточка открывала URL при нажатии.

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

Кнопка

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

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

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

1. Кликните по иконке ссылки на панели инструментов, чтобы открыть Insert/Edit Link.
2. Выберите Action type: Open Website, URL or Deeplink или Custom Javascript.
3. Заполните поля для этого действия (см. ниже).
4. Нажмите Save.

Open Website

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

URL or Deeplink

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

Run custom JavaScript

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

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

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

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

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

1. Добавьте вопрос в блоке Text или Heading, например: “Каким видом спорта вы увлекаетесь?”
2. Добавьте по одной кнопке Button для каждого варианта, например: Йога и Тренажерный зал.

3. Установите Action type на Custom 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

Разделитель

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

Настройте line style (Solid, Dashed, Dotted), color, thickness и width на панели настроек.

HTML

Блок HTML позволяет вставить пользовательский HTML в шаблон In-App. Используйте его для пользовательской формы, опроса или встроенного видео, когда нет специального блока Form для 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>

Меню

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

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

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

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

• Direction: Horizontal или Vertical
• Alignment: Left, Center или Right
• Separator: необязательный разделитель между элементами
• Шрифт, размер, начертание, межбуквенный интервал и цвета ссылок/текста

Соцсети

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

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

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

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

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

1. В Countdown установите End date и End time, затем выберите Timezone и Language для подписей таймера.
2. Включите Labels, чтобы показывать подписи “дни / часы / минуты / секунды” под цифрами, или выключите для отображения только чисел.
3. В Appearance установите Background, Digits color, Labels color и размер шрифта для цифр (по умолчанию 40px) и подписей (по умолчанию 16px).
4. При необходимости настройте Spacing (отступы).

Штрихкод

Блок Barcode отображает сканируемый штрихкод или QR-код из значения персонализации, чаще всего из ваучера.

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

1. В поле Code оставьте тег устройства {Coupon|String|}, или нажмите Merge tag и выберите другой тег устройства, который хранит код каждого получателя. In-App не обрабатывают Liquid. SDK заполняет тег на устройстве перед показом In-App. Это отличается от блока Barcode в email, который использует {{voucher}}.

2. Выберите Symbology:
   • QR: квадратный 2D-код, который могут сканировать телефоны. Принимает любой текст, включая буквенно-цифровые коды, такие как WELCOME2025-A1
   • Code 128: линейный штрихкод для любого текста, включая те же буквенно-цифровые коды
   • EAN-13: распространенный розничный штрихкод в Европе и многих других регионах. Только цифры, 12–13 символов
   • EAN-8: более короткий розничный штрихкод для маленьких упаковок. Только цифры, 7–8 символов
   • UPC-A: распространенный розничный штрихкод в Северной Америке. Только цифры, 11–12 символов
3. Если вы выбрали QR, установите Error correction. Это добавляет избыточные данные, чтобы код можно было сканировать, даже если его часть закрыта, изношена или плохо видна. Выберите L, M, Q или H (по умолчанию M). Более высокие уровни выдерживают больше повреждений, но делают узор более плотным, что может затруднить чтение при малых размерах. Пропустите это поле для других символик.
4. При желании включите Print the code in digits, чтобы показать значение под кодом.

5. В Appearance установите Bars color темнее, чем Background — большинство сканеров не могут читать светлые полосы на темном фоне. Установите Width (px) и Height (px) не менее 600×200, чтобы код оставался сканируемым на типичном расстоянии камеры телефона. Оставьте Quiet zone, modules на Auto для стандартного отступа.

Примечание

На холсте блок показывает образец штрихкода, а не реальный код получателя. Тег устройства, такой как {Coupon|String|}, заполняется только на устройстве, поэтому Preview также не может создать реальное изображение. Проверьте штрихкод на реальном устройстве перед публикацией. Используйте EAN-13, EAN-8 или UPC-A только для значения тега, состоящего только из цифр, с ожидаемой для каждого из них длиной. Для буквенно-цифровых кодов, таких как WELCOME2025-A1, используйте Code 128 или QR.

Колонки

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

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

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

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

Товары

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

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

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

Примечание

Для Catalog rule и Cart требуется наличие Content Templates в вашем тарифном плане и токен доступа к API (Settings → API Access). Если переключатель Source не переключается на один из них, или блок не отображает товары, свяжитесь со службой поддержки или вашим аккаунт-менеджером, или создайте токен и выберите источник заново.

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

• Number of products (или Max products shown для Cart): сколько карточек показывать.
• Columns: 1, 2 или 3 карточки в строке.
• Gap: пространство между карточками.
• Description limit: лимит символов, до которого обрезается текст описания, чтобы карточки оставались одинакового размера.
• Card template: выберите макет, затем установите Card background, Card corner radius и Content padding для каждой карточки.

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

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

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

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

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

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

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

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

• Edit synced block: разблокируйте эту копию, чтобы вы могли ее изменить. Вверху появится баннер. Нажмите Apply to all, чтобы сохранить ваши изменения в источнике и во всех других копиях, или Cancel, чтобы отменить их. Вы можете разблокировать только один синхронизированный блок за раз.
• Update from source: замените эту копию последней версией из источника.
• Detach from source: отсоедините эту копию от источника, чтобы вы могли редактировать ее отдельно.

Примечание

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