Plantilla de correo HTML para n8n: del diseño al envío por SMTP

Una automatización puede recibir correctamente una solicitud y enviar un mensaje difícil de leer. Un diseño organizado ayuda a presentar el contenido y el siguiente paso. Puedes prepararlo en Mailvex y utilizar el HTML en n8n.

En esta guía prepararemos una confirmación estática de solicitud. El recorrido es Mailvex → copiar HTML → Manual Trigger → Send Email → tu propia bandeja. Empezaremos sin formulario, lista de contactos ni personalización. Así podrás revisar el diseño y el envío antes de agregar datos reales. La transferencia entre los productos es manual; no requiere una integración nativa de Mailvex con n8n.

Qué necesitas preparar

• Una cuenta Mailvex con el correo confirmado y exportación HTML disponible en el plan.
• Acceso a una instancia de n8n donde puedas crear un workflow y una credencial SMTP.
• Un servicio de envío compatible con el nodo Send Email y un remitente autorizado en ese servicio.
• La configuración SMTP indicada por el proveedor y una bandeja tuya para recibir la prueba.
• El logotipo, el texto de la confirmación y la dirección real del botón, si lo incluyes en el mensaje.

Revisa los límites de exportación de Mailvex y las condiciones de n8n y del servicio de envío. El proveedor puede exigir una contraseña de aplicación u otro método de autenticación. Para Outlook.com y Microsoft 365, la documentación actual de n8n indica utilizar el nodo Microsoft Outlook con OAuth, en lugar de esta conexión SMTP con usuario y contraseña.

1. Diseña una confirmación sencilla en Mailvex

Abre un correo propio o elige un modelo y pulsa “Usar plantilla”. Trabaja en una copia identificada como prueba, por ejemplo “Confirmación de solicitud — n8n”. Para el primer envío bastan un logotipo, un título, un párrafo, un botón opcional y un pie con el contacto de la empresa.

Ejemplo de contenido estático: “Recibimos tu solicitud. Nuestro equipo revisará la información enviada. Para consultar nuestros canales de contacto, utiliza el botón de abajo”. Escribe “Contactar” en el botón y utiliza la página real de contacto de tu empresa como destino.

Este ejemplo no promete un plazo de respuesta ni incluye datos de una solicitud real. Ajusta el texto a tu proceso. Reemplaza las imágenes de demostración, comprueba el idioma y revisa el pie. Define un preheader coherente con la confirmación. El asunto se completará por separado en n8n: copiar el cuerpo HTML no transfiere automáticamente ese campo.

2. Deja el contenido realmente estático

Para esta prueba, sustituye saludos con {{first_name}} por un saludo sin nombre o por un texto de demostración escrito manualmente. Revisa también {{unsubscribe_url}}, otras variables y los bloques condicionales. Reemplaza los elementos necesarios por contenido estático y enlaces reales; selecciona cada bloque condicional, abre “Condición de visibilidad (ESP)” en el panel derecho y desactiva “Mostrar según condición”. Cambiar solamente la visibilidad en la vista previa no elimina la condición del código exportado. No traslades un pie incompleto a una campaña real.

Los datos de ejemplo de la vista previa no se exportan necesariamente en el código. El perfil mailvex conserva las variables: no busca contactos ni completa campos de n8n. Como el cuerpo del primer envío será fijo, no esperes que las expresiones de otro sistema se resuelvan automáticamente.

3. Copia el HTML de la versión revisada

Abre “Exportar HTML”. En “Formato de variables (ESP)”, conserva el perfil mailvex. Para las imágenes, utiliza el modo “Mailvex” si ya están alojadas allí. El modo de alojamiento propio requiere que los archivos existan en la dirección configurada; cambiar esa opción no carga los archivos en otro servidor.

Pulsa “Copiar HTML” y utiliza el código completo obtenido con esa acción. No copies la apariencia del correo que muestra la vista previa. Comprueba en el contenido copiado si quedaron variables, condiciones o enlaces #. Abre los destinos de los botones y revisa que las imágenes utilicen URL accesibles sin iniciar sesión. Evita eliminar archivos que siguen utilizándose en correos ya exportados.

4. Crea un workflow manual en n8n

Crea un workflow vacío y asígnale un nombre de prueba. Agrega Manual Trigger como punto inicial. Después, agrega Send Email y conecta la salida del primer nodo con la entrada del segundo. Deja únicamente esos dos nodos, sin fuente de contactos, formulario ni programación.

En Send Email, selecciona Operation = Send. Esta configuración envía un mensaje normal; no utiliza la operación de espera de una respuesta. Un workflow con Manual Trigger se ejecuta mediante una acción tuya. No es necesario publicarlo para realizar esta prueba manual.

5. Configura la credencial SMTP

En Credential to connect with, selecciona una credencial SMTP compatible o crea una nueva. Completa User, Password, Host, Port y la configuración de seguridad con los valores que indica tu proveedor. No copies la configuración de otro proveedor. Guarda la contraseña en la credencial de n8n, nunca en el HTML, en el mensaje ni en el asunto.

Mantén la configuración TLS/SSL de acuerdo con el puerto y la documentación del proveedor. No actives Ignore SSL Issues para evitar un error de conexión. Si la autenticación falla, revisa el método permitido por la cuenta y la autorización del remitente antes de volver a intentar. La contraseña de Mailvex no es una credencial de envío SMTP.

6. Completa los campos de Send Email

Pega el código en el campo del cuerpo HTML como contenido fijo, sin convertir todo el campo en una expresión. Deja CC y BCC vacíos en esta primera prueba. Comprueba To Email: utiliza tu propia dirección, sin mapear registros ni listas. Ajusta Subject en el mismo nodo, aunque hayas definido un asunto en el editor de diseño.

Si eliges Email Format = Both, escribe también la versión sencilla en el campo Text. Mantén el mismo contenido y los destinos relevantes, sin depender del diseño de los botones. No supongas que seleccionar Both crea automáticamente una versión de texto adecuada a partir del HTML.

En Options puedes agregar Append n8n Attribution y desactivarlo si no quieres la firma adicional de n8n. Es una opción independiente: no elimina la firma de Mailvex cuando está incluida según tu plan.

7. Ejecuta una vez y revisa el mensaje recibido

Guarda el workflow y revisa remitente, destinatario y asunto. Pulsa “Execute workflow” para iniciar la prueba. Esta acción activa realmente el envío; no es solo una vista previa. Comprueba el resultado de Send Email y después busca el mensaje en tu bandeja. Una ejecución sin errores no garantiza que el correo aparezca en la carpeta principal.

• Comprueba remitente, asunto, preheader y contenido del pie en el mensaje recibido.
• Abre el correo en computadora y celular; observa textos, columnas, imágenes y botones.
• Haz clic en los enlaces y confirma los destinos, además de revisar la apariencia.
• Si corriges el diseño en Mailvex, vuelve a copiar el HTML y reemplaza el cuerpo en n8n antes de la siguiente prueba.

La vista previa del editor ayuda a revisar el diseño, pero no emula todos los comportamientos de Gmail, Outlook u otros clientes. Si el mensaje no aparece, comprueba el resultado de la ejecución, el destinatario y las carpetas de filtrado antes de repetir. Cada nueva ejecución puede generar otro envío.

Errores frecuentes y dónde investigar

Cuándo agregar datos y un disparador automático

Después de validar el envío estático, trabaja en una copia del workflow para conectar el origen de los datos. Revisa los elementos que llegan al nodo antes de usar cualquier dirección como destinatario. Varios elementos de entrada pueden generar varios envíos. Planifica cómo identificar una solicitud ya procesada y cómo evitar mensajes duplicados cuando haya nuevos intentos.

Puedes empezar personalizando únicamente Subject con un campo existente en la entrada de n8n, mediante el selector de expresiones y revisando la vista previa del valor. Durante esa comprobación, deja To Email fijo en tu bandeja. Personalizar el cuerpo HTML exige tratar los datos explícitamente; elegir un perfil ESP en Mailvex no realiza ese trabajo. Publica un flujo automático solo después de estas comprobaciones.

Preguntas frecuentes

¿Necesito una API de Mailvex para seguir esta guía?

No. El procedimiento utiliza una copia manual del HTML hacia n8n. Los cambios posteriores del diseño no llegan automáticamente al workflow: exporta la versión corregida y actualiza el campo correspondiente.

¿El correo puede recibirse en Gmail u Outlook?

Tu bandeja de prueba puede utilizar esos servicios. Para utilizarlos como remitente, respeta la autenticación admitida por el proveedor. Recibir un mensaje no determina qué nodo tiene que enviarlo.

¿Dónde quedan los contactos y las reglas de envío?

Este ejemplo no crea una base de contactos ni conecta un formulario. Mailvex prepara el diseño; n8n controla la ejecución configurada; el servicio SMTP realiza el envío. Los destinatarios, la repetición y las condiciones de la automatización deben definirse en tu proceso.