Speichern Sie ein E-Mail-Template in Bird und referenzieren Sie es über seine id. Bedingungen, Schleifen und Standardwerte werden pro Empfänger gerendert, wenn die Nachricht gesendet wird, sodass die Personalisierungslogik im Template bleibt, statt über Ihren Code verstreut zu sein. Erstellen Sie es als HTML mit deklarierten Variablen oder rendern Sie Ihre React-Email-Komponenten.
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.
Ein Template speichern. Beim Versand personalisieren.
Senden Sie nur die Werte, die sich pro Empfänger ändern.
Templates sind Teil der Bird Email API. Speichern Sie das Layout und seine Logik einmal; bei jedem Versand referenzieren Sie das Template und übergeben einen flachen Satz an Werten pro Empfänger. Bird rendert die finale Nachricht auf seiner Seite, sodass dasselbe Template eine E-Mail oder eine Million antreibt.
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 },
});Mehr als Suchen-und-Ersetzen.
Echte Templating-Logik, auf Birds Seite aufgelöst, pro Empfänger, beim Versand.
- 01
Bedingungen.
Zeigen Sie einen Block nur an, wenn ein Wert zutrifft, etwa einen Mitglieder-Hinweis oder ein Gratisversand-Banner, ohne zwei verschiedene Templates zu senden.
- 02
Schleifen.
Wiederholen Sie eine Zeile für jedes Element in einem Array, sodass ein Bestellbestätigungs-Template jede einzelne Position auflistet, die ein Kunde tatsächlich gekauft hat.
- 03
Standardwerte.
Greifen Sie auf einen sicheren Wert zurück, wenn ein Feld fehlt, sodass ein leerer Vorname nie als leere Begrüßung verschickt wird.
- 04
Verschachtelte Daten.
Greifen Sie mit Punktpfaden auf strukturierte Objekte zu, nicht nur auf flache Top-Level-Keys, sodass Ihre bestehenden Datenstrukturen direkt passen.
- 05
Reichhaltige Variablentypen.
Deklarierte Variablen können Strings, Zahlen, Booleans, Arrays und Objekte sein, und genau das macht die obigen Schleifen und Bedingungen möglich.
Erstellen Sie es so, wie Sie ohnehin arbeiten.
Senden Sie reines HTML mit einer Liste deklarierter Variablen über die API, und Sie haben ein funktionierendes Template – kein neuer Editor zu lernen. Bevorzugen Sie Komponenten? Rendern Sie Ihre React-Email-Templates zu HTML und speichern Sie das Ergebnis. Das Einzige, was Sie wissen müssen: Belassen Sie Birds Tokens als reinen Text im JSX, damit sie das Rendern überstehen und beim Versand befüllt werden, statt einen Wert fest einzubacken, wenn 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" }],
});Versioniert, wie der Rest Ihres Codes.
Das Bearbeiten geschieht an einem Entwurf und berührt nie das Live-Template. Das Veröffentlichen friert eine unveränderliche, nummerierte Version ein und stellt sie bereit; wenn eine Änderung schiefgeht, setzen Sie auf eine frühere Version zurück und veröffentlichen erneut. Gleichzeitige Bearbeitungen werden abgefangen, statt stillschweigend überschrieben zu werden, sodass zwei Personen, die am selben Template arbeiten, sich nicht gegenseitig überschreiben. Jede Version trägt eine stabile Identität, und genau das ermöglicht es dem Reporting pro Template, Öffnungen und Klicks korrekt zuzuordnen.
Halten Sie jede Marke konsistent.
Ein Brand Kit enthält Ihre Farben, Typografie, Abstände, Ihr Logo und Ihre Tonalität und wendet sie auf ein Template an, sodass das Ergebnis aussieht und klingt wie Sie, ohne jedes einzelne von Hand neu zu gestalten. Kits liegen auf Workspace-Ebene, und ein Workspace kann mehrere führen, weil eine Dachmarke, eine Submarke und Ihre einfachen transaktionalen Mails selten denselben Look wollen. Die Nutzung eines Kits ist optional: Ein Template ohne Kit greift auf saubere Standardwerte zurück.
Sehen Sie genau in der Vorschau, was verschickt wird.
Befüllen Sie ein Template mit Beispielwerten und sehen Sie die gerenderte Nachricht, bevor sie jemand erhält. Die Vorschau läuft über denselben Rendering-Pfad wie der echte Versand, sodass das, was Sie freigeben, auch das ist, was hinausgeht – keine ungefähre Annäherung, die abdriftet, sobald Tokens und Logik für echte Empfänger aufgelöst werden.
Wohin sich Templates entwickeln.
Das Modell gespeicherter Templates ist die Grundlage für das, was als Nächstes kommt: ein Template per Prompt beschreiben und einen Entwurf zum Verfeinern generieren, eines visuell ohne HTML erstellen und Coding-Agenten über MCP markenkonforme Templates komponieren lassen, dazu eine Bibliothek mit Starter-Templates als Ausgangspunkt. Diese bauen auf demselben versionierten, markenbewussten Modell auf, nicht auf einem separaten Strang, sodass die API, die Sie heute integrieren, dieselbe ist, die sie erweitern.
Gehen Sie in der Doku tiefer.
Sehen Sie, wie Templates in den Versand-Leitfaden passen, einschließlich des Renderns von React Email, und binden Sie E-Mail-Ereignisse und Webhooks ein, sodass Öffnungen und Klicks pro Template zurückfließen.
Templates-FAQ
Muss ich einen visuellen Builder verwenden?+
Wie unterscheidet sich ein gespeichertes Template davon, bei jedem Versand HTML zu übergeben?+
Was kann die Personalisierung über Suchen-und-Ersetzen hinaus?+
Funktioniert React Email?+
Kann ich ein Template zurücksetzen, das ich kaputtgemacht habe?+
Gibt es KI-Generierung oder einen Drag-and-Drop-Builder?+
Wie versende ich tatsächlich ein gespeichertes Template?+
Der Rest der E-Mail-Plattform
Eine API, ein Satz Keys. Entdecken Sie die weiteren Funktionen.
Templates sind Teil einer Plattform, kein Einzeltool.
Speichern, versionieren und personalisieren Sie Templates über dieselbe Email API, die Versand, Zustellbarkeit, Suppression und Analytics übernimmt. Ein Satz Keys.