Template de e-mail HTML para n8n: do design ao envio por SMTP

Uma automação pode receber uma solicitação corretamente e enviar uma mensagem difícil de ler. Um layout organizado ajuda a apresentar o conteúdo e o próximo passo. Você pode prepará-lo no Mailvex e usar o HTML no n8n.

Neste guia, vamos montar uma confirmação estática de solicitação. O percurso é Mailvex → copiar HTML → Manual Trigger → Send Email → sua própria caixa. Começaremos sem formulário, lista de contatos ou personalização. Assim, será possível conferir o design e o envio antes de acrescentar dados reais. A transferência entre os produtos é manual; ela não exige uma integração nativa do Mailvex com o n8n.

O que você precisa preparar

• Uma conta Mailvex com e-mail confirmado e exportação HTML disponível no plano.
• Acesso a uma instância n8n na qual você possa criar um workflow e uma credencial SMTP.
• Um serviço de envio compatível com o nó Send Email e um remetente autorizado nesse serviço.
• As configurações SMTP fornecidas pelo provedor e uma caixa sua para receber o teste.
• O logotipo, o texto da confirmação e o endereço real do botão, se ele fizer parte da mensagem.

Verifique os limites de exportação do Mailvex e as condições do n8n e do serviço de envio. O provedor pode exigir uma senha de aplicativo ou outro método de autenticação. Para Outlook.com e Microsoft 365, a documentação atual do n8n orienta usar o nó Microsoft Outlook com OAuth, em vez deste caminho SMTP com usuário e senha.

1. Monte uma confirmação simples no Mailvex

Abra um e-mail próprio ou escolha um modelo e use “Usar modelo”. Trabalhe em uma cópia identificada como teste, por exemplo “Confirmação de solicitação — n8n”. Para o primeiro envio, bastam logotipo, título, um parágrafo, um botão opcional e um rodapé com o contato da empresa.

Exemplo de conteúdo estático: “Recebemos sua solicitação. As informações enviadas serão analisadas pela nossa equipe. Para consultar nossos canais de contato, use o botão abaixo.” Use “Entrar em contato” no botão e a página real de contato da sua empresa como destino.

Esse exemplo não promete um prazo de resposta nem inclui dados de uma solicitação real. Ajuste o texto ao seu processo. Substitua imagens de demonstração, confira o idioma e revise o rodapé. Defina um preheader coerente com a confirmação. O assunto será preenchido separadamente no n8n; copiar o corpo HTML não transfere automaticamente esse campo.

2. Deixe o conteúdo realmente estático

Para este teste, troque saudações com {{first_name}} por uma saudação sem nome ou por um texto de demonstração escrito manualmente. Revise também {{unsubscribe_url}}, outras variáveis e blocos condicionais. Substitua os elementos necessários por conteúdo estático e links reais; selecione cada bloco condicional, abra “Condição de exibição (ESP)” no painel direito e desative “Mostrar por condição”. Alterar apenas a visibilidade na prévia não remove a condição da exportação. Não copie para uma campanha real um rodapé incompleto.

Os dados de exemplo da visualização não são necessariamente exportados no código. O perfil mailvex preserva variáveis; ele não procura contatos nem preenche campos do n8n. Como o corpo deste primeiro envio será fixo, não espere que expressões de outro sistema sejam resolvidas automaticamente.

3. Copie o HTML da versão revisada

Abra “Exportar HTML”. Em “Formato de variáveis (ESP)”, mantenha o perfil mailvex. Para as imagens, use o modo “Mailvex” se elas já estão hospedadas ali. O modo de hospedagem própria exige que os arquivos estejam no endereço configurado; apenas mudar essa opção não envia os arquivos para outro servidor.

Clique em “Copiar HTML” e use o código completo obtido nessa ação. Não copie a aparência do e-mail exibida na prévia. Confira no conteúdo copiado se restaram variáveis, condições ou links #. Abra os destinos dos botões e verifique se as imagens usam URLs acessíveis sem login. Evite apagar arquivos que continuam sendo utilizados por e-mails já exportados.

4. Crie um workflow manual no n8n

Crie um workflow vazio e dê a ele um nome de teste. Adicione Manual Trigger como ponto inicial. Depois, adicione Send Email e conecte a saída do primeiro nó à entrada do segundo. Mantenha apenas esses dois nós, sem fonte de contatos, formulário ou programação.

No Send Email, escolha Operation = Send. A configuração deste exemplo envia uma mensagem normal; não utiliza a operação de espera por resposta. Um workflow com Manual Trigger é executado por uma ação sua. Não é necessário publicá-lo para realizar este teste manual.

5. Configure a credencial SMTP

Em Credential to connect with, selecione uma credencial SMTP compatível ou crie uma nova. Preencha User, Password, Host, Port e a configuração de segurança com os valores indicados pelo seu provedor. Não copie configurações de outro provedor. Guarde a senha na credencial do n8n, nunca no HTML, no texto da mensagem ou no assunto.

Mantenha a configuração TLS/SSL coerente com a porta e com a documentação do provedor. Não ative Ignore SSL Issues para contornar um erro de conexão. Se a autenticação falhar, confira o método permitido pela conta e a autorização do remetente antes de tentar novamente. A senha do Mailvex não é uma credencial de envio SMTP.

6. Preencha os campos do Send Email

Cole o código no campo do corpo HTML como conteúdo fixo, sem transformar todo o campo em uma expressão. Deixe CC e BCC vazios neste primeiro teste. Confira To Email: use sua própria caixa, sem mapear cadastros ou listas. Ajuste Subject no próprio nó, mesmo que tenha definido um assunto no editor de design.

Se escolher Email Format = Both, escreva também a versão simples no campo Text. Use o mesmo conteúdo e os mesmos destinos relevantes, sem depender do desenho dos botões. Não presuma que escolher Both cria automaticamente uma versão textual adequada do seu HTML.

Em Options, você pode adicionar Append n8n Attribution e desativá-lo se não quiser a assinatura adicional do n8n. Essa opção é separada: ela não remove a assinatura Mailvex quando prevista no seu plano.

7. Execute uma vez e confira a mensagem recebida

Salve o workflow e revise remetente, destinatário e assunto. Clique em “Execute workflow” para iniciar o teste. Essa ação realmente aciona o envio; não é apenas uma prévia visual. Veja o resultado do Send Email e, em seguida, procure a mensagem na sua caixa. Uma execução sem erro não garante que o e-mail aparecerá na pasta principal.

• Confira remetente, assunto, preheader e conteúdo do rodapé na mensagem recebida.
• Abra o e-mail no computador e no celular; observe textos, colunas, imagens e botões.
• Clique nos links e confirme os destinos, em vez de avaliar apenas a aparência.
• Se corrigir o design no Mailvex, copie novamente o HTML e substitua o corpo no n8n antes do próximo teste.

A prévia no editor ajuda a revisar o layout, mas não emula todos os comportamentos de Gmail, Outlook ou outros clientes. Se a mensagem não aparecer, confira o resultado da execução, o destinatário e as pastas de filtragem antes de repetir. Cada nova execução pode produzir outro envio.

Erros comuns e onde investigar

Quando acrescentar dados e um gatilho automático

Depois de validar o envio estático, trabalhe em uma cópia do workflow para conectar a origem dos dados. Confira os itens que chegam ao nó antes de usar qualquer endereço como destinatário. Vários itens de entrada podem resultar em vários envios. Planeje como identificar uma solicitação já processada e como evitar mensagens duplicadas em novas tentativas.

Você pode começar personalizando apenas Subject a partir de um campo existente na entrada do n8n, usando o seletor de expressões e conferindo a prévia do valor. Durante essa verificação, mantenha To Email fixo na sua caixa. Personalizar o corpo HTML requer tratar os dados explicitamente; escolher um perfil ESP no Mailvex não faz esse trabalho. Publique um fluxo automático somente depois dessas verificações.

Perguntas frequentes

Preciso de uma API do Mailvex para seguir este guia?

Não. O procedimento usa uma cópia manual do HTML para o n8n. Alterações posteriores no design não chegam automaticamente ao workflow: exporte a versão corrigida e atualize o campo correspondente.

O e-mail pode ser entregue em Gmail ou Outlook?

Sua caixa de teste pode usar esses serviços. Para utilizá-los como remetente, respeite a autenticação aceita pelo provedor. Receber uma mensagem não define qual nó deve enviá-la.

Onde ficam os contatos e as regras de envio?

Este exemplo não cria uma base de contatos nem conecta um formulário. O Mailvex prepara o design; o n8n controla a execução configurada; o serviço SMTP realiza o envio. Destinatários, repetição e condições da automação precisam ser definidos no seu processo.