Кастомные email-шаблоны для CMS и CRM
Рассылка писем через Mailchimp, Klaviyo, HubSpot или Salesforce Marketing Cloud — рутина. Но сталкивались с ситуацией, когда письмо в Outlook разъезжается, а переменные {{ first_name }} не подставляются? Встроенные drag-and-drop редакторы удобны для простых писем, но когда нужен строгий брендинг, сложная логика условий или адаптивность под мобильные устройства — без кастомного HTML-шаблона не обойтись.
Мы разрабатываем email-шаблоны под ключ: от вёрстки до интеграции с CRM. Гарантируем совместимость со всеми популярными клиентами (Outlook, Gmail, Apple Mail) и оптимизацию для Core Web Vitals. Оцените наш подход на примере работы с Klaviyo — одной из самых гибких платформ для e-commerce рассылок.
Почему кастомные шаблоны лучше готовых?
Допустим, у вас интернет-магазин на Shopify. Стандартный шаблон письма о брошенной корзине — это кнопка «Вернуться к покупкам» и список товаров. Но если добавить блок с персональной скидкой на основе суммы корзины ({% if cart.total_price > 5000 %}) и отзывы клиентов — конверсия восстановления растёт на 20-30%. Кастомная верстка позволяет реализовать такие сценарии без ограничений редактора.
Сравните: drag-and-drop шаблон за 15 минут против кастомного за 2 дня. Первый подходит для разовой акции, второй — для транзакционных писем, которые работают годами и формируют впечатление о бренде. Наш опыт показывает: компании, перешедшие на кастомные шаблоны, сокращают количество жалоб на кривую верстку на 80%.
Как обеспечить совместимость с Outlook и мобильными клиентами?
Главная проблема email-вёрстки — Outlook. Он рендерит HTML через Word, поэтому Flexbox и Grid не работают. Наше решение — табличная верстка с inline-стилями и явными width атрибутами. В <head> добавляем медиа-запросы для мобильных устройств: контейнер становится резиновым, колонки — блочными. Все изображения обязательно с alt текстом — без картинок письмо должно оставаться читаемым.
Пример базового каркаса шаблона для Mailchimp:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>*|MC:SUBJECT|*</title> <style> @media only screen and (max-width: 600px) { .container { width: 100% !important; } .column { display: block !important; width: 100% !important; } .mobile-padding { padding: 16px !important; } } </style> </head> <body style="margin:0;padding:0;background:#f3f4f6"> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td align="center" style="padding:24px 16px"> <!-- Основной контейнер --> <table class="container" width="600" cellpadding="0" cellspacing="0" border="0" style="background:#fff;border-radius:12px;overflow:hidden"> <!-- Шапка --> <tr> <td style="background:#1e40af;padding:24px 32px"> <img src="https://example.com/logo-white.png" width="120" alt="Кастомный email-шаблон" /> </td> </tr> <!-- Контент --> <tr> <td class="mobile-padding" style="padding:32px"> <h1 style="margin:0 0 16px;font-size:24px;color:#111827"> Привет, *|FNAME|*! </h1> <!-- Контент --> </td> </tr> <!-- Футер --> <tr> <td style="padding:16px 32px;background:#f9fafb;text-align:center"> <p style="margin:0;font-size:12px;color:#9ca3af"> <a href="*|UNSUB|*" style="color:#9ca3af">Отписаться</a> · <a href="*|UPDATE_PROFILE|*" style="color:#9ca3af">Настройки</a> </p> </td> </tr> </table> </td> </tr> </table> </body> </html> Форматы шаблонов по платформам
Каждая CRM/ESP использует свой синтаксис мержей и условий. Мы учли это при вёрстке:
| Платформа | Синтаксис переменных | Условия |
|---|---|---|
| Mailchimp | *|FNAME|* |
*|IF:FNAME|* ... *|END:IF|* |
| Klaviyo | {{ first_name }} |
{% if first_name %} ... {% endif %} |
| HubSpot | {{ contact.firstname }} |
{% if contact.firstname %} |
| Customer.io | {{ customer.first_name }} |
{% if customer.attributes.plan == 'pro' %} |
| Brevo (Sendinblue) | {{ params.firstname }} |
{% if params.plan %} |
В шаблоне мы используем синтаксис целевой платформы. Если планируется миграция — можно подготовить несколько вариантов.
Что входит в разработку кастомного шаблона
- Анализ требований: брендбук, типы писем (транзакционные, маркетинговые), список переменных.
- Прототип в Figma: учитываем адаптивность и брендовые цвета.
- Вёрстка на таблицах с поддержкой Outlook 2010–365, Gmail, Apple Mail, Samsung Mail, Яндекс.Почта.
- Настройка переменных и условных блоков по документации платформы.
- Тестирование в сервисах Litmus или Email on Acid — проверка в 20+ клиентах.
- Интеграция: загрузка шаблона в CRM через веб-интерфейс или API (пример для Klaviyo ниже).
- Документация: описание всех блоков и переменных для вашего маркетолога.
- Поддержка после запуска: бесплатные правки в течение месяца.
Импорт в платформу
После верстки шаблон загружается через интерфейс или API:
// Пример: создание шаблона через Klaviyo API const response = await fetch('https://a.klaviyo.com/api/templates/', { method: 'POST', headers: { 'Authorization': `Klaviyo-API-Key ${process.env.KLAVIYO_PRIVATE_KEY}`, 'Content-Type': 'application/json', 'revision': 'latest', }, body: JSON.stringify({ data: { type: 'template', attributes: { name: 'Order Confirmation RU', html: templateHtml, text: plainTextVersion, } } }) }); Сроки и как заказать
Разработка одного адаптивного шаблона с тестированием — от 1 до 2 дней. Стоимость рассчитывается индивидуально в зависимости от сложности и количества шаблонов. Чтобы получить консультацию и точную оценку вашего проекта — свяжитесь с нами. Мы гарантируем, что письма будут выглядеть идеально на всех устройствах и клиентах. Получите консультацию по вашим шаблонам уже сегодня.
Технические требования для CRM-шаблонов
- Только inline-стили или
<style>в<head>— внешние CSS не поддерживаются большинством клиентов. - Все изображения — абсолютные URL (Mailchimp хостит их на своём CDN после загрузки).
- Таблицы вместо Flexbox/Grid — Outlook использует Word-рендерер.
-
widthатрибуты у<img>и<table>— помимо CSS. -
altтексты на всех изображениях — часть писем открывается с отключёнными картинками.
Типичные ошибки при верстке писем
- Использование CSS-свойства
displayс нестандартными значениями — многие клиенты не поддерживают. - Избыточная вложенность таблиц — увеличивает вес письма и время загрузки.
- Отсутствие явного
widthу изображений — в Outlook картинки могут масштабироваться непредсказуемо. - Игнорирование
altтекста — теряется смысл письма при отключенных изображениях.
| Платформа | Сложность шаблона | Срок разработки |
|---|---|---|
| Транзакционное письмо | Базовая | 1 день |
| Маркетинговое письмо с условиями | Средняя | 2 дня |
| Мультиязычный шаблон с A/B-тестами | Высокая | 3-4 дня |
В итоге вы получаете не просто HTML-код, а готовое к отправке решение, которое работает быстрее и надёжнее встроенных редакторов. Закажите кастомные шаблоны — и ваши email-рассылки перестанут быть головной болью.