Szablony e-maili

W wersji zapoznawczej

Szablony z logiką, renderowane przy wysyłce.

Zapisz temat i treść raz, opublikuj jako niezmienną wersję, a potem wysyłaj po slugu. Warunkowe wyrażenia Liquid, pętle i filtry są wykonywane w momencie generowania wiadomości, więc logika personalizacji żyje w szablonie, a nie jest rozproszona po Twoim kodzie. Twórz szablony w kreatorze w panelu, z poziomu bird CLI lub pozwól agentowi zrobić to przez MCP.

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.

Znaczniki już są w Bird.

Szablony są częścią Bird Email API. Zapisz układ i jego logikę raz; każda wysyłka wskazuje szablon po slugu lub id i przekazuje wartości, których wymagają jego tokeny. Końcowa wiadomość jest renderowana po naszej stronie, więc ten sam szablon obsługuje jeden paragon, paczkę stu wiadomości lub broadcast do całej grupy odbiorców.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { BirdClient } from "@messagebird/sdk";

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

// No subject and no html: the template's published version supplies both.
const { data, error } = await bird.email
  .send({
    from:     "orders@acme.com",
    to:       ["delivered@messagebird.dev"],
    category: "transactional",
    template: {
      slug:       "order-confirmation",
      parameters: {
        first_name: "Ada",
        order:      { number: "A-1043", total: "$42.00" },
      },
    },
  })
  .safe();

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

Liquid, przetwarzany po stronie Bird w momencie generowania wiadomości.

  1. 01

    Warunki.

    Blok Liquid if wyświetla się tylko wtedy, gdy jego wartość ma zastosowanie — np. notatka tylko dla członków lub baner darmowej dostawy — dzięki czemu jeden szablon obsługuje oba przypadki.

  2. 02

    Pętle.

    Pętla for powtarza wiersz dla każdego elementu w tablicy, więc jeden szablon potwierdzenia zamówienia wyświetla każdą pozycję, którą klient faktycznie kupił. Jedno ograniczenie warte poznania z góry: broadcast przekazuje jedną wartość na właściwość kontaktu i nie ma po czym iterować, więc szablon z pętlami wysyła przez API wiadomości, a nie przez broadcast.

  3. 03

    Filtry.

    Przepuść wartość przez filtr Liquid przed renderowaniem. Filtr default wyłapie brakujące imię, zanim trafi ono jako pusty nagłówek powitania.

  4. 04

    Dane zagnieżdżone.

    Tokeny z kropką sięgają w głąb obiektów strukturalnych, więc możesz przekazać cały obiekt zamówienia i odwołać się do jego numeru i sumy bezpośrednio ze znaczników, zamiast go wcześniej spłaszczać.

  5. 05

    Nic do deklarowania.

    Lista tokenów jest odczytywana z Twoich znaczników i łączona ze wszystkich języków, więc nie ma osobnego schematu zmiennych, który trzeba synchronizować z treścią. Wartości mogą być dowolnym JSON: ciągi znaków, liczby, wartości logiczne, tablice, obiekty.

Twórz tak, jak już pracujesz.

Trzy sposoby tworzenia, wszystkie prowadzą do tego samego szablonu. Kreator w panelu to opcja wizualna. Bird CLI obsługuje cały cykl życia ze skryptu lub kroku wdrożenia, a agent korzysta z tych samych operacji przez MCP. Masz już komponenty React Email? Wyrenderuj je do HTML i zapisz wynik, zostawiając tokeny Bird jako tekst dosłowny w JSX, aby przetrwały renderowanie, zamiast zostać zastąpione wartościami podczas uruchamiania React.

publish-receipt.sh
bird CLI
# Render React Email to HTML, then publish it as a template version.
node scripts/render-receipt.mjs > receipt.json

bird email templates create receipt --category transactional --source html
bird email templates versions languages set "$TEMPLATE" "$DRAFT" en \
  --body-file receipt.json --yes

# --validate-only reports every problem across every language, freezing nothing.
bird email templates versions submit "$TEMPLATE" "$DRAFT" --validate-only --yes
bird email templates versions submit "$TEMPLATE" "$DRAFT" --yes

Wersjonowane, jak reszta Twojego kodu.

Edycja odbywa się na wersji roboczej i nigdy nie dotyka tego, co jest opublikowane, ponieważ wysyłka zawsze używa aktualnie opublikowanej wersji, a wersje robocze nigdy nie są wysyłane. Publikacja zamraża niezmienną, numerowaną wersję i udostępnia ją; jeśli zmiana pójdzie źle, możesz cofnąć się do wcześniejszej. Zapisy zawierają rewizję, którą ostatnio odczytałeś/odczytałaś — jeśli w międzyczasie współpracownik zmienił dany język, zapis jest odrzucany jako konflikt zamiast nadpisywania jego pracy. Statystyki dostarczalności i zaangażowania są rozbite na szablony, dzięki czemu widzisz, który faktycznie działa.

Jeden szablon, do 25 języków.

Szablon zawiera treść w maksymalnie 25 językach, każdy z własnym tematem i treścią, oznaczony tagiem BCP-47, np. en lub pt-BR. Wysyłka wskazuje żądany język lub pomija go i otrzymuje domyślny język szablonu. Gdy wysyłka żąda języka, którego szablon nie posiada, on_missing_language decyduje, co się stanie: fallback zwraca najbliższe dopasowanie, więc żądanie pt-BR jest obsługiwane przez dostępne pt, a fail odrzuca wysyłkę całkowicie — dla treści, gdzie niewłaściwy język jest gorszy niż brak wysyłki.

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

Wypełnij szablon przykładowymi wartościami i otrzymaj temat oraz treści HTML i tekstowe, które zostałyby dostarczone. Podgląd renderuje wersję roboczą — tak sprawdzasz zmianę przed publikacją — lub opublikowaną wersję, gdy chcesz zobaczyć, co jest aktualnie wysyłane. Nic nie jest wysyłane. Uruchamiane są też te same kontrole personalizacji co przy publikacji, więc konstrukcja, która zostałaby odrzucona, pojawi się tutaj jako pierwsza.

Dokąd zmierzają szablony.

Kreator wizualny i biblioteka startowa czterdziestu wbudowanych szablonów są już dostępne, więc możesz skopiować jeden do swojego workspace'u i edytować. Następne w kolejce: opisz szablon w prompcie i otrzymaj wersję roboczą do dopracowania, bardziej zwarta powierzchnia tworzenia dla agentów oraz zestawy marki, które będą przechowywać Twoje kolory, typografię i ton na poziomie workspace'u i stylizować szablon na ich podstawie. Każda z tych funkcji rozszerza ten sam wersjonowany model, więc to, co integrujesz dziś, jest fundamentem, na którym one powstają.

Zgłęb temat w dokumentacji.

Przewodnik po szablonach obejmuje wersje robocze, opublikowane wersje, treści w różnych językach oraz reguły Liquid. Przewodnik po wysyłce opisuje kontrakt po stronie wysyłki, a zdarzenia e-mail i webhooki pozwalają odbierać dane o otwarciach i kliknięciach.

Szablony dostarczane są z całą otaczającą je platformą.

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

Zacznij od jednego kanału.
Dodaj kolejne, gdy będziesz gotowy.

Testowy klucz API otrzymasz od razu. Dostęp produkcyjny odblokujesz po dodaniu metody płatności i weryfikacji nadawcy.

Używasz Claude Code, Cursor lub Codex? Skopiuj prompt konfiguracyjny, a Twój agent zainstaluje za Ciebie Bird CLI i umiejętności. Wybierz swój:

Cursor