Desarrolladores
Crear recibos por correo electrónico listos para la producción puede ser todo un reto, especialmente cuando tienes que gestionar múltiples escenarios, como clientes invitados frente a clientes registrados, diferentes métodos de envío, descuentos y compatibilidad con varias divisas. Esta completa guía te mostrará cómo crear una plantilla de email responsive y dinámico utilizando MJML para el diseño y el lenguaje de plantillas de Mailjet para la personalización de emails.
Al final de este tutorial tendrás una plantilla para recibos totalmente funcional que puede gestionar datos de pedidos complejos, adjuntar facturas en PDF y realizar entregas fiables a través de la API de envío v3.1 de Mailjet.
Antes de sumergirnos en la implementación, entendamos por qué este enfoque es superior a la creación de emails puntuales con HTML:
Tu plantilla final de email para recibos incluirá:
Antes de empezar asegúrate de que tienes:
Empecemos por crear la estructura básica de nuestra plantilla de recibos utilizando MJML. Esto garantizará que nuestro email sea responsive y se muestre de forma coherente en diferentes clientes de email.
<mjml>
<mj-head>
<mj-title>Tu recibo</mj-title>
<mj-attributes>
<mj-text font-family="Montserrat, Arial, sans-serif"/>
<mj-class name="muted" color="#6b7280" font-size="13px"/>
<mj-class name="total" font-weight="700" font-size="16px"/>
</mj-attributes>
</mj-head>
<mj-body background-color="#f6f7fb">
<mj-section background-color="#ffffff" padding="24px">
<mj-column>
<mj-image width="120px" src="https://yourcdn.com/logo.png" alt="Marca"/>
<mj-text font-size="20px" font-weight="700">¡Gracias por tu compra!</mj-text>
<mj-text css-class="muted">
Pedido {{var:order_id}} • {{var:order_date}} • {{var:currency}}
</mj-text>
<!-- Shipping notice (rendered conditionally in Step 2) -->
<mj-text css-class="muted">
Enviar a: {{var:shipping.name}}, {{var:shipping.address1}}, {{var:shipping.city}}
</mj-text>
<mj-divider border-color="#e5e7eb"/>
<!-- Line items table (rendered via loop in Step 2) -->
<mj-table>
<tr style="text-align:left;">
<th style="padding:8px 0;">Elemento</th>
<th style="padding:8px 0;">Cant.</th>
<th style="padding:8px 0; text-align:right;">Tarifa</th>
</tr>
<!-- row loop here -->
</mj-table>
<mj-divider border-color="#e5e7eb"/>
<mj-text>
Subtotal <span style="float:right;">{{var:money.subtotal}}</span>
</mj-text>
<mj-text>
Impuestos <span style="float:right;">{{var:money.tax}}</span>
</mj-text>
{{var:money.discount_row}} <!-- optional discount row via condition -->
<mj-text css-class="total">
Total <span style="float:right;">{{var:money.total}}</span>
</mj-text>
<mj-divider border-color="#e5e7eb"/>
<mj-text css-class="muted">
Pagado con {{var:payment.brand}} que termina en {{var:payment.last4}}. ¿Necesitas un PDF? Está adjuntado.
</mj-text>
<mj-text css-class="muted">
¿Alguna pregunta? Responde a este email o visita la página de tu pedido: {{var:order_url}}
</mj-text>
</mj-column>
</mj-section>
<mj-section>
<mj-column>
<mj-text css-class="muted" align="center">
© {{var:year}} Tu empresa • {{var:support_email}}
</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
Notas importantes:
Ahora mejoraremos nuestra plantilla con el lenguaje de plantillas de Mailjet para manejar contenido dinámico. Esto incluye variables, condiciones y bucles que se procesarán cuando se envíe el correo electrónico.
El lenguaje de plantillas de Mailjet admite varios tipos de variables:
Inserta este código dentro de tu tabla MJML para recorrer en bucle los elementos del pedido:
{% for item in var:items %}
<tr>
<td style="padding:6px 0;">{{item.name}}</td>
<td style="padding:6px 0;">{{item.qty}}</td>
<td style="padding:6px 0; text-align:right;">{{item.price}}</td>
</tr>
{% endfor %}
Añade bloques condicionales para mostrar los detalles de envío solo cuando sean relevantes:
{% if var:has_shipping %}
<mj-text css-class="muted">
Enviar a: {{var:shipping.name}}, {{var:shipping.address1}}, {{var:shipping.city}}
</mj-text>
{% endif %}
Una vez que hayas compilado tu MJML a HTML y añadido etiquetas de plantilla, tienes que guardarlo como plantilla en Mailjet. Tienes dos opciones:
Paste your compiled HTML into a new template in the Mailjet Email Editor.
Crear una plantilla nueva:
curl -s -X POST \
--user "$MJ_APIKEY_PUBLIC:$MJ_APIKEY_PRIVATE" \
https://api.mailjet.com/v3/REST/template \
-H 'Content-Type: application/json' \
-d '{
"Name":"Recibo v1",
"OwnerType":"user",
"IsTextPartGenerationEnabled":"true",
"Locale":"es_ES"
}'
Añade tu contenido HTML a la plantilla:
curl -s -X POST \
--user "$MJ_APIKEY_PUBLIC:$MJ_APIKEY_PRIVATE" \
https://api.mailjet.com/v3/REST/template/TEMPLATE_ID/detailcontent \
-H 'Content-Type: application/json' \
-d '{
"Html-part":"...tu MJML compilado con etiquetas de plantilla...",
"Text-part":"Tu texto sin formato como alternativa"
}'
Ahora viene la parte más emocionante: Enviar tu email con tu recibo dinámico. Aquí tienes un ejemplo completo que incluye las variables de la plantilla, el PDF adjunto y la configuración adecuada:
curl -s -X POST \
--user "$MJ_APIKEY_PUBLIC:$MJ_APIKEY_PRIVATE" \
https://api.mailjet.com/v3.1/send \
-H 'Content-Type: application/json' \
-d '{
"Messages":[
{
"From":{"Email":"facturacion@tumarca.com","Name":"Facturación Tu Marca"},
"To":[{"Email":"cliente@ejemplo.com","Name":"{{data:firstname:\"Cliente\"}}"}],
"TemplateID": TEMPLATE_ID,
"TemplateLanguage": true,
"Subject": "Tu recibo {{var:order_id}}",
"Variables": {
"order_id": "ORD-98765",
"order_date": "2025-08-27",
"currency": "EUR",
"items": [
{"name":"Zapatillas","qty":1,"price":"99,00 €"},
{"name":"Calcetines","qty":2,"price":"10,00 €"}
],
"money":{"subtotal":"98,35 €","tax":"20,65 €","discount":"0,00 €","total":"119,00 €"},
"has_shipping": true,
"shipping":{"name":"A. García","dirección1":"Plaza Mercado Chico 5","ciudad":"Ávila"},
"payment":{"brand":"Visa","last4":"4242"},
"order_url":"https://tuapp.com/pedidos/ORD-98765",
"support_email":"asistencia@tumarca.com",
"year":"2025"
},
"Attachments":[
{
"ContentType":"application/pdf",
"Filename":"Factura-ORD-98765.pdf",
"Base64Content":"<base64-encoded-pdf>"
}
]
}
]
}'
URLTags: Añade "utm_source=recibo&utm_medium=email" para el seguimiento.
Supervisar la entrega de tus emails es crucial para mantener la confianza del cliente y depurar los problemas.
Registra tu punto de conexión para tus webhooks y así recibir eventos en tiempo real:
Para las empresas globales, una localización adecuada es esencial:
Asegúrate de que tus recibos llegan a la bandeja de entrada y cumplen la normativa:
Para los equipos que envían a gran escala, considera estas optimizaciones:
A continuación te indicamos algunas cuestiones que debes solucionar si tienes problemas con lo anterior.
¡Ya tienes un sistema de recibos por email completo y listo para la producción! Aquí tienes algunas formas de mejorarlo aún más:
Para obtener recursos adicionales y ejemplos de código, consulta el repositorio de ejemplos de plantillas de Mailjet, que incluye un ejemplo de trabajo completo que puedes utilizar como punto de partida.
Esta guía te acompañará a través de la creación de una plantilla de recibo de email profesional utilizando MJML para un diseño adaptable y el lenguaje de plantillas de Mailjet para contenido dinámico. Habrás aprendido a gestionar datos de pedidos complejos, adjuntar facturas en PDF, garantizar una entrega fiable y supervisar el rendimiento; todos ellos componentes esenciales para un sistema de emails de comercio electrónico de producción que se adapte a tu negocio.
