Розробка конструктора email-розсилок
Конструктор email-розсилок — drag-and-drop редактор для створення HTML-листів без знання HTML/CSS. Орієнтири: Mailchimp Email Designer, Stripo.email, Brevo (Sendinblue). Розробляється як вбудований інструмент платформи або як самостійний SaaS.
Технічні обмеження email
Email-редактор повинен видавати HTML, сумісний з поштовими клієнтами — вони підтримують різні підмножини CSS. Основні обмеження:
- Outlook 2016–2021: рендерить через Word, не підтримує flexbox/grid
- Gmail: обрізає листи > 102 КБ, вбудовує лише частину CSS
-
Apple Mail: підтримує
prefers-color-scheme, сучасний CSS
Тому будь-який drag-and-drop редактор генерує table-based layout з inline-стилями — єдиний надійний формат.
Архітектура редактора
Редактор працює з JSON-структурою листа:
{
"rows": [
{
"id": "row_1",
"columns": 1,
"backgroundColor": "#ffffff",
"blocks": [
{
"type": "image",
"src": "https://cdn.../banner.jpg",
"alt": "Банер",
"link": "https://example.com",
"width": "100%"
}
]
},
{
"id": "row_2",
"columns": 2,
"blocks": [
{ "type": "text", "content": "<h2>Заголовок</h2><p>Текст...</p>" },
{ "type": "button", "text": "Купити", "link": "...", "bgColor": "#2563eb" }
]
}
]
}
Генератор HTML конвертує JSON у table-based HTML з inline-стилями.
Персоналізація (Merge Tags)
Підтримка змінних у контенті: {{first_name}}, {{company}}, {{unsubscribe_url}}. При відправленні змінні замінюються реальними даними з бази або через API поштового провайдера.
Більшість провайдерів (Mailchimp, SendGrid, Postmark) підтримують свій формат merge tags — потрібна адаптація при експорті.
Превью та тестування
-
Desktop / Mobile preview — перемикання в редакторі (min-width media query +
@media (max-width: 600px)для мобільного) - Test send — відправлення тестового листа на зазначену адресу
- Inbox preview — через Litmus або Email on Acid API: скриншоти у всіх клієнтах
Експорт
- HTML — готовий inline-styled HTML
- Stripo JSON / MJML — для повторного редагування в інших інструментах
- ZIP — HTML + зображення
MJML — фреймворк для email-верстки. MJML-код компілюється у кроскліентний HTML. Використання MJML всередину редактора значно спрощує розробку:
<mjml>
<mj-body>
<mj-section background-color="#ffffff">
<mj-column>
<mj-text font-size="24px" font-weight="bold">Привіт, {{name}}!</mj-text>
<mj-button href="https://example.com" background-color="#2563eb">
Перейти
</mj-button>
</mj-column>
</mj-section>
</mj-body>
</mjml>
Бібліотека шаблонів
Стартові шаблони за типами: приватний лист, промо-акція, дайджест новин, підтвердження замовлення, заброшений кошик. Шаблони редагуються в конструкторі.
Строки реалізації
MVP (drag-and-drop редактор, базові блоки, preview, HTML-експорт): 6–8 тижнів. Повнофункціональний конструктор з MJML-рухом, бібліотекою шаблонів, Litmus-інтеграцією, merge tags: 3–4 місяці.