Top.Mail.Ru

Как создать макет письма в онлайн-редакторе CogaSystem

Пошаговое создание адаптивного email-макета в онлайн-редакторе: структура, блоки, ссылки, предпросмотр и тестовая отправка.

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

Ключевой принцип. Один экран письма должен отвечать на три вопроса: кто отправитель, в чем ценность и какое действие предлагается. Дополнительные блоки не должны отвлекать от этой последовательности.

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

Как создать макет

  1. Создайте рассылку. На рабочем столе или в разделе «Рассылки» выберите создание новой кампании.
    reda1.jpg
  2. Выберите основу. Используйте пустой макет, готовый шаблон или сохраненную версию.
    reda2.jpg
  3. Соберите структуру. Добавьте шапку, основной заголовок, смысловые блоки, CTA и служебную часть.
    reda2.jpg
  4. Настройте контент. Замените текст и изображения, проверьте ссылки и персональные поля.
    Меню «Тестирование» в редакторе письма
    Меню «Тестирование» в редакторе письма
  5. Проверьте мобильную версию. Сверьте порядок блоков, боковые отступы, размер текста и кнопок.
  6. Сохраните и протестируйте. Дайте макету понятное имя и отправьте тест на несколько адресов.

Где проверять макет в редакторе

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

В меню «Тестирование» разделены «Предпросмотр», «Отправка тестового письма» и «Отображение на реальных устройствах». Предпросмотр помогает оценить мобильную и настольную компоновку. Для проверки фактического получения используйте отдельную тестовую отправку. Условия проверки на реальных устройствах уточняйте перед запуском.

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

ПараметрНазначениеКак использовать
[%unsubscribe_link%]Ссылка на отписку от рассылки.Укажите как адрес текстовой ссылки или кнопки «Отписаться от рассылки».
[%view_link%]Ссылка на веб-версию письма.Используйте для ссылки «Посмотреть в браузере», если получателю удобнее открыть письмо как веб-страницу.
[%email%]Email получателя.Вставьте в текст, например: «Письмо отправлено на [%email%]». Это значение, а не адрес служебной ссылки.

Как добавить ссылку в текст

Выделите нужную фразу в текстовом блоке и нажмите инструмент вставки ссылки — «Insert/edit link». В окне «Вставить ссылку» откройте список «Шаблон»: вариант «Отписка» подставляет [%unsubscribe_link%], а «Просмотр» — [%view_link%]. Проверьте поле «Отображаемый текст» и подтвердите вставку кнопкой «Ок».

Как сделать кнопку отписки

Добавьте или выберите блок «Кнопка». Задайте текст «Отписаться от рассылки». В поле «Ссылка» откройте переключатель типа и выберите «Специальные ссылки» → «Отписка». Конструктор назначит кнопке адрес [%unsubscribe_link%]. Для веб-версии в этом же списке есть «Просмотр в браузере».

Важно. Одна надпись «Отписаться» не делает кнопку служебной. У неё должен быть правильный адрес. Не добавляйте перед тегом https:// и не заменяйте его ссылкой отписки из чужого или ранее полученного письма.

Ссылки на сайт, почту и телефон

В настройках кнопки также доступны обычные типы ссылок: «Сайт» — https://, «Почта» — mailto: и «Телефон» — tel:. Выбирайте тип по действию: открыть страницу, начать письмо или позвонить. Почтовая ссылка для обращения в поддержку не заменяет отписку от рассылки.

Вставка параметра и значение по умолчанию

В панели текстового блока откройте «Вставка параметра». Выберите доступное поле и при необходимости заполните «Значение по умолчанию если параметр не задан». Для имени можно использовать нейтральное обращение вместо пустого значения. Список пользовательских полей зависит от данных аккаунта; это не универсальный набор служебных тегов. Подробнее — в инструкции по персонализации рассылок.

Что проверить после вставки

  • Отписка задана именно в адресе ссылки или кнопки, а не только написана текстом.
  • Ссылка «Посмотреть в браузере» использует [%view_link%].
  • [%email%] находится в нужном месте текста и не перепутан с адресом отправителя.
  • Служебный блок не скрыт настройками «Типы устройств» или «Условия отображения».
  • В полученном контрольном письме проверены подстановки, веб-версия и итоговый нижний блок.
Автоматическое добавление служебного блока. Размещайте нужную отписку самостоятельно и проверяйте итоговое письмо. Наличие тега в редакторе само по себе не подтверждает, будет ли платформа добавлять дополнительный нижний блок. Поведение автоматической вставки отписки и email, а также отсутствие дублей уточняйте для текущего режима отправки. Проверку отписки проводите только на собственном контрольном адресе.

Проверка перед завершением

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

Что это дает бизнесу

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