Как отправить HTML-письмо из n8n: дизайн в Mailvex и тест через SMTP

Автоматизация может правильно принимать заявки и обновлять таблицы, но отправлять клиенту неудобное письмо: сплошной текст, случайные отступы и непонятную кнопку. Оформление можно подготовить отдельно. В Mailvex вы собираете письмо из блоков, копируете HTML, а n8n передаёт его вашему почтовому провайдеру через SMTP.

Ниже — первый ручной тест на собственный адрес: Manual Trigger → Send Email. Примером будет статичное подтверждение заявки, без настоящих данных клиента. Такая проверка позволяет отдельно оценить дизайн, подключение SMTP и полученное письмо. Автоматическую отправку из формы или CRM подключайте после этого, в своём рабочем процессе.

Что понадобится для первого теста

• Аккаунт Mailvex с подтверждённой почтой и доступный по вашему тарифу экспорт HTML. Проверьте текущие ограничения в аккаунте: копирование HTML тоже относится к экспорту.
• Доступ к n8n с возможностью создать workflow и SMTP credential — сохранённые настройки подключения к почтовому серверу.
• SMTP-доступ, совместимый с Send Email. Хост, порт, способ защищённого подключения и данные авторизации берите у провайдера. Обычный пароль от почты не всегда подходит для SMTP.
• Адрес отправителя, использование которого разрешено вашим провайдером, и собственный ящик для получения теста.
• Логотип, текст и рабочие ссылки. Изображения письма должны быть доступны получателю по своим адресам.

Для Outlook.com и Microsoft 365 актуальная инструкция n8n рекомендует узел Microsoft Outlook с OAuth. Описанный здесь путь Send Email рассчитан на совместимый SMTP-сервис; обычный пароль или пароль приложения подходит не каждому провайдеру.

В этой схеме нет API-интеграции Mailvex с n8n. Передаётся готовый HTML, который вы вставляете вручную. Получателя, тему, подключение к серверу и момент отправки задаёт n8n; HTML отвечает за содержимое и оформление тела письма.

1. Подготовьте статичное подтверждение заявки

Начните с сообщения, которое не требует персональных данных. Например, вы хотите подтвердить получение запроса на консультацию. Для теста достаточно логотипа, заголовка, короткого объяснения, кнопки на страницу контактов и подвала. Не добавляйте обещание времени ответа, если ваша команда его ещё не согласовала.

Это образец содержания для учебного сценария. В дальнейшем его можно связать с настоящей заявкой, но сейчас оставьте одинаковый текст для всех. Так ошибка в подстановке имени не будет мешать проверке SMTP и оформления.

2. Соберите письмо в Mailvex

• Создайте новое письмо или выберите подходящий шаблон. Дайте ему внутреннее название, например «Подтверждение заявки — тест n8n».
• Замените демонстрационный текст своим. Оставьте один главный заголовок, понятное объяснение следующего действия и одну основную кнопку.
• Загрузите логотип и другие нужные изображения. Проверьте пропорции, альтернативный текст и читаемость письма без баннера.
• Укажите настоящую ссылку у кнопки. Проверьте также кликабельные изображения, текстовые ссылки и иконки: заглушки # нужно заменить.
• Посмотрите письмо на широком и узком экране. Исправьте слишком мелкие подписи, неудобные переносы и блоки, которые мешают прочитать сообщение.

Для первого теста используйте доступные адреса изображений. В режиме хранения Mailvex они остаются ссылками на размещённые файлы. Режим «Свои» требует вашего размещения изображений по настроенным адресам. Если вы его не настраивали, не выбирайте его ради самого экспорта. Не удаляйте файлы, на которые ссылаются уже отправленные письма.

Уберите зависимости от персонализации

Проверьте письмо на {{first_name}}, {{unsubscribe_url}} и другие шаблонные переменные. Замените их статичным текстом или действующими ссылками, соответствующими назначению письма. Для блока с условием откройте в правой панели «Условие показа (ESP)» и выключите «Показывать по условию». Повторите для остальных условных блоков. Переключение видимости в предпросмотре само условие из экспорта не удаляет. Настройку отписок для рекламной рассылки этот пример подтверждения заявки не покрывает.

В окне экспорта «Формат переменных (ESP)» можно оставить mailvex. Этот профиль не подставляет данные клиента и не удаляет незаполненные теги. Демонстрационное имя в превью тоже не означает, что такое имя попадёт в экспорт: в HTML могут остаться переменные. Все нужные замены для статичного письма выполните самостоятельно.

3. Скопируйте готовый HTML

• Откройте «Экспорт HTML» в Mailvex и дождитесь подготовки кода.
• Нажмите «Скопировать HTML». Копируется исходный код письма, который нужно вставить в n8n целиком.
• При необходимости сохраните уже скопированный код в текстовом редакторе как файл .html. «Скачать HTML» — альтернативный способ экспорта; выполнять обе операции не обязательно.
• Проверьте экспортированный код на незаполненные {{...}}, служебные условия, старые ссылки и заглушки. После исправлений в редакторе скопируйте HTML заново.

Запишите, какую версию письма тестируете. Если изменить дизайн в Mailvex, уже вставленный в n8n код сам не обновится. Для следующего теста его нужно заменить новой экспортированной версией.

4. Настройте Manual Trigger и Send Email в n8n

Создайте новый workflow. Добавьте Manual Trigger, затем Send Email и соедините их. Для первого прогона достаточно этих двух узлов. Автоматический триггер и публикация workflow для такого ручного запуска не нужны.

В Send Email выберите Operation = Send. Это обычная отправка письма. Подключите SMTP credential с параметрами вашего провайдера. Храните пароль и другие секреты в credential, а не в HTML, теме или открытом тексте узла. Если соединение выдаёт ошибку сертификата, разберите причину с настройками сервера; не отключайте проверку сертификатов.

В Credential to connect with выберите существующее SMTP-подключение или создайте новое. Заполните User, Password, Host, Port и параметры защиты соединения по инструкции своего почтового провайдера. Пароль Mailvex не является паролем SMTP.

Вставляйте HTML как фиксированный текст, без перевода всего поля в Expression. Оставьте CC и BCC пустыми. Так первый запуск отправит тест только на явно указанный собственный адрес.

Тему обязательно задайте в Subject: настройки письма в Mailvex не заполняют это поле n8n автоматически. Аналогично From Email и To Email не берутся из оформления. Для первого теста не подставляйте получателя из заявки, таблицы или выражения — оставьте свой адрес фиксированным.

Если позже выберете Email Format = Both, подготовьте и текстовую часть вручную. Она должна передавать то же сообщение и содержать нужные адреса ссылок. В зависимости от клиента получатель может увидеть именно её. В этом руководстве основной путь использует HTML.

В Options можно добавить Append n8n Attribution и выключить его, если не нужна дополнительная подпись n8n. Это отдельная настройка: она не удаляет подпись Mailvex, если та включена условиями вашего тарифа.

5. Выполните отправку и проверьте полученное письмо

• Ещё раз проверьте To Email: там должен стоять только ваш тестовый ящик.
• Нажмите Execute workflow. Это реальный запуск цепочки, который может отправить письмо, а не только показать макет.
• Посмотрите результат Send Email в выполнении workflow. При ошибке сохраните её текст и исправьте указанную причину.
• Откройте тестовый ящик и проверьте папку нежелательной почты, если письма нет во входящих.
• Сверьте тему, отправителя, основной текст, изображения и все переходы. Откройте письмо на телефоне и в почтовых клиентах, важных для вашей аудитории.

Успешное выполнение узла означает успешное завершение его операции; оно не доказывает попадание во входящие или одинаковое отображение во всех клиентах. Превью Mailvex и браузерный просмотр тоже не заменяют проверку фактически полученного письма.

Если результат отличается от ожидаемого

Меняйте по одной причине и фиксируйте результат. При проблеме SMTP не нужно пересобирать дизайн. При неверной картинке не нужно менять авторизацию. После каждого изменения письма снова проверяйте, что в n8n вставлена актуальная версия HTML.

Персонализация темы после статичного теста

Когда базовая отправка работает, можно отдельно добавить данные в Subject. Подготовьте во входе Send Email тестовое поле, например имя или номер заявки. В поле Subject переключитесь на Expression и перенесите нужное поле из INPUT, используя сопоставление данных n8n. Проверьте рассчитанное значение до отправки.

Для отсутствующего или пустого поля задайте нейтральную тему без персонализации. Проверьте два случая: данные заполнены и данных нет. Тело первого письма оставьте статичным. Не заменяйте произвольные фрагменты HTML значениями из непроверенной формы: это отдельная задача подготовки безопасного динамического содержимого.

Как перенести проверенный вариант в рабочий workflow

После теста подключайте нужный источник событий отдельно. Проверьте, какие данные поступают в Send Email и сколько элементов приходит за один запуск: узел может отправлять сообщения для нескольких входных элементов. Убедитесь, что повторная доставка события, ручной перезапуск или повтор после ошибки не создаёт нежелательное второе письмо по одной заявке.

Только затем заменяйте свой тестовый адрес проверенным полем получателя. Перед рабочим запуском согласуйте назначение письма, действующие контакты, содержимое подвала и доступ к SMTP credential. Проект n8n и исходник Mailvex храните так, чтобы было понятно, какая версия дизайна используется в автоматизации.

Частые вопросы

Нужен ли отдельный коннектор Mailvex для n8n?

Для этого сценария нет. Вы вручную копируете HTML в Send Email. Изменения дизайна переносятся повторным экспортом и заменой кода.

Нужно ли публиковать workflow для теста?

Для описанной цепочки с Manual Trigger достаточно Execute workflow. Настройка автоматического запуска выполняется отдельно после ручной проверки.

Подставит ли Send Email переменные Mailvex автоматически?

На это рассчитывать нельзя. Для первого письма замените переменные вручную; динамические поля затем настройте и проверьте средствами n8n.