Кастомні 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="uk">
<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 UK',
Строки реалізації
Створення 3–5 кастомних шаблонів для CRM — 5–7 днів.