Справочник по блокам контента email-сообщений

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

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

Откройте вкладку Blocks и перетащите блок на холст или кликните по блоку, чтобы добавить его в конец email-сообщения. Доступные блоки:

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

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

Блоки Heading и Text содержат текст, который получатели читают в email-сообщении. Используйте Heading для заголовков и коротких строк, Text — для основного текста и длинных описаний.

Кликните по блоку на холсте, чтобы начать редактирование. Выделите текст, чтобы открыть панель инструментов форматирования.

Опции панели инструментов

• Text style: установите стиль абзаца (Заголовок 1, Заголовок 2, Обычный и т.д.) для всего блока
• Font size: измените размер выделенного текста или примените размер ко всему абзацу
• Bold / Italic / Underline / Strikethrough: стандартное форматирование символов
• Alignment: по левому краю, по центру или по правому краю
• Link: оберните выделенный текст в гиперссылку
• Bulleted list / Numbered list: превратите выделенные строки в список. Любые маркеры или номера, с которых уже начинаются строки, удаляются, чтобы не дублироваться с маркером самого списка.

Выберите блок (а не диапазон текста), чтобы открыть его настройки в правой панели, затем включите Letter spacing, чтобы увеличить или уменьшить межсимвольный интервал для всего блока. Принимаются дробные и отрицательные значения. Чтобы применить межсимвольный интервал ко всем текстовым блокам сразу, установите его как стандартное значение для всего email-сообщения в разделе Typography. См. Настройка стилей для всего email-сообщения.

Вставка из других документов

При вставке текста из Google Docs, Word или веб-страницы сохраняются жирный шрифт, курсив, подчеркивание, зачеркивание и ссылки. Цвет, размер и семейство шрифтов из источника не переносятся — всегда преобладает типографика самого блока. Чтобы полностью игнорировать форматирование источника и применить стиль блока, вставьте текст с помощью Ctrl+Shift+V (Cmd+Shift+V на Mac).

Вставленный маркированный или нумерованный список сохраняет свой маркер или номер как обычный текст в начале каждой строки в том же блоке. Выделите эти строки и нажмите Bulleted list / Numbered list, чтобы превратить их в настоящий список — кнопка удалит оставшийся маркер за вас.

В однострочных полях, таких как метка Button, вставленные разрывы строк сворачиваются в один пробел.

Персонализация с помощью Merge Tags

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

Изображение

Блок Image отображает картинку в email-сообщении. Выберите его на холсте, чтобы открыть настройки Image в правой панели.

Добавление изображения

Нажмите Add image, когда блок пуст, или Replace image, когда изображение уже установлено. Откроется Media Gallery с тремя вкладками:

• Library: ваши загруженные файлы с возможностью поиска по имени.
• Stock photos: поиск бесплатных фотографий Pexels, не выходя из редактора. Кликните по одной, чтобы скопировать ее в вашу библиотеку и вставить.
• Generate with AI: опишите желаемое изображение и выберите соотношение сторон. Сгенерированное изображение сохраняется в вашу библиотеку.

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

Удаление изображений из библиотеки

Удаляйте изображения, не выходя из редактора: наведите курсор на файл и нажмите Delete или выберите несколько и нажмите Delete selected, затем подтвердите в диалоговом окне.

Осторожно

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

Alt-текст

Опишите изображение в поле Alt text для доступности или нажмите Generate alt with AI, чтобы AI написал его на основе изображения на вашем текущем языке редактирования. Изображения, добавленные из Stock photos или Generate with AI, получают alt-текст автоматически.

Размер и подгонка

• Width: установите ширину изображения в пикселях или в процентах от доступного пространства, чтобы оно оставалось гибким. Оставьте значение по умолчанию, чтобы использовать естественную ширину изображения.
• Height (px): установите фиксированную высоту рендеринга. Оставьте пустым для автоматического масштабирования — по соотношению сторон кадрирования, если оно установлено, в противном случае по естественным пропорциям изображения.
• Crop: выберите Original, чтобы сохранить естественные пропорции изображения, или соотношение (Square (1:1), 4:3, 3:2, 16:9), чтобы обрезать изображение до этого размера.
• Fit: выберите Cover, чтобы заполнить рамку и обрезать по ней. Установите точку кадрирования с помощью Focal point. Или выберите Contain, чтобы масштабировать все изображение внутри рамки без обрезки. Расположите его с помощью Set position.
• Corner radius (px): скруглите углы изображения. Включите More options, чтобы установить каждый угол отдельно, или оставьте выключенным, чтобы применить одинаковый радиус ко всем четырем.

Примечание

Gmail и Apple Mail отображают скругленные углы в отправленном email-сообщении, включая значения для каждого угла. Outlook Desktop игнорирует радиус скругления на изображениях, как и везде в email-сообщении, поэтому изображения там остаются с прямыми углами.

Переключите холст на Mobile (см. Редактирование мобильного вида), чтобы установить любой из этих параметров отдельно для экранов телефонов. Отметьте Width (mobile), Height (mobile), Crop (mobile) или Fit (mobile), чтобы переопределить только этот параметр, начиная с его значения для десктопа; оставьте флажок снятым, чтобы продолжать наследовать настройки десктопа. Crop (mobile) появляется только тогда, когда для Crop на десктопе установлено соотношение, и изменение Crop обратно на Original на десктопе отменяет любое переопределение Crop (mobile).

Ссылки и отступы

Чтобы ссылка открывалась при клике на изображение, введите ее в Link URL и установите Link target, чтобы она открывалась в той же или новой вкладке. См. Добавление ссылок для доступных типов ссылок.

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

Видео

Блок Video добавляет видео с YouTube или Vimeo в email-сообщение в виде кликабельного превью. Почтовые клиенты не могут воспроизводить видео внутри сообщения, поэтому блок показывает статичное изображение с наложением значка ▶. Когда получатель нажимает на него, видео открывается на YouTube или Vimeo. Это работает во всех основных клиентах, включая Outlook.

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

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

Карточка

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

• Layout: выберите, с какой стороны от контента будет находиться изображение.
• Image: замените изображение, установите alt-текст или отредактируйте промпт для изображения, созданного с помощью Generate with AI.
• Size & fit: поля размера зависят от Layout. Crop доступен для всех макетов. Fit применяется ко всем макетам:
  • Top: Height устанавливает высоту изображения в пикселях или в процентах от ширины карточки. Width (px) сужает изображение до фиксированной ширины в пикселях и центрирует его.
  • Background: Height устанавливает высоту карточки в пикселях или в процентах от ее ширины. Поля Width (px) нет. Изображение является фоном карточки. Fit здесь также работает: Cover обрезает изображение по размеру карточки — установите точку кадрирования с помощью Focal point — а Contain масштабирует все изображение внутри нее, размещая его с помощью Set position. Outlook Desktop приблизительно имитирует Contain и игнорирует оба варианта.
  • Left или Right: Width устанавливает ширину колонки с изображением в пикселях или в процентах от карточки. Height (px) фиксирует высоту изображения в пикселях. Установка высоты в пикселях сбрасывает соотношение сторон кадрирования ниже. Выбор соотношения сторон кадрирования сбрасывает высоту в пикселях. Вы не можете использовать оба варианта одновременно.
  • Для всех макетов:
    • Crop: выберите Original, чтобы сохранить естественные пропорции изображения, или соотношение (Square (1:1), 4:3, 3:2, 16:9), чтобы обрезать изображение до этого размера.
    • Fit: выберите Cover, чтобы заполнить рамку и обрезать по ней. Установите точку кадрирования с помощью Focal point. Или выберите Contain, чтобы масштабировать все изображение внутри рамки без обрезки. Расположите его с помощью Set position.
    • Corner radius (px): скруглите углы изображения. Включите More options, чтобы установить каждый угол отдельно, или оставьте выключенным, чтобы применить одинаковый радиус ко всем четырем. Gmail и Apple Mail отображают его; Outlook Desktop игнорирует его, как и в блоке Image.
• Spacing: установите отступы вокруг контента карточки.

Кнопка

Button — это кликабельный призыв к действию в email-сообщении.

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

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

• Нажмите на значок ссылки на панели инструментов, чтобы открыть Insert/Edit Link.
• Или используйте Action type и URL в разделе Link правой панели.

См. Добавление ссылок для доступных типов действий.

В правой панели, в разделе Styles:

• Alignment: по левому краю, по центру или по правому краю.
• Background: включите, чтобы переопределить стандартный вид, затем выберите Solid для сплошного цвета или Gradient для двухточечного линейного градиента (начальный цвет, конечный цвет и угол в градусах, по умолчанию 90°). При выборе Gradient кнопка все равно будет отображаться сплошным цветом в почтовых клиентах, не поддерживающих градиентные фоны, например, в Outlook на Windows. Кнопки, у которых уже был сплошной фон, сохраняют его и открываются с выбранным Solid.
• Text color, Font size и Font family: включите каждую опцию, чтобы переопределить стандартный вид.
• Corner radius, Border color и Border width: форма и контур кнопки. Gmail и Apple Mail отображают радиус скругления кнопки; Outlook Desktop игнорирует его и показывает квадратные углы, как и для изображений.
• Width: установите фиксированную ширину кнопки или оставьте ее автоматической.
• Padding: добавьте пространство внутри кнопки. Используйте All sides для равномерного отступа или включите More options, чтобы установить каждую сторону отдельно.

Разделитель

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

Настройте line style (Сплошная, Пунктирная, Точечная), color, thickness и width в панели настроек.

HTML

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

Над полем кода нажмите Merge tag, чтобы найти теги (Tags) вашего аккаунта и вставить Merge Tag в позицию курсора — та же функция персонализации, что описана выше, — или нажмите на значок эмодзи, чтобы вставить эмодзи таким же образом. Кликните по вставленному Merge Tag, чтобы открыть ту же панель Default / Format, что и в блоке Heading или Text.

Примеры

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

Эта форма собирает email-адреса для отправки промокода на новогоднюю распродажу.

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: #CC0000;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
</style>
</head>
<body>

<h2>Get your New Year Sale code</h2>
<p>Enter your email and we'll send you an exclusive promo code for up to 50% off.</p>

<div id="form">
  <input type="email" placeholder="Your email address" />
  <button type="button">Get my code</button>
</div>

</body>
</html>

Опрос

Этот опрос спрашивает, какую категорию ищет получатель, и каждая опция ссылается на соответствующую страницу распродажи.

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;
    text-decoration: none;
    color: #222;
  }
  .option:hover { border-color: #CC0000; background: #fff5f5; }
</style>
</head>
<body>

<h2>What are you shopping for?</h2>
<p>Pick a category and go straight to your deals</p>

<a class="option" href="https://example.com/sale/clothing">👗 Clothing</a>
<a class="option" href="https://example.com/sale/electronics">📱 Electronics</a>
<a class="option" href="https://example.com/sale/beauty">💄 Beauty</a>
<a class="option" href="https://example.com/sale/home">🏠 Home & Living</a>

</body>
</html>

Видео

Этот пример встраивает промо-видео новогодней распродажи в email-сообщение.

HTML-код

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>New Year Sale — Up to 50% Off</h1>

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen></iframe>
</div>

</body>
</html>

Примечание

Вы также можете добавить ссылку для отписки прямо в HTML-блок:

<a href=%%PW_EMAIL_UNSUBSCRIBE%%>Unsubscribe</a>

Плейсхолдер %%PW_EMAIL_UNSUBSCRIBE%% заменяется на URL для отписки Pushwoosh при отправке email-сообщения.

Меню

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

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

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

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

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

Соцсети

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

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

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

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

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

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

Таймер отображается как четкое изображение на любом языке и в любом размере, с фоном, который растягивается на всю ширину строки email-сообщения, и версией, отрисованной нативно для мобильной ширины, а не уменьшенным изображением для десктопа.

Штрихкод

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

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

1. В Code оставьте {{voucher}}, если email-сообщение отправляется с пулом ваучеров, или нажмите Merge tag и выберите тег, в котором хранится код каждого получателя. Email-сообщение разрешает тег во время отправки, чтобы каждый человек получил свое собственное сканируемое значение.

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). Оставьте Quiet zone, modules на Auto для стандартного отступа.

Примечание

На холсте блок показывает образец штрихкода, а не реальный код получателя. {{voucher}} и другие плейсхолдеры не могут быть превращены в сканируемое изображение до момента отправки. Отправьте тестовое email-сообщение, чтобы увидеть фактический код перед отправкой кампании. Используйте EAN-13, EAN-8 или UPC-A только для значений, состоящих только из цифр, с ожидаемой длиной для каждого. Для буквенно-цифровых кодов, таких как WELCOME2025-A1, используйте Code 128 или QR. Умная проверка (Smart check) также предупредит вас, если значение не соответствует выбранной Symbology.

Колонки

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

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

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

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

Для собственного изображения колонки (которое вы добавляете с помощью Add image в настройках колонки) в настройках отображается раздел Size & fit. Это тот же элемент управления, что и в макете Left / Right блока Card. Блок Image, перетащенный в колонку, является отдельным элементом контента и сохраняет свои собственные простые поля для задания размера — см. Изображение.

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

• Width: установите ширину изображения в пикселях или в процентах от колонки. Оставьте пустым, чтобы заполнить колонку.
• Height (px): зафиксируйте высоту изображения в пикселях. Установка высоты в пикселях сбрасывает соотношение сторон кадрирования ниже. Выбор соотношения сторон кадрирования сбрасывает высоту в пикселях. Вы не можете использовать оба варианта одновременно.
• Crop: выберите Original, чтобы сохранить естественные пропорции изображения, или соотношение (Square (1:1), 4:3, 3:2, 16:9), чтобы обрезать изображение до этого размера.
• Fit: выберите Cover, чтобы заполнить рамку и обрезать по ней. Установите точку кадрирования с помощью Focal point. Или выберите Contain, чтобы масштабировать все изображение внутри рамки без обрезки. Расположите его с помощью Set position.
• Corner radius (px): скруглите углы изображения. Включите More options, чтобы установить каждый угол отдельно, или оставьте выключенным, чтобы применить одинаковый радиус ко всем четырем. Gmail и Apple Mail отображают его; Outlook Desktop игнорирует его, как и в блоке Image.

Примечание

Изображение в колонке, для которого установлена только Height (px), растягивается на ширину колонки и обрезается по этой высоте.

Товары

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

Кликните по карточке на холсте, чтобы сделать ее активной и отредактировать:

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

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

• Manual: введите товары вручную, выберите их из вашего каталога товаров по ID или смешайте оба способа.
• Catalog rule: автоматически подгружайте товары по категории и порядку сортировки, обновляя их из каталога во время отправки.
• Cart: покажите товары из текущей брошенной корзины каждого получателя.
• Recommendations: подгружайте товары, ранжированные по встроенной стратегии — бестселлеры, новинки, снова в наличии или снижение цены — обновляя их из вашего каталога во время отправки.

Примечание

Для этих источников требуется наличие Content Templates в вашем тарифном плане. Если переключатель Source не переключается на Catalog rule, Cart или Recommendations, свяжитесь со службой поддержки или вашим аккаунт-менеджером.

Вам также понадобится токен доступа к API (Settings → API Access), чтобы сохранить email-сообщение. Предварительный просмотр, запуск Smart check и все остальное в редакторе работают без него. Только Save не сработает, с всплывающим уведомлением о том, что у блока нет токена доступа к API.

Добавление товаров вручную

Заполните сетку самостоятельно, либо вводя товары вручную, либо выбирая конкретные товары из вашего каталога товаров по ID. Вы можете смешивать оба способа в одном блоке.

• Number of products: установите, сколько карточек показывать (1–24).
• Add product: добавьте карточку и заполните ее название, описание, цену, картинку и ссылку самостоятельно.
• Pick from catalog…: выберите конкретные товары из вашего каталога товаров вместо того, чтобы вводить их вручную.
• Refresh from catalog: подгрузите последние название, описание, цену и изображение для товаров, которые вы выбрали из каталога, на случай, если они изменились с момента их добавления. Не влияет на товары, введенные вручную.
• Product images: кликните по превью, чтобы заменить картинку этого товара.
• Product links: введите или отредактируйте URL для каждого товара.

Подгрузка товаров по правилу каталога

Автоматически подгружайте товары по категории и порядку сортировки без ручного выбора.

• Category: ограничьте выборку определенной категорией каталога или выберите All categories.
• Sort: выберите порядок, в котором подгружаются товары: Newest first, Price: low to high, Price: high to low или Title A-Z.
• Number of products: установите лимит на количество показываемых карточек (1–12).
• Refresh preview: пересчитайте предварительный просмотр на холсте по каталогу прямо сейчас.

Предварительный просмотр и время отправки

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

Показ товаров из корзины

Отобразите текущие товары из брошенной корзины получателя.

• Max products shown: установите лимит на количество показываемых карточек (1–12).
• Preview a user’s cart: введите ID пользователя или email и нажмите Preview cart, чтобы увидеть, как блок отображается для этого конкретного получателя.

Примечание

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

Получение рекомендованных товаров

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

• Strategy: выберите, как ранжируются товары — Bestsellers (7 days), Bestsellers (30 days), New arrivals, Back in stock, Price drop, Bought together или Based on what they viewed. Выбор Recommendations заменяет элемент управления Sort из Catalog rule на этот селектор Strategy. Для Bestsellers, Bought together и Based on what they viewed требуются события из вашего бэкенда. См. Как настроить рекомендации товаров в email.

• Category: ограничьте выборку определенной категорией каталога или выберите All categories.
• Number of products: установите лимит на количество показываемых карточек (1–12).
• Refresh preview: пересчитайте предварительный просмотр на холсте по каталогу прямо сейчас.

Для «Bought together» нужен тег Product

Выбор Bought together добавляет поле Product tag — введите имя тега устройства, в котором хранится якорный товар, и блок покажет товары, часто покупаемые вместе с ним. Если тег не установлен, блок возвращается к обычному каталогу.

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

Примечание

Bestsellers ранжирует товары исключительно по истории заказов. Bought together строится на основе того же широкого потока взаимодействий, что и Based on what they viewed — просмотры, корзины и покупки, а не только покупки. Новые аккаунты или аккаунты, которые еще не накопили достаточно истории для определенной стратегии, получают вместо этого обычный каталог, пока не накопится достаточно данных.

Настройки блока «Товары» еще не переведены

Настройки блока «Товары», включая название источника Recommendations и его метки стратегий, отображаются на английском языке независимо от языка вашего аккаунта.

Стилизация сетки

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

• Columns: выберите 1, 2 или 3 карточки в строке. На мобильных устройствах карточки всегда располагаются в одну колонку.
• Gap: включите, чтобы установить расстояние между карточками. Выключенное состояние использует значение по умолчанию (16px).
• Description limit: лимит символов, до которого обрезается текст описания, чтобы карточки оставались одинакового размера.
• Card template: выберите макет, затем установите Card background, Card corner radius и Content padding для каждой карточки.
• Size & fit: отображается для каждого макета с изображением. Те же элементы управления Width, Height, Crop и Fit, что и для размера изображения в блоке Card для каждого макета, с размерами относительно ширины карточки, а не всего email-сообщения.

Настройки Block style ниже стилизуют блок в целом, отдельно от карточек внутри него:

• Background и Background image: установите цвет фона или фоновое изображение для всей сетки. При установленном изображении Fit выбирает, как оно будет располагаться в блоке — Cover обрезает его по блоку, Contain вписывает все изображение внутрь — а Focal point / Set position размещает его. Outlook Desktop показывает только цвет фона и игнорирует изображение, поэтому используйте читаемый цвет фона.
• Border color, Border width и Corner radius: добавьте контур и скругленные углы вокруг всей сетки. Включите More options в Corner radius, чтобы установить каждый угол отдельно, или оставьте выключенным, чтобы применить одинаковый радиус ко всем четырем. Gmail и Apple Mail отображают его; Outlook Desktop игнорирует его и показывает квадратные углы, как и для изображений.
• Hide on mobile и Hide on desktop: скройте весь блок на одном устройстве. См. Показ или скрытие контента в зависимости от устройства.

Как отображается цена со скидкой

Если у товара в вашем каталоге есть цена со скидкой, карточка показывает сниженную цену, а первоначальная цена зачеркнута. Это относится к Catalog rule, Cart и товарам из каталога в Manual. У товаров, введенных вручную, нет цены со скидкой.

Новости

Блок News показывает сетку карточек статей. Каждая карточка может включать изображение, дату, заголовок, краткое содержание и ссылку «Читать далее». Шаблон повторяется для каждой статьи, так же, как и для блока Products. Новый блок News начинается с 2 образцов карточек.

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

• Picked: загрузите статьи из RSS- или Atom-ленты один раз или выберите конкретные вручную. Они копируются в email-сообщение и больше не меняются.
• Live feed: подгружайте статьи из ленты, зарегистрированной для вашего приложения, обновляя их во время отправки, чтобы каждый получатель получил самые свежие.

Примечание

Для Live feed требуется наличие Content Templates в вашем тарифном плане. Если Source не переключается на Live feed, Pushwoosh показывает подсказку, что динамический контент не включен для аккаунта. Свяжитесь со службой поддержки или вашим аккаунт-менеджером.

Выбор статей из ленты

Кликните по карточке на холсте, чтобы сделать ее активной и отредактировать:

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

Статьи копируются в контент email-сообщения после их загрузки; во время отправки ничего больше не загружается. Изображения статей копируются в ваше хранилище медиафайлов и при необходимости конвертируются из WebP в JPEG, так как Outlook не может отображать WebP.

Вставьте Feed URL для RSS 2.0 или Atom, затем либо:

• Load latest articles: замените текущие карточки самыми свежими статьями из ленты, в том же количестве, что у вас уже есть (по умолчанию 2).
• Pick articles…: откройте панель со списком до 12 последних статей ленты, с превью, заголовком, датой, категорией и автором, и выберите, какие из них добавить. Выбранные статьи добавляются к существующим, до 12 всего; статьи, уже находящиеся на холсте, не могут быть выбраны дважды.

Примечание

Если URL ленты пуст, недействителен или в ленте нет статей, Pushwoosh показывает ошибку и оставляет текущие карточки без изменений.

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

• Article images: кликните по превью, чтобы заменить изображение этой статьи.
• Article links: отображается, когда в шаблоне карточки есть ссылка, привязанная к статье (кнопка «Читать далее» по умолчанию). Перечисляет каждую статью по заголовку, чтобы вы могли отредактировать или переопределить ее URL-адрес, изначально взятый из ленты.

Подгрузка статей из живой ленты

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

• Registered feed: выберите ленту, уже зарегистрированную для вашего приложения, или All feeds of the application, чтобы подгружать из всех. Эта панель только выбирает ленту, она не регистрирует ее; если их еще нет, добавьте одну на странице News feeds с помощью Add feed.
• Category filter: необязательный текстовый фильтр, который сопоставляется с категорией статьи из ленты (по умолчанию: любая категория).
• Articles: сколько карточек показывать (1–12, по умолчанию 3).
• Refresh preview: пересчитайте предварительный просмотр на холсте по ленте прямо сейчас. Если лента не возвращает статей, Pushwoosh оставляет текущие карточки без изменений; если лента недоступна, Pushwoosh показывает ошибку.

Предварительный просмотр и время отправки

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

Примечание

Отсутствующая, пустая или недоступная лента, включая зарегистрированную ленту, которая была удалена, не приводит к сбою отправки: Pushwoosh скрывает сетку карточек для этого получателя, в то время как фон и рамка блока все равно отображаются. Только неправильно настроенная ссылка на ленту, например, поврежденное приложение или источник ленты, вместо этого возвращается к карточкам, уже находящимся на холсте.

Стилизация сетки

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

• Columns: выберите 1, 2 или 3 карточки в строке. На мобильных устройствах карточки всегда располагаются в одну колонку.
• Gap: включите, чтобы установить расстояние между карточками. Выключенное состояние использует значение по умолчанию (16px).
• Summary limit: лимит символов, до которого обрезается краткое содержание статьи, чтобы карточки оставались одинакового размера.
• Card template: выберите макет, затем установите Card background, Card corner radius и Content padding для каждой карточки. Для макета Left или Right включите Wrap text around image, чтобы заголовок и краткое содержание обтекали картинку, а не оставались в фиксированной колонке. Size & fit (Width, Height, Crop, Fit) работает так же, как и размер изображения в блоке Card для каждого макета, с размерами относительно ширины карточки.

Настройки Block style ниже стилизуют блок в целом, отдельно от карточек внутри него:

• Background и Background image: установите цвет фона или фоновое изображение для всей сетки. При установленном изображении Fit выбирает, как оно будет располагаться в блоке — Cover обрезает его по блоку, Contain вписывает все изображение внутрь — а Focal point / Set position размещает его. Outlook Desktop показывает только цвет фона и игнорирует изображение, поэтому используйте читаемый цвет фона.
• Border color, Border width и Corner radius: добавьте контур и скругленные углы вокруг всей сетки. Включите More options в Corner radius, чтобы установить каждый угол отдельно, или оставьте выключенным, чтобы применить одинаковый радиус ко всем четырем. Gmail и Apple Mail отображают его; Outlook Desktop игнорирует его и показывает квадратные углы, как и для изображений.
• Hide on mobile и Hide on desktop: скройте весь блок на одном устройстве. См. Показ или скрытие контента в зависимости от устройства.

Примечание

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

Рекламный слот

Блок Ad slot показывает спонсорскую кампанию получателям email-сообщений. Это платное размещение, которое продает ваш аккаунт-менеджер, а не блок, который вы заполняете своим собственным креативом.

Примечание

Ad slot должен быть включен для вашего аккаунта. Если его нет на вашей вкладке Blocks, свяжитесь со службой поддержки или вашим аккаунт-менеджером. После включения создавайте и управляйте кампаниями, которые он может показывать, на экране Ad inventory.

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

• Campaign ID: числовой ID рекламной кампании для показа. Оставьте 0, чтобы вместо этого соответствовать любой активной кампании. Список ad inventory не показывает ID для кампании — скопируйте номер из адресной строки браузера на собственной странице кампании после ее сохранения.
• Category: ограничьте соответствие кампаниям, помеченным этой категорией. Установите его вместе с Campaign ID, чтобы требовать оба — реклама показывается только в том случае, если эта конкретная кампания также имеет эту категорию. Оставьте Campaign ID на 0, чтобы вместо этого соответствовать любой активной кампании в этой категории.
• Label above the creative: короткая строка, отображаемая над рекламой, например, «Спонсорский материал». Оставьте пустым, чтобы не показывать метку.
• When nothing is sold: выберите, что показывает блок, если ни одна кампания не соответствует. Hide the slot (по умолчанию) не оставляет ничего на своем месте. Show my own copy добавляет вторую секцию внутри того же блока, помеченную «Показывается, когда кампания не запущена», где вы пишете свой собственный замещающий текст и добавляете изображение. Эта секция отправляется в email-сообщении вместо рекламы, когда ни одна кампания не соответствует. Если оставить ее пустой, сохраняется как Hide the slot — пустой заменитель никогда не отправляется как пустой блок.

Холст показывает ID, категорию или метку, которую вы установили в качестве плейсхолдера — а не фактический рекламный креатив. Pushwoosh выбирает соответствующую кампанию один раз, когда начинается отправка email-сообщения, поэтому каждый получатель этой отправки видит одну и ту же рекламу — в этом релизе нет таргетинга на получателя для выбора кампании и нет ограничения частоты показов.

Примечание

Как и любой другой блок, блок Ad slot поддерживает условия отображения, чтобы показывать его только части получателей. Это отдельно от сопоставления кампаний выше. Условие отображения контролирует, кто вообще видит блок, а не какую кампанию он показывает.

Примечание

Отображение Ad slot зависит от аккаунта, которому принадлежит email-сообщение, а не от шаблона. Дублирование шаблона не меняет этого — копия, сделанная из аккаунта, где Ad slot не включен, также никогда не покажет рекламу. Если Ad slot включен или выключен для вашего аккаунта после того, как вы создали email-сообщение, повторное сохранение применит изменение. Выключите его и сохраните, и реклама перестанет показываться. Включите его снова и сохраните, и она возобновится.

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

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

1. Кликните по блоку (по его рамке или фону, а не по тексту или кнопке внутри), чтобы выбрать его. Card, Columns и Social — примеры блоков, которые работают таким образом.

Совет

Чтобы сохранить несколько блоков вместе, кликните с зажатой клавишей Shift по другим соседним блокам на холсте или в панели Layers, чтобы расширить выделение до непрерывного диапазона. Сохранение не предлагается для диапазона, который включает уже синхронизированный блок или пустой плейсхолдер AI.

2. Нажмите на значок закладки на панели инструментов блока и дайте ему имя.

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

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

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

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

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

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

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

Пока синхронизированный блок разблокирован для редактирования, остальная часть email-сообщения заблокирована: вы не можете выбирать, редактировать или удалять что-либо еще, и Save отключена, пока вы не закончите. Нажмите Apply to all, чтобы сохранить изменения везде, или Cancel, чтобы отменить их и снова разблокировать остальную часть email-сообщения.

Примечание

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

Добавление ссылок

Используйте диалоговое окно Insert/Edit Link, чтобы установить, что произойдет, когда получатель нажмет на кнопку или выделенный текст. Выберите Action type, затем заполните поля для этого действия.

Open Website

Открывает ссылку, когда получатель нажимает. Введите адрес в URL.

Manage preferences link

Добавляет ссылку на центр управления предпочтениями подписки, где получатели могут выбрать, какие категории email-сообщений они хотят получать. Ссылка вставляется автоматически.

Unsubscribe link

Позволяет получателям отписаться в соответствии с правилами и их предпочтениями.

Совет

Вы также можете добавить ссылку для отписки в блоке HTML:

<a href=%%PW_EMAIL_UNSUBSCRIBE%%>Unsubscribe</a>

Плейсхолдер %%PW_EMAIL_UNSUBSCRIBE%% заменяется на URL для отписки Pushwoosh при отправке email-сообщения.

Что происходит, когда получатель нажимает на ссылку для отписки

Если центр управления предпочтениями подписки включен

Получатель отписывается только от категории, назначенной этому email-сообщению (например, Newsletter). Название категории удаляется из его тега Subscribed Email Categories.

Появляется экран подтверждения с опциями Resubscribe и Manage preferences. Узнать больше.

Если центр управления предпочтениями подписки не включен

Получатель отписывается от всех маркетинговых email-сообщений, и тегу Unsubscribed Emails присваивается значение true. Транзакционные email-сообщения не затрагиваются и будут продолжать доставляться. Узнать больше о типах сообщений.

Важно

Чтобы вы могли доставлять важные email-сообщения вашим клиентам, мы не удаляем отписавшихся пользователей из вашей базы.

Чтобы продолжать отправлять сообщения вовлеченным получателям, создайте сегмент, отфильтрованный по Unsubscribed Emails = false. Чтобы избежать жалоб, не отправляйте email-сообщения получателям, которые отписались.

Клики учитываются в показателе отписок в Message History.

Web version link

Предоставляет получателям доступ к веб-версии email-сообщения, что полезно, если у них возникают проблемы с его просмотром в почтовом ящике.

No track statistics

Открывает ссылку, когда получатель нажимает, без учета клика в статистике кликов вашего email-сообщения. Введите адрес в URL.

Subscription form confirmation link

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