Template email
In anteprimaTemplate con logica, renderizzati al momento dell'invio.
Memorizza un template email in Bird e referenzialo tramite id. Condizionali, loop e default vengono renderizzati per destinatario quando il messaggio viene inviato, così la logica di personalizzazione resta nel template invece di essere sparsa nel tuo codice. Crealo come HTML con variabili dichiarate, oppure renderizza i tuoi componenti React Email.
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..."You can sign in any time at bird.com/login.
Your test API key is on your dashboard, ready to send.
Memorizza un template. Personalizza all'invio.
Invia solo i valori che cambiano per destinatario.
I template fanno parte dell'Email API di Bird. Memorizza il layout e la sua logica una volta sola; a ogni invio fai riferimento al template e passi un set piatto di valori per destinatario. Bird renderizza il messaggio finale dalla sua parte, così lo stesso template guida un'email o un milione.
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 },
});Più di un trova-e-sostituisci.
Vera logica di templating, risolta lato Bird, per destinatario, all'invio.
- 01
Condizionali.
Mostra un blocco solo quando un valore si applica, come una nota riservata ai membri o un banner di spedizione gratuita, senza inviare due template diversi.
- 02
Loop.
Ripeti una riga per ogni elemento di un array, così un solo template di conferma ordine elenca tutte le voci che un cliente ha effettivamente acquistato.
- 03
Default.
Ripiega su un valore sicuro quando un campo manca, così un nome vuoto non viene mai inviato come un saluto vuoto.
- 04
Dati annidati.
Raggiungi oggetti strutturati con percorsi puntati, non solo chiavi piatte di primo livello, così le tue forme di dati esistenti si mappano direttamente.
- 05
Tipi di variabile ricchi.
Le variabili dichiarate possono essere stringhe, numeri, booleani, array e oggetti, ed è ciò che rende possibili i loop e i condizionali qui sopra.
Crealo nel modo in cui già lavori.
Invia HTML semplice con un elenco di variabili dichiarate tramite l'API e hai un template funzionante, nessun nuovo editor da imparare. Preferisci i componenti? Renderizza i tuoi template React Email in HTML e memorizza il risultato. L'unica cosa da sapere: lascia i token di Bird come testo letterale nel JSX così sopravvivono al render e vengono riempiti all'invio, invece di incorporare un valore quando React renderizza.
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" }],
});Versionati, come il resto del tuo codice.
La modifica avviene su una bozza e non tocca mai ciò che è live. La pubblicazione blocca una versione immutabile e numerata e la rilascia; se una modifica va storta, ripristina una versione precedente e ripubblica. Le modifiche concorrenti vengono intercettate invece di essere sovrascritte silenziosamente, così due persone che lavorano sullo stesso template non si pestano i piedi. Ogni versione porta un'identità stabile, ed è ciò che permette alla reportistica per template di attribuire correttamente aperture e clic.
Mantieni ogni brand coerente.
Un brand kit contiene i tuoi colori, font, spaziatura, logo e tono di voce, e li applica a un template così l'output appare e si legge come te senza ridefinirne lo stile a mano uno per uno. I kit vivono a livello di workspace e un workspace può tenerne diversi, perché un brand principale, un sub-brand e la tua semplice posta transazionale raramente vogliono lo stesso aspetto. Usare un kit è facoltativo: un template senza nessuno ripiega su default puliti.
Visualizza in anteprima esattamente ciò che verrà inviato.
Riempi un template con valori di esempio e vedi il messaggio renderizzato prima che qualcuno lo riceva. L'anteprima passa attraverso lo stesso percorso di rendering dell'invio reale, così ciò che approvi è ciò che parte, non un'approssimazione abbastanza vicina che devia una volta che token e logica si risolvono per i destinatari reali.
Dove sono diretti i template.
Il modello dei template memorizzati è la base per ciò che arriva dopo: descrivi un template in un prompt e genera una bozza da rifinire, costruiscine uno visivamente senza scrivere HTML e lascia che gli agenti di coding compongano template on-brand tramite MCP, più una libreria di template di partenza da cui iniziare. Questi si costruiscono sullo stesso modello versionato e attento al brand, non su un percorso separato, così l'API che integri oggi è quella che essi estendono.
Approfondisci nei docs.
Scopri come i template si inseriscono nella guida all'invio, incluso il rendering di React Email, e collega gli eventi email e i webhook così aperture e clic tornano indietro per template.
FAQ sui template
Devo per forza usare un builder visuale?+
In cosa differisce un template memorizzato dal passare l'HTML a ogni invio?+
Cosa può fare la personalizzazione oltre al trova-e-sostituisci?+
React Email funziona?+
Posso ripristinare un template che ho rotto?+
C'è la generazione AI o un builder drag-and-drop?+
Come invio concretamente un template memorizzato?+
Il resto della piattaforma Email
Un'unica API, un unico set di chiavi. Esplora le altre funzionalità.
I template fanno parte di una piattaforma, non di uno strumento isolato.
Memorizza, versiona e personalizza i template sulla stessa Email API che gestisce invio, deliverability, soppressione e analisi. Un unico set di chiavi.