Sla een e-mailsjabloon op in Bird en verwijs ernaar via id. Conditionals, loops en defaults renderen per ontvanger wanneer het bericht wordt verzonden, zodat de personalisatielogica in het sjabloon blijft in plaats van verspreid door je code. Maak het als HTML met gedeclareerde variabelen, of render je React Email-componenten.
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.
Sla een sjabloon op. Personaliseer bij verzending.
Verzend alleen de waarden die per ontvanger veranderen.
Sjablonen maken deel uit van de Bird Email API. Sla de layout en de logica ervan één keer op; bij elke verzending verwijs je naar het sjabloon en geef je een platte set waarden per ontvanger mee. Bird rendert het uiteindelijke bericht aan zijn kant, zodat hetzelfde sjabloon één e-mail of een miljoen aanstuurt.
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 },
});Meer dan zoeken-en-vervangen.
Echte templating-logica, opgelost aan de kant van Bird, per ontvanger, bij verzending.
- 01
Conditionals.
Toon een blok alleen wanneer een waarde van toepassing is, zoals een notitie alleen voor leden of een banner met gratis verzending, zonder twee verschillende sjablonen te verzenden.
- 02
Loops.
Herhaal een rij voor elk item in een array, zodat één bestelbevestigingssjabloon elk regelitem opsomt dat een klant daadwerkelijk heeft gekocht.
- 03
Defaults.
Val terug op een veilige waarde wanneer een veld ontbreekt, zodat een lege voornaam nooit als een lege begroeting wordt verzonden.
- 04
Geneste data.
Reik in gestructureerde objecten met dotted paths, niet alleen platte top-level keys, zodat je bestaande datavormen er rechtstreeks in passen.
- 05
Rijke variabeletypes.
Gedeclareerde variabelen kunnen strings, getallen, booleans, arrays en objecten zijn, en dat is wat de bovenstaande loops en conditionals mogelijk maakt.
Maak het zoals je al werkt.
Verzend platte HTML met een lijst van gedeclareerde variabelen via de API, en je hebt een werkend sjabloon, geen nieuwe editor om te leren. Liever componenten? Render je React Email-sjablonen naar HTML en sla het resultaat op. Het enige dat je moet weten: laat Bird's tokens als letterlijke tekst in de JSX staan zodat ze de render overleven en bij verzending worden ingevuld, in plaats van een waarde in te bakken wanneer React rendert.
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" }],
});Geversioneerd, net als de rest van je code.
Bewerken gebeurt op een concept en raakt nooit wat live is. Publiceren bevriest een onveranderlijke, genummerde versie en pusht die; als een wijziging misgaat, draai je terug naar een eerdere versie en publiceer je opnieuw. Gelijktijdige bewerkingen worden opgevangen in plaats van stilletjes overschreven, zodat twee mensen die aan hetzelfde sjabloon werken elkaar niet overschrijven. Elke versie draagt een stabiele identiteit, en dat is wat ervoor zorgt dat rapportage per sjabloon opens en clicks correct toeschrijft.
Houd elk merk consistent.
Een brand kit bevat je kleuren, typografie, spacing, logo en tone of voice, en past die toe op een sjabloon zodat de output eruitziet en leest als jij, zonder elk sjabloon met de hand opnieuw te stylen. Kits leven op werkruimteniveau en een werkruimte kan er meerdere bijhouden, omdat een hoofdmerk, een submerk en je gewone transactionele mail zelden dezelfde look willen. Een kit gebruiken is optioneel: een sjabloon zonder kit valt terug op nette defaults.
Bekijk precies wat er verzonden wordt.
Vul een sjabloon met voorbeeldwaarden en zie het gerenderde bericht voordat iemand het ontvangt. De preview loopt door hetzelfde renderpad als de echte verzending, zodat wat je goedkeurt ook is wat eruitgaat, niet een benadering die afdrijft zodra tokens en logica voor echte ontvangers worden opgelost.
Waar sjablonen naartoe gaan.
Het opgeslagen-sjabloonmodel is de basis voor wat hierna komt: beschrijf een sjabloon in een prompt en genereer een concept om te verfijnen, bouw er een visueel zonder HTML te schrijven, en laat coding agents on-brand-sjablonen samenstellen via MCP, plus een bibliotheek met startsjablonen om mee te beginnen. Deze bouwen voort op hetzelfde geversioneerde, merkbewuste model, geen apart spoor, zodat de API die je vandaag integreert dezelfde is die zij uitbreiden.
Ga dieper in de docs.
Zie hoe sjablonen passen in de verzendgids, inclusief het renderen van React Email, en stel e-mailgebeurtenissen en webhooks in zodat opens en clicks per sjabloon terugstromen.
Veelgestelde vragen sjablonen
Moet ik een visuele builder gebruiken?+
Hoe verschilt een opgeslagen sjabloon van het meegeven van HTML bij elke verzending?+
Wat kan de personalisatie meer dan zoeken-en-vervangen?+
Werkt React Email?+
Kan ik een sjabloon terugdraaien dat ik kapot heb gemaakt?+
Is er AI-generatie of een drag-and-drop-builder?+
Hoe verzend ik daadwerkelijk een opgeslagen sjabloon?+
De rest van het Email-platform
Eén API, één set keys. Ontdek de andere mogelijkheden.
Sjablonen zijn deel van een platform, geen losse tool.
Sla sjablonen op, versioneer en personaliseer ze op dezelfde Email API die verzending, deliverability, suppressie en analyses afhandelt. Eén set keys.