Template email

Dalam pratinjau

Template dengan logika, di-render saat pengiriman.

Simpan template email di Bird dan referensikan dengan id. Conditional, loop, dan default di-render per penerima saat pesan dikirim, sehingga logika personalisasi tetap berada di template alih-alih tersebar di kode Anda. Tulis sebagai HTML dengan variabel yang dideklarasikan, atau render komponen React Email Anda.

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..."

Simpan sebuah template. Personalisasi saat pengiriman.

Kirim hanya nilai yang berubah per penerima.

Template adalah bagian dari Bird Email API. Simpan layout dan logikanya sekali; pada setiap pengiriman Anda mereferensikan template dan mengirimkan satu set nilai per-penerima yang datar. Bird me-render pesan final di sisinya, sehingga template yang sama menggerakkan satu email atau satu juta.

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

Lebih dari sekadar find-and-replace.

Logika templating sungguhan, diselesaikan di sisi Bird, per penerima, saat pengiriman.

01
Conditional.
Tampilkan sebuah blok hanya ketika sebuah nilai berlaku, seperti catatan khusus anggota atau banner free-shipping, tanpa mengirim dua template berbeda.
02
Loop.
Ulangi sebuah baris untuk setiap item dalam array, sehingga satu template konfirmasi pesanan mendaftar setiap item baris yang benar-benar dibeli pelanggan.
03
Default.
Beralih ke nilai aman ketika sebuah field hilang, sehingga nama depan yang kosong tidak pernah dikirim sebagai sapaan kosong.
04
Data bersarang.
Jangkau objek terstruktur dengan jalur bertitik, bukan hanya key datar tingkat-atas, sehingga bentuk data Anda yang ada langsung terpetakan.
05
Tipe variabel yang kaya.
Variabel yang dideklarasikan bisa berupa string, angka, boolean, array, dan objek, yang membuat loop dan conditional di atas menjadi mungkin.

Tulis dengan cara Anda sudah bekerja.

Kirim HTML biasa dengan daftar variabel yang dideklarasikan melalui API, dan Anda sudah punya template yang berfungsi, tanpa editor baru yang perlu dipelajari. Lebih suka komponen? Render template React Email Anda menjadi HTML dan simpan hasilnya. Satu hal yang perlu diketahui: biarkan token Bird sebagai teks literal di JSX agar bertahan melewati render dan terisi saat pengiriman, alih-alih menanamkan nilai saat React me-render.

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

Berversi, seperti kode Anda lainnya.

Pengeditan terjadi pada draft dan tidak pernah menyentuh apa yang live. Publishing membekukan versi yang tidak dapat diubah dan bernomor lalu mendorongnya; jika sebuah perubahan salah, rollback ke versi sebelumnya dan publikasikan kembali. Pengeditan bersamaan ditangkap alih-alih ditimpa secara diam-diam, sehingga dua orang yang mengerjakan template yang sama tidak saling menabrak. Setiap versi membawa identitas yang stabil, yang memungkinkan pelaporan per-template mengatribusikan open dan klik dengan benar.

Jaga setiap brand tetap konsisten.

Sebuah brand kit menyimpan warna, tipografi, spasi, logo, dan suara Anda, lalu menerapkannya ke sebuah template sehingga hasilnya terlihat dan terbaca seperti Anda tanpa menata ulang masing-masing secara manual. Kit berada di level workspace dan sebuah workspace bisa menyimpan beberapa, karena sebuah brand induk, sub-brand, dan email transaksional biasa Anda jarang menginginkan tampilan yang sama. Menggunakan kit bersifat opsional: sebuah template tanpa kit kembali ke default yang bersih.

Pratinjau persis apa yang akan dikirim.

Isi sebuah template dengan nilai sampel dan lihat pesan yang ter-render sebelum ada yang menerimanya. Pratinjau berjalan melalui jalur rendering yang sama dengan pengiriman nyata, sehingga apa yang Anda setujui adalah apa yang dikirim, bukan aproksimasi yang melenceng begitu token dan logika diselesaikan untuk penerima nyata.

Ke mana arah template.

Model template-tersimpan adalah fondasi untuk apa yang akan datang: deskripsikan sebuah template dalam prompt dan hasilkan draft untuk disempurnakan, bangun satu secara visual tanpa menulis HTML, dan biarkan coding agent menyusun template yang sesuai brand melalui MCP, ditambah pustaka template awal untuk titik mulai. Semua ini dibangun di atas model berversi yang sadar-brand yang sama, bukan jalur terpisah, sehingga API yang Anda integrasikan hari ini adalah yang mereka perluas.

Pelajari lebih dalam di dokumentasi.

Lihat bagaimana template cocok dengan panduan pengiriman, termasuk me-render React Email, dan hubungkan email event dan webhook agar open dan klik mengalir kembali per template.

FAQ Template

Apakah saya harus menggunakan visual builder?+

Tidak. Anda bisa membuat dan mengelola template sepenuhnya melalui API: kirim HTML Anda dengan daftar variabel yang dideklarasikan, dan referensikan template dengan id saat Anda mengirim. Builder adalah salah satu cara masuk, bukan satu-satunya.

Apa bedanya template tersimpan dengan mengirimkan HTML pada setiap pengiriman?+

Template tersimpan direferensikan dengan id dan berversi, dan personalisasinya di-render di sisi Bird saat pengiriman. Jadi Anda hanya mengirim nilai per-penerima, bukan seluruh body setiap kali, dan layout serta logikanya berada di satu tempat alih-alih dibangun ulang dalam kode Anda pada setiap panggilan.

Apa yang bisa dilakukan personalisasi selain find-and-replace?+

Conditional, loop atas array, field bersarang, dan default per-field, semuanya diselesaikan per penerima saat pengiriman. Sebuah blok keanggotaan bisa muncul hanya untuk anggota; sebuah pesanan bisa mendaftar item-item barisnya. Logikanya tersimpan di template, sehingga payload key-value datar per penerima sudah cukup untuk menggerakkannya.

Apakah React Email berfungsi?+

Ya. Render komponen React Email Anda menjadi HTML dan simpan hasilnya sebagai body template. Untuk nilai per-penerima, biarkan token Bird sebagai teks literal di JSX agar bertahan melewati render dan terisi saat pengiriman, alih-alih menanamkan nilai saat React me-render.

Bisakah saya rollback template yang saya rusak?+

Publishing membekukan versi yang tidak dapat diubah dan bernomor. Pengeditan terjadi pada draft dan tidak pernah menyentuh apa yang live hingga Anda mempublikasikannya, dan Anda bisa rollback ke versi terpublikasi sebelumnya mana pun lalu mempublikasikannya kembali. Setiap versi mempertahankan identitas yang stabil, yang memungkinkan pelaporan per-template mengatribusikan pengiriman dengan benar.

Apakah ada generasi AI atau drag-and-drop builder?+

Itu adalah yang sedang kami bangun, bukan yang dikirim pertama. API (HTML dengan variabel yang dideklarasikan) dan React Email adalah jalur pembuatan yang tersedia saat ini; visual builder, generasi prompt-to-template, dan permukaan compose agent hadir di atas model template-tersimpan yang sama.

Bagaimana sebenarnya saya mengirim template tersimpan?+

Panggilan pengiriman tidak berubah: referensikan template dengan id dan kirimkan nilai per-penerima, dan email send API yang sudah ada menangani sisanya. Tidak ada endpoint template-send terpisah yang perlu dipelajari.

Sisa platform Email

Satu API, satu set key. Jelajahi kapabilitas lainnya.

DeliverabilityAutentikasi, IP warmup, suppression, dan pemantauan blocklist.AnalitikMetrik pengiriman dan engagement per-domain, per-ISP, per-IP.PengirimanEmail transaksional dan marketing, template, dan batch send.IP DedikasiIP dedikasi dan pool terkelola, di-warmup secara otomatis.Domain pengirimanVerifikasi domain, penandatanganan DKIM/SPF/DMARC, dan pemantauan DMARC.SuppressionSuppression otomatis dan dapat dibalik atas bounce, keluhan, dan unsubscribe.BroadcastKampanye marketing: susun, targetkan sebuah audiens, jadwalkan, dan kirim.AudiensKontak Anda dan audiens yang Anda targetkan dari sebuah broadcast.Ikhtisar Email APIEmail API lengkap: pengiriman, deliverability, IP, suppression, analitik, dan broadcast.

Template adalah bagian dari sebuah platform, bukan tool tunggal.

Simpan, versikan, dan personalisasi template di Email API yang sama yang menangani pengiriman, deliverability, suppression, dan analitik. Satu set key.

Jelajahi platform Email Mulai