Plantilla de email de bienvenida: Guía para desarrolladores sobre MJML y Mailjet (2025)

Los emails de bienvenida son tu primera impresión con los nuevos usuarios, llegan en el momento de máximo interés y superan habitualmente a las campañas normales en aperturas y clics. Esta completa guía te acompañará en la creación de una plantilla de correo electrónico de bienvenida personalizada y responsive utilizando MJML y el potente sistema de plantillas de Mailjet.

Al final de este tutorial, tendrás un flujo de trabajo listo para la producción que incluye la creación de plantillas reutilizables, la implementación de la personalización dinámica y el seguimiento de las métricas de rendimiento, todo ello a través de la API de email de Mailjet.

Esto es lo que cubrimos en esta guía:

• Plantilla de email responsive codificada en MJML para compatibilidad entre clientes.
• Personalización dinámica mediante el lenguaje de plantillas de Mailjet.
• Flujo de trabajo en API listo para la producción para crear, enviar y hacer un seguimiento de los emails.
• Monitorización del rendimiento con webhooks y análisis.

Antes de empezar asegúrate de que tienes:

• Una cuenta de Mailjet con claves de API.
• Un dominio de remitente validado con SPF/DKIM configurado en Remitentes y dominios.
• Opcional: MJML CLI o un editor para compilar MJML a HTML.

Para desarrolladores que quieran ponerse directamente a ello:

• Escribe diseños responsive en MJML y compílalos en HTML.
• Crea plantillas reutilizables en Mailjet con TemplateLanguage activado.
• Utiliza variables como {{data:firstname:"there"}} y {{var:plan}} para la personalización.
• Envía a través de la API de envío v3.1 utilizando TemplateID, Variables, CustomCampaign y URLTags.
• Prueba de forma segura con SandboxMode, rastrea con webhooks y mide con statcounters.
• Verifica tu dominio (SPF/DKIM) para una entregabilidad óptima.

MJML proporciona una estructura rápida y orientada a móviles que se compila en HTML, sin fallos. Aquí tienes una plantilla sencilla de email de bienvenida que incluye marcadores de posición de personalización:

                            

                                <mjml>
  <mj-head>
    <mj-title>¡Bienvenido/a a {{data:brand:"la familia"}}!</mj-title>
    <mj-preview>Vamos a emplear unos minutos en dejarlo todo listo.</mj-preview>
  </mj-head>
  <mj-body background-color="#ffffff">
    <mj-section padding="24px 0">
      <mj-column width="100%">
        <mj-image src="https://assets.mailjet.com/logo.png" alt="{{data:brand:" brand="" logo="" width="120px"/>
        <mj-spacer height="12px"/>
        <mj-text font-size="22px" font-weight="700">
  Hola, {{data:firstname:"amigo/a"}}: ¡Bienvenido/a a bordo!
        </mj-text>
        <mj-text font-size="16px" line-height="1.6">
  Has creado una cuenta {{var:plan:"gratuita"}}. Aquí tienes 3 pasos rápidos para conseguir valor rápidamente:
        </mj-text>
        <mj-button href="%7B%7Bvar:primary_cta_url:" https:="" background-color="#0a84ff">
  Completa tu perfil
        </mj-button>
        <mj-text font-size="14px" color="#637381">
  ¿Prefieres documentos? Visita nuestra Guía de inicio rápido.
        </mj-text>
        <mj-button href="%7B%7Bvar:docs_url:" https:="" background-color="#1C1C1C">
  Leer documentos
        </mj-button>
        <mj-divider border-color="#EAEAEA"/>
        <mj-text font-size="13px" color="#637381">
  Si no has creado esta cuenta, ignora este email o ponte en contacto con el servicio de asistencia.
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-section padding="0 0 24px">
      <mj-column>
        <mj-text font-size="12px" color="#98A2B3">
  Enviado por {{data:marca:"Marca"}} • {{data:brand_address:"Línea de dirección"}} •  
  Gestiona las preferencias en tu cuenta.
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

                            
                        

• {{data:…}}: Lee las propiedades del contacto ya almacenadas en Mailjet (p. ej. nombre, marca…).
• {{var:…}}: Lee las variables que pasas en la llamada a la API de envío (p. ej. Plan, URL…).
• Valores alternativos: Utiliza la sintaxis :"por defecto" para proporcionar valores alternativos que impidan que envíes mensajes incompletos.

Este paso consta de dos partes.

Primero, crea un contenedor de plantillas en Mailjet:

                            

                                POST https://api.mailjet.com/v3/REST/template
Content-Type: application/json
Authorization: Basic  {base64_encoded_api_key:secret_key}

{
  "Name": "Bienvenida e introducción",
  "Locale": "es_ES",
  "OwnerType": "user",
  "IsTextPartGenerationEnabled": "true",
  "Description": "Plantilla de bienvenida MJML responsive con personalización."
}

                            
                        

Después de compilar tu MJML a HTML, añádelo como contenido de la plantilla:

                            

                                POST https://api.mailjet.com/v3/REST/template/{TEMPLATE_ID}/detailcontent
Content-Type: application/json

{
  &quot;Html-part&quot;: &quot;<!-- paste your compiled HTML here -->&quot;,
  "Text-part": "Hola, {{data:firstname:\"amigo/a\"}}: Bienvenido/a a {{data:brand:\"la familia\"}}...",
  "Headers": {
  &quot;From&quot;: &quot;\&quot;Customer Success\&quot; <hola@tudominio.com>&quot;,
  "Subject": "Bienvenido/a, {{data:firstname:\"amigo/a\"}}. Vamos a ayudarte a ponerte cómodo/a",
  "Reply-to": "asistencia@tudominio.com"
 }
}

                            
                        

Consejo profesional: Utiliza Headers en detailcontent para establecer los valores predeterminados para From/Subject/Reply-To. Siempre puedes modificarlos en el momento del envío.

El lenguaje de plantillas de Mailjet te permite crear experiencias de email altamente personalizadas:

• Contenido basado en la configuración regional: Almacena la configuración regional en los contactos y pasa URL específicas de la configuración regional mediante Variables.
• Variaciones de nivel del plan: Utiliza {{var:plan}} para las variaciones de texto ("Pro", "Plan gratuito", etc.).
• Alternativas seguras: {{data:firstname:"amigo/a"}} impide generar esos saludos tan raros donde falta un trozo como en "Hola , :".

Establece TemplateLanguage: true en tu llamada de envío para renderizar todas las variables y propiedades de los contactos.

Una vez que esté todo listo, puedes empezar por:

                            

                                POST https://api.mailjet.com/v3.1/send
Content-Type: application/json

{
  "Messages": [
 {
  "From": {  
  "Email": "hola@tudominio.com",  
  "Name": "Customer Success"  
 },
  "To": [{  
  "Email": "usuario.nuevo@ejemplo.com",  
  "Name": "Usuario nuevo"  
  }],
  "TemplateID": TEMPLATE_ID,
  "TemplateLanguage": true,
  "Subject": "Bienvenido/a, {{data:firstname:\"amigo/a\"}}. Vamos a ayudarte a ponerte cómodo/a",
  "Variables": {
  "plan": "gratuito",
  "primary_cta_url": "https://www.ejemplo.com/inicio",
  "docs_url": "https://dev.mailjet.com/email/guides/getting-started/"
 },
  "CustomCampaign": "onboarding_welcome",
  "DeduplicateCampaign": true,
  "URLTags": "utm_source=welcome&utm_medium=email&utm_campaign=onboarding",
  "CustomID": "welcome_0001",
  "EventPayload": "new_signup,region=ES,plan=gratuito"
 }
  ]
}
                            
                        

Para realizar pruebas sin enviar emails reales, añade «SandboxMode»: true:

                            

                                {
  "SandboxMode": true,
  "Messages": [
    // ... your message configuration
  ]
}
                            
                        

Esto valida tu carga útil y devuelve cualquier error sin entregar realmente el email.

1. Añade tu dominio en la sección Remitentes y dominios de Mailjet.
2. Configura los registros SPF y DKIM en tu DNS.
3. Verifica la configuración utilizando el punto de conexión /dns/{domain}/check.

                            

                                GET https://api.mailjet.com/v3/REST/dns/{domain}/check
                            
                        

Una autenticación adecuada del dominio mejora significativamente la llegada a la bandeja de entrada de los emails de bienvenida.

También te recomendamos que implementes:

Configura webhooks para recibir eventos de entrega:

                            

                                POST https://api.mailjet.com/v3/REST/eventcallbackurl
{
  "Url": "https://your-app.com/mailjet-webhook",
  "EventType": "sent,open,click,bounce,blocked,spam,unsub"
}
                            
                        

Utiliza CustomID o EventPayload en tus envíos para correlacionar los eventos con los usuarios de tu sistema.

Recupera métricas agregadas mediante programación:

                            

                                GET https://api.mailjet.com/v3/REST/statcounters
?CounterSource=APIKey
&CounterTiming=Message
&CounterResolution=Lifetime

                            
                        

Realiza un seguimiento de métricas clave como:

• MessageSentCount (envíos).
• MessageOpenedCount (aperturas).
• MessageClickedCount (clics).

Ahora tienes un flujo de trabajo completo para crear, personalizar y hacer un seguimiento de los emails de bienvenida a escala. Este enfoque combina las capacidades de diseño responsive de MJML con las potentes funciones de plantillas y análisis de Mailjet.

1. Compila tu plantilla MJML a HTML.
2. Crea y almacena tu plantilla mediante la API de plantillas.
3. Prueba a fondo utilizando el modo sandbox.
4. Configura webhooks para el seguimiento de eventos en tiempo real.
5. Supervisa el rendimiento e itera en función de los análisis.

Con esta base, puedes crear sofisticadas experiencias de correo electrónico que se adapten a las preferencias de los usuarios, los tipos de planes y sus etapas del ciclo de vida, todo ello a partir de una plantilla única y fácil de mantener.

Autor: Dale Hart Gestor de contenidos en Sinch Mailjet