Конструктор шаблонов писем
В конструкторе Октопуса можно собирать адаптивные email-шаблоны из готовых элементов и блоков или работать напрямую с HTML-кодом. Оба режима поддерживают персонализацию письма с помощью масок.
После сохранения шаблон можно использовать в сценариях отправки через Октопус Sender и подключённые сервисы рассылок.
Создайте шаблон
- Откройте раздел Рассылки → Шаблоны.
- Нажмите Добавить в верхней части страницы.
- В окне Новый шаблон заполните поля:
- Название — внутреннее название шаблона, по которому его можно найти в списке;
- Тема — тема письма, которую увидит получатель;
- Прехедер — короткий текст, который почтовый сервис обычно показывает рядом с темой или сразу после неё.
- Нажмите Создать.
Тема и прехедер сохраняются вместе с шаблоном. При настройке конкретной отправки их можно использовать без изменений или заменить своими значениями.
Интерфейс конструктора
После создания шаблона откроется редактор, состоящий из трёх основных областей.
Верхняя панель
На верхней панели находятся:
- переключатели Десктоп, Планшет и Мобайл для проверки шаблона на экранах разной ширины;
- кнопка
</>для перехода между визуальным редактором и режимом кода; - кнопки отмены и возврата последнего действия;
- кнопки Отменить и Сохранить.
Область письма
В центре расположен макет письма. Элементы и готовые блоки перетаскиваются в эту область с панели справа. Чтобы изменить содержимое или оформление добавленного элемента, нажмите на него.
Правая панель
Правая панель содержит три вкладки:
- Элементы — отдельные составляющие письма;
- Блоки — готовые композиции из нескольких элементов;
- Настройки — параметры выбранного элемента или блока.
Элементы письма
Элементы используются для сборки собственной структуры письма.
| Элемент | Назначение |
|---|---|
| Текст | Обычный текстовый блок |
| Заголовок | Заголовок или подзаголовок письма |
| Картинка | Изображение с возможностью добавить ссылку |
| Кнопка | Кнопка перехода на сайт, товар или другую страницу |
| Отступ | Пустое пространство между элементами |
| Разделитель | Горизонтальное разделение частей письма |
| Список UL | Маркированный список |
| Список OL | Нумерованный список |
| Соцсети | Ссылки на социальные сети |
| Таблица | Табличная структура для размещения данных |
Чтобы добавить элемент, перетащите его из правой панели в нужное место письма.
Готовые блоки
Готовые блоки помогают быстрее собрать типовые части письма.
Доступны следующие блоки:
| Блок | Назначение |
|---|---|
| 1 колонка | Контейнер на всю ширину письма |
| 2 колонки | Два элемента в одной строке |
| 3 колонки | Три элемента в одной строке |
| Шапка | Верхняя часть письма |
| Текст + кнопка | Текстовый блок с готовой кнопкой действия |
| Карточка товара | Готовая Liquid-конструкция для передачи товаров из сценария |
| Промокод | Блок с переменной промокода |
| Футер | Нижняя часть письма |
После добавления блока можно удалить ненужные элементы, заменить содержимое и изменить оформление.
Настройте оформление
Выберите элемент или блок в области письма и откройте вкладку Настройки. Набор параметров зависит от выбранного объекта.
В панели можно управлять размерами, внутренними и внешними отступами, выравниванием, шрифтами, цветами и другими параметрами оформления. Изменения сразу отображаются в области письма.
Используйте переключатели Десктоп, Планшет и Мобайл, чтобы проверить, как шаблон выглядит на разных устройствах.
Карточка товара
Блок Карточка товара содержит готовую Liquid-конструкцию для вывода товаров, переданных в письмо из сценария.
В карточке предусмотрены поля:
| Данные | Переменная в блоке |
|---|---|
| Изображение | product.preview_picture_url |
| Бренд | product.brand |
| Название | product.name |
| Артикул | product.xml_id |
| Цена | product.price |
| Старая цена | product.old_price |
| Скидка, % | product.discount_percent |
| Остаток | product.quantity |
| Ссылка на товар | product.detail_page_url |
Кнопка В корзину использует ссылку на товар или корзину, переданную вместе с данными карточки. Ненужные поля можно удалить, а внешний вид карточки — изменить как у любого другого блока.
Переменные в карточке обозначают назначение данных внутри шаблона. При настройке отправки Октопус распознаёт Liquid-конструкцию и предлагает сопоставить её с товарными полями проекта. Благодаря этому один шаблон можно использовать в проектах с разной структурой товарных данных.
Не заменяйте имена переменных произвольным текстом, если поле должно заполняться данными из сценария. Для изменения состава карточки удаляйте ненужные элементы целиком или настраивайте сопоставление при отправке.
Персонализация с помощью масок
В письмо можно добавлять данные конкретного клиента, заказа или проекта. Для этого используются маски.
В редакторе доступны три группы:
- Системные поля;
- Пользовательские поля;
- Заказы.
В визуальном редакторе
- Выберите текстовый элемент.
- Установите курсор в место, куда нужно добавить персональные данные.
- Откройте список масок на панели форматирования текста.
- Выберите подходящее поле.
В текст будет вставлен код выбранной маски. При отправке Октопус заменит его значением из карточки получателя, заказа или проекта.
В режиме кода
Маски доступны и при ручной работе с HTML:
- нажмите кнопку
</>на верхней панели; - установите курсор в нужное место кода;
- нажмите Добавить маску;
- выберите поле из списка.
Выбранная маска будет добавлена непосредственно в HTML-код шаблона.
Режим кода
Режим кода позволяет просматривать и редактировать HTML-разметку письма вручную. Область предпросмотра остаётся доступной слева, а код открывается на правой панели.
В этом режиме можно:
- изменять HTML и стили письма;
- редактировать Liquid-конструкции;
- добавлять маски системных, пользовательских и заказных полей;
- копировать код шаблона.
Ошибки в HTML или Liquid-конструкциях могут нарушить отображение и персонализацию письма. После ручного редактирования обязательно проверьте шаблон во всех трёх режимах предпросмотра.
Сохранение и использование шаблона
Нажмите Сохранить в правом верхнем углу. Шаблон появится в разделе Рассылки → Шаблоны и станет доступен:
- в сценариях — в действии Октопус Sender → Создать и отправить email-рассылку;
- в подключённых инструментах рассылок, например Unisender;
- в разделе разовых рассылок после появления этой возможности.
При создании отправки можно использовать сохранённые тему и прехедер или задать отдельные значения для конкретного письма.