Разработка конструктора 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, modern 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 месяца.