Szablony e-maili

W wersji zapoznawczej

Szablony z logiką, renderowane przy wysyłce.

Przechowuj szablon e-maila w Bird i odwołuj się do niego po id. Warunki, pętle i wartości domyślne renderują się dla każdego odbiorcy w momencie wysyłki wiadomości, więc logika personalizacji zostaje w szablonie zamiast być rozproszona po Twoim kodzie. Twórz go jako HTML z zadeklarowanymi zmiennymi lub renderuj swoje komponenty 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..."

Przechowuj szablon. Personalizuj przy wysyłce.

Wysyłaj tylko wartości, które zmieniają się dla każdego odbiorcy.

Szablony są częścią Bird Email API. Przechowuj układ i jego logikę raz; przy każdej wysyłce odwołujesz się do szablonu i przekazujesz płaski zestaw wartości dla danego odbiorcy. Bird renderuje finalną wiadomość po swojej stronie, więc ten sam szablon obsługuje jeden e-mail lub milion.

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 },
});

Więcej niż wyszukaj-i-zamień.

Prawdziwa logika szablonów, rozwiązywana po stronie Bird, dla każdego odbiorcy, przy wysyłce.

01
Warunki.
Pokazuj blok tylko wtedy, gdy dana wartość ma zastosowanie, jak notka tylko dla członków lub baner o darmowej dostawie, bez wysyłania dwóch różnych szablonów.
02
Pętle.
Powtarzaj wiersz dla każdego elementu w tablicy, aby jeden szablon potwierdzenia zamówienia wylistował każdą pozycję, którą klient faktycznie kupił.
03
Wartości domyślne.
Wracaj do bezpiecznej wartości, gdy brakuje pola, aby puste imię nigdy nie zostało wysłane jako puste powitanie.
04
Dane zagnieżdżone.
Sięgaj do uporządkowanych obiektów za pomocą ścieżek z kropkami, a nie tylko płaskich kluczy najwyższego poziomu, dzięki czemu Twoje istniejące struktury danych mapują się wprost.
05
Bogate typy zmiennych.
Zadeklarowane zmienne mogą być łańcuchami znaków, liczbami, wartościami logicznymi, tablicami i obiektami, co właśnie umożliwia powyższe pętle i warunki.

Twórz tak, jak już pracujesz.

Wyślij przez API zwykły HTML z listą zadeklarowanych zmiennych, a masz działający szablon, bez nowego edytora do nauki. Wolisz komponenty? Wyrenderuj swoje szablony React Email do HTML i zapisz wynik. Jedno, co trzeba wiedzieć: zostaw tokeny Bird jako dosłowny tekst w JSX, aby przetrwały renderowanie i zostały wypełnione przy wysyłce, zamiast wpisywać wartość na stałe, gdy React renderuje.

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" }],
});

Wersjonowane, jak reszta Twojego kodu.

Edycja odbywa się na wersji roboczej i nigdy nie dotyka tego, co jest na żywo. Publikowanie zamraża niezmienną, numerowaną wersję i ją wdraża; jeśli zmiana pójdzie źle, cofnij się do wcześniejszej wersji i opublikuj ponownie. Równoczesne edycje są wychwytywane, a nie po cichu nadpisywane, więc dwie osoby pracujące na tym samym szablonie nie nadpisują nawzajem swojej pracy. Każda wersja niesie stabilną tożsamość, co pozwala raportowaniu na poziomie szablonu poprawnie przypisywać otwarcia i kliknięcia.

Zachowaj spójność każdej marki.

Zestaw marki przechowuje Twoje kolory, typografię, odstępy, logo i ton wypowiedzi oraz stosuje je do szablonu, aby efekt wyglądał i brzmiał jak Ty, bez ręcznego restylizowania każdego z osobna. Zestawy żyją na poziomie obszaru roboczego, a obszar roboczy może mieć ich kilka, ponieważ marka nadrzędna, submarka i Twoja zwykła poczta transakcyjna rzadko chcą tego samego wyglądu. Korzystanie z zestawu jest opcjonalne: szablon bez żadnego wraca do czystych wartości domyślnych.

Podglądaj dokładnie to, co zostanie wysłane.

Wypełnij szablon przykładowymi wartościami i zobacz wyrenderowaną wiadomość, zanim ktokolwiek ją otrzyma. Podgląd przechodzi tą samą ścieżką renderowania co prawdziwa wysyłka, więc to, co zatwierdzasz, jest tym, co wychodzi, a nie wystarczająco bliskim przybliżeniem, które rozjeżdża się, gdy tokeny i logika rozwiązują się dla prawdziwych odbiorców.

Dokąd zmierzają szablony.

Model przechowywanych szablonów jest fundamentem tego, co nadchodzi: opisz szablon w promptcie i wygeneruj wersję roboczą do dopracowania, zbuduj go wizualnie bez pisania HTML i pozwól agentom kodującym komponować szablony zgodne z marką przez MCP, a do tego biblioteka szablonów startowych, od których można zacząć. Budują one na tym samym wersjonowanym, świadomym marki modelu, a nie na osobnej ścieżce, więc API, które integrujesz dziś, to to samo, które one rozszerzają.

Zgłęb temat w dokumentacji.

Zobacz, jak szablony wpisują się w przewodnik wysyłki, w tym renderowanie React Email, i podłącz zdarzenia e-mail oraz webhooki, aby otwarcia i kliknięcia wracały w podziale na szablon.

Szablony – najczęściej zadawane pytania

Czy muszę używać kreatora wizualnego?+

Nie. Możesz tworzyć szablony i zarządzać nimi w całości przez API: wyślij swój HTML z listą zadeklarowanych zmiennych i odwołuj się do szablonu po id podczas wysyłki. Kreator to jedna z dróg, a nie jedyna.

Czym przechowywany szablon różni się od przekazywania HTML przy każdej wysyłce?+

Przechowywany szablon jest przywoływany po id i wersjonowany, a jego personalizacja renderuje się po stronie Bird przy wysyłce. Wysyłasz więc tylko wartości dla danego odbiorcy, a nie całą treść za każdym razem, a układ i logika żyją w jednym miejscu zamiast być odbudowywane w Twoim kodzie przy każdym wywołaniu.

Co potrafi personalizacja poza zwykłym wyszukaj-i-zamień?+

Warunki, pętle po tablicach, pola zagnieżdżone i wartości domyślne dla pól, wszystko rozwiązywane dla każdego odbiorcy przy wysyłce. Blok członkostwa może pokazywać się tylko członkom; zamówienie może wylistować swoje pozycje. Logika jest przechowywana w szablonie, więc płaski ładunek klucz-wartość na odbiorcę wystarczy, by ją uruchomić.

Czy React Email działa?+

Tak. Wyrenderuj swoje komponenty React Email do HTML i zapisz wynik jako treść szablonu. W przypadku wartości dla danego odbiorcy zostaw tokeny Bird jako dosłowny tekst w JSX, aby przetrwały renderowanie i zostały wypełnione przy wysyłce, zamiast wpisywać wartość na stałe, gdy React renderuje.

Czy mogę cofnąć szablon, który zepsułem?+

Publikowanie zamraża niezmienną, numerowaną wersję. Edycja odbywa się na wersji roboczej i nie dotyka tego, co jest na żywo, dopóki nie opublikujesz, a do dowolnej wcześniej opublikowanej wersji możesz się cofnąć i opublikować ją ponownie. Każda wersja zachowuje stabilną tożsamość, co pozwala raportowaniu na poziomie szablonu poprawnie przypisywać wysyłki.

Czy jest generowanie przez AI lub kreator typu przeciągnij i upuść?+

To kierunek, w którym zmierzamy, a nie to, co pojawia się jako pierwsze. API (HTML z zadeklarowanymi zmiennymi) i React Email to dostępne dziś ścieżki tworzenia; kreator wizualny, generowanie szablonu z promptu i powierzchnia kompozycji dla agentów powstają na tym samym modelu przechowywanych szablonów.

Jak w praktyce wysłać przechowywany szablon?+

Wywołanie wysyłki pozostaje bez zmian: odwołaj się do szablonu po id i przekaż wartości dla danego odbiorcy, a istniejące API wysyłki e-maili zajmie się resztą. Nie ma osobnego endpointu do wysyłki szablonów, którego trzeba by się uczyć.

Pozostała część platformy Email

Jedno API, jeden zestaw kluczy. Poznaj pozostałe możliwości.

DostarczalnośćUwierzytelnianie, rozgrzewanie IP, wykluczenia i monitorowanie list blokujących.AnalitykaWskaźniki dostarczeń i zaangażowania w podziale na domenę, ISP i adres IP.WysyłkaPoczta transakcyjna i marketingowa, szablony oraz wysyłki wsadowe.Dedykowane adresy IPZarządzane dedykowane adresy IP i pule, rozgrzewane automatycznie.Domeny wysyłkoweWeryfikacja domen, podpisywanie DKIM/SPF/DMARC i monitorowanie DMARC.WykluczeniaAutomatyczne, odwracalne wykluczanie odbić, skarg i rezygnacji z subskrypcji.BroadcastsKampanie marketingowe: przygotuj, skieruj do listy odbiorców, zaplanuj i wyślij.Listy odbiorcówTwoje kontakty i listy odbiorców, do których kierujesz broadcasty.Przegląd Email APIPełne Email API: wysyłka, dostarczalność, adresy IP, wykluczenia, analityka i broadcasty.

Szablony są częścią platformy, a nie pojedynczym narzędziem.

Przechowuj, wersjonuj i personalizuj szablony w tym samym Email API, które obsługuje wysyłkę, dostarczalność, wykluczenia i analitykę. Jeden zestaw kluczy.

Poznaj platformę Email Rozpocznij