Кастомные 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-рассылки перестанут быть головной болью.