Кастомные email-шаблоны для CMS и CRM
Почтовые шаблоны в Mailchimp, Klaviyo, HubSpot, Customer.io или Salesforce Marketing Cloud часто создаются через встроенные drag-and-drop редакторы. Но иногда нужно большего — кастомный 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 %} |
Структура кастомного HTML-шаблона
Базовый шаблон — это валидный HTML с таблицами для совместимости с Outlook:
<!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="Logo" />
</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>
Импорт в платформу
После верстки шаблон загружается через интерфейс или API:
// Пример: создание шаблона через Klaviyo API v2
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': '2024-02-15',
},
body: JSON.stringify({
data: {
type: 'template',
attributes: {
name: 'Order Confirmation RU',
html: templateHtml,
text: plainTextVersion,
}
}
})
});
Технические требования для CRM-шаблонов
- Только inline-стили или
<style>в<head>— внешние CSS не поддерживаются большинством клиентов - Все изображения — абсолютные URL (Mailchimp хостит их на своём CDN после загрузки)
- Таблицы вместо Flexbox/Grid — Outlook использует Word-рендерер
-
widthатрибуты у<img>и<table>— помимо CSS -
altтексты на всех изображениях — часть писем открывается с отключёнными картинками
Сроки
Кастомный HTML-шаблон для CRM с адаптивностью и тестом в 10+ клиентах — 1–2 дня на шаблон.