Plantillas de correo

En vista previa

Plantillas con lógica, renderizadas en el momento del envío.

Almacena una plantilla de correo en Bird y referénciala por id. Condicionales, bucles y valores por defecto se renderizan por destinatario cuando se envía el mensaje, así que la lógica de personalización permanece en la plantilla en lugar de dispersa por tu código. Créala como HTML con variables declaradas, o renderiza tus componentes de React Email.

welcome.tsx

200 · 1.2s

import { BirdClient } from "@messagebird/sdk";
import { render } from "@react-email/render";
import { WelcomeEmail } from "./emails/welcome";

const bird = new BirdClient({ apiKey: process.env.BIRD_API_KEY! });

const { data, error } = await bird.email.send({
  from:    "Bird <hello@bird.com>",
  to:      ["ada@example.com"],
  subject: "Your invite is ready",
  html:    await render(<WelcomeEmail name="Ada" />),
}).safe();

if (error) throw error;
console.log(data.id);
// → "em_2bX91Yk8h..."

welcome.tsx

200 · 1.2s

import { BirdClient } from "@messagebird/sdk";
import { render } from "@react-email/render";
import { WelcomeEmail } from "./emails/welcome";

const bird = new BirdClient({ apiKey: process.env.BIRD_API_KEY! });

const { data, error } = await bird.email.send({
  from:    "Bird <hello@bird.com>",
  to:      ["ada@example.com"],
  subject: "Your invite is ready",
  html:    await render(<WelcomeEmail name="Ada" />),
}).safe();

if (error) throw error;
console.log(data.id);
// → "em_2bX91Yk8h..."

Almacena una plantilla. Personaliza en el envío.

Envía solo los valores que cambian por destinatario.

Las plantillas forman parte de la API de correo de Bird. Almacena la maquetación y su lógica una sola vez; en cada envío referencias la plantilla y pasas un conjunto plano de valores por destinatario. Bird renderiza el mensaje final en su lado, así que la misma plantilla impulsa un correo o un millón.

import { BirdClient } from "@messagebird/sdk";

const bird = new BirdClient({ apiKey: process.env.BIRD_API_KEY! });

// Store a template once. Conditionals and loops render per recipient at send.
const tpl = await bird.templates.create({
  name:    "order-confirmation",
  subject: "Order {{ order_number }} confirmed",
  html:    "<h1>Thanks, {{ first_name or 'there' }}.</h1>" +
           "{{ if is_member }}<p>You earned {{ points }} points.</p>{{ end }}",
  variables: [
    { key: "first_name",   type: "string", fallback: "there" },
    { key: "order_number", type: "string" },
    { key: "is_member",    type: "boolean" },
    { key: "points",       type: "number" },
  ],
});

// Send it. Bird fills in the blanks for each recipient.
await bird.email.send({
  from:      "orders@acme.com",
  to:        ["ada@example.com"],
  template:  tpl.id,
  variables: { first_name: "Ada", order_number: "A-1043", is_member: true, points: 120 },
});

Más que buscar y reemplazar.

Lógica de plantillas real, resuelta en el lado de Bird, por destinatario, al enviar.

01
Condicionales.
Muestra un bloque solo cuando un valor aplica, como una nota para miembros o un banner de envío gratuito, sin enviar dos plantillas distintas.
02
Bucles.
Repite una fila por cada elemento de un array, para que una sola plantilla de confirmación de pedido liste todas las líneas de detalle que un cliente compró realmente.
03
Valores por defecto.
Recurre a un valor seguro cuando falta un campo, para que un nombre de pila en blanco nunca salga como un saludo vacío.
04
Datos anidados.
Accede a objetos estructurados con rutas con puntos, no solo a claves planas de nivel superior, para que tus estructuras de datos existentes encajen directamente.
05
Tipos de variable enriquecidos.
Las variables declaradas pueden ser cadenas, números, booleanos, arrays y objetos, que es lo que hace posibles los bucles y condicionales anteriores.

Créala como ya trabajas.

Envía HTML plano con una lista de variables declaradas a través de la API y ya tienes una plantilla funcionando, sin un nuevo editor que aprender. ¿Prefieres componentes? Renderiza tus plantillas de React Email a HTML y almacena el resultado. Lo único que hay que saber: deja los tokens de Bird como texto literal en el JSX para que sobrevivan al renderizado y se rellenen al enviar, en lugar de incrustar un valor cuando React renderiza.

receipt.ts

React Email

import { render } from "@react-email/render";
import { Receipt } from "./emails/receipt";

// Author in React. Leave Bird's tokens as literal text so they
// survive the render and get personalized per recipient at send.
const html = await render(<Receipt firstName="{{ first_name }}" />);

await bird.templates.create({
  name:    "receipt",
  subject: "Your receipt",
  html,
  variables: [{ key: "first_name", type: "string", fallback: "there" }],
});

Versionada, como el resto de tu código.

La edición se hace sobre un borrador y nunca toca lo que está en producción. Publicar congela una versión inmutable y numerada y la despliega; si un cambio sale mal, revierte a una versión anterior y vuelve a publicar. Las ediciones concurrentes se detectan en lugar de sobrescribirse en silencio, así que dos personas trabajando en la misma plantilla no se pisan. Cada versión lleva una identidad estable, que es lo que permite que los informes por plantilla atribuyan las aperturas y los clics correctamente.

Mantén cada marca coherente.

Un kit de marca contiene tus colores, tipografía, espaciado, logotipo y tono, y los aplica a una plantilla para que el resultado se vea y se lea como tú sin reestilizar cada una a mano. Los kits viven a nivel de workspace y un workspace puede tener varios, porque una marca matriz, una submarca y tu correo transaccional sin más rara vez quieren el mismo aspecto. Usar un kit es opcional: una plantilla sin ninguno recurre a unos valores por defecto limpios.

Previsualiza exactamente lo que se enviará.

Rellena una plantilla con valores de muestra y mira el mensaje renderizado antes de que nadie lo reciba. La vista previa pasa por la misma ruta de renderizado que el envío real, así que lo que apruebas es lo que sale, no una aproximación lo bastante cercana que se desvía una vez que los tokens y la lógica se resuelven para destinatarios reales.

Hacia dónde van las plantillas.

El modelo de plantillas almacenadas es la base de lo que viene a continuación: describe una plantilla en un prompt y genera un borrador para refinarlo, crea una visualmente sin escribir HTML y deja que los agentes de programación compongan plantillas acordes con tu marca a través de MCP, además de una biblioteca de plantillas de inicio desde las que empezar. Estas se construyen sobre el mismo modelo versionado y consciente de la marca, no sobre una vía aparte, así que la API que integras hoy es la que ellas amplían.

Profundiza en la documentación.

Descubre cómo encajan las plantillas en la guía de envío, incluido el renderizado de React Email, y configura los eventos de correo y webhooks para que las aperturas y los clics vuelvan por plantilla.

Preguntas frecuentes sobre plantillas

¿Tengo que usar un editor visual?+

No. Puedes crear y gestionar las plantillas enteramente a través de la API: envía tu HTML con una lista de variables declaradas y referencia la plantilla por id al enviar. El editor es una vía de entrada, no la única.

¿En qué se diferencia una plantilla almacenada de pasar HTML en cada envío?+

Una plantilla almacenada se referencia por id y está versionada, y su personalización se renderiza en el lado de Bird al enviar. Así envías solo los valores por destinatario, no el cuerpo entero cada vez, y la maquetación y la lógica viven en un solo sitio en lugar de reconstruirse en tu código en cada llamada.

¿Qué puede hacer la personalización más allá de buscar y reemplazar?+

Condicionales, bucles sobre arrays, campos anidados y valores por defecto por campo, todo resuelto por destinatario al enviar. Un bloque de membresía puede mostrarse solo a los miembros; un pedido puede listar sus líneas de detalle. La lógica se almacena en la plantilla, así que un payload plano de clave-valor por destinatario basta para impulsarla.

¿Funciona React Email?+

Sí. Renderiza tus componentes de React Email a HTML y almacena el resultado como cuerpo de la plantilla. Para los valores por destinatario, deja los tokens de Bird como texto literal en el JSX para que sobrevivan al renderizado y se rellenen al enviar, en lugar de incrustar un valor cuando React renderiza.

¿Puedo revertir una plantilla que he roto?+

Publicar congela una versión inmutable y numerada. La edición se hace sobre un borrador y nunca toca lo que está en producción hasta que publicas, y puedes revertir a cualquier versión publicada anterior y volver a publicarla. Cada versión conserva una identidad estable, que es lo que permite que los informes por plantilla atribuyan los envíos correctamente.

¿Hay generación con IA o un editor de arrastrar y soltar?+

Son lo que estamos construyendo, no lo que sale primero. La API (HTML con variables declaradas) y React Email son las vías de autoría disponibles hoy; un editor visual, la generación de plantilla a partir de un prompt y una superficie de composición para agentes llegan sobre el mismo modelo de plantillas almacenadas.

¿Cómo envío realmente una plantilla almacenada?+

La llamada de envío no cambia: referencia la plantilla por id y pasa los valores por destinatario, y la API de envío de correo existente se encarga del resto. No hay un endpoint de envío de plantillas aparte que aprender.

El resto de la plataforma de correo

Una API, un conjunto de claves. Explora las demás capacidades.

EntregabilidadAutenticación, calentamiento de IP, supresión y monitorización de listas de bloqueo.AnalíticaMétricas de entrega e interacción por dominio, por ISP y por IP.EnvíoCorreo transaccional y de marketing, plantillas y envíos por lotes.IP dedicadasIP dedicadas y pools gestionados, calentados automáticamente.Dominios de envíoVerificación de dominios, firma DKIM/SPF/DMARC y monitorización de DMARC.SupresionesSupresión automática y reversible de rebotes, quejas y bajas.BroadcastsCampañas de marketing: redacta, dirige a una audiencia, programa y envía.AudienciasTus contactos y las audiencias a las que diriges un broadcast.Resumen de la API de correoLa API de correo completa: envío, entregabilidad, IP, supresión, analítica y broadcasts.

Las plantillas forman parte de una plataforma, no de una herramienta puntual.

Almacena, versiona y personaliza plantillas en la misma API de correo que se encarga del envío, la entregabilidad, la supresión y la analítica. Un solo conjunto de claves.

Explorar la plataforma de correo Empezar