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