Кастомні 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 UK',
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-розсилки перестануть бути головним болем.