Templates de e-mail
Em previewTemplates com lógica, renderizados no momento do envio.
Armazene um template de e-mail na Bird e referencie-o por id. Condicionais, loops e valores padrão são renderizados por destinatário quando a mensagem é enviada, então a lógica de personalização fica no template em vez de espalhada pelo seu código. Faça a autoria como HTML com variáveis declaradas ou renderize seus componentes do React Email.
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.
Armazene um template. Personalize no envio.
Envie apenas os valores que mudam por destinatário.
Os templates fazem parte da Bird Email API. Armazene o layout e sua lógica uma vez; em cada envio, você referencia o template e passa um conjunto simples de valores por destinatário. A Bird renderiza a mensagem final do seu lado, então o mesmo template conduz um e-mail ou um milhão.
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 },
});Mais do que localizar e substituir.
Lógica de templating de verdade, resolvida no lado da Bird, por destinatário, no envio.
- 01
Condicionais.
Mostre um bloco apenas quando um valor se aplica, como uma nota exclusiva para membros ou um banner de frete grátis, sem enviar dois templates diferentes.
- 02
Loops.
Repita uma linha para cada item em um array, para que um único template de confirmação de pedido liste todos os itens que o cliente realmente comprou.
- 03
Valores padrão.
Recorra a um valor seguro quando um campo está ausente, para que um primeiro nome em branco nunca seja enviado como uma saudação vazia.
- 04
Dados aninhados.
Acesse objetos estruturados com caminhos em notação de ponto, não apenas chaves simples de nível superior, para que seus formatos de dados existentes se encaixem diretamente.
- 05
Tipos de variável ricos.
As variáveis declaradas podem ser strings, números, booleanos, arrays e objetos, que é o que torna possíveis os loops e condicionais acima.
Faça a autoria do jeito que você já trabalha.
Envie HTML puro com uma lista de variáveis declaradas pela API e você terá um template funcional, sem um novo editor para aprender. Prefere componentes? Renderize seus templates do React Email para HTML e armazene o resultado. A única coisa a saber: deixe os tokens da Bird como texto literal no JSX para que sobrevivam à renderização e sejam preenchidos no envio, em vez de incorporar um valor quando o React renderiza.
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" }],
});Versionados, como o resto do seu código.
A edição acontece em um rascunho e nunca afeta o que está no ar. A publicação congela uma versão imutável e numerada e a coloca no ar; se uma mudança der errado, reverta para uma versão anterior e republique. Edições concorrentes são detectadas em vez de sobrescritas silenciosamente, então duas pessoas trabalhando no mesmo template não atrapalham uma à outra. Cada versão carrega uma identidade estável, o que é o que permite que os relatórios por template atribuam aberturas e cliques corretamente.
Mantenha cada marca consistente.
Um brand kit guarda suas cores, tipografia, espaçamento, logo e tom de voz, e os aplica a um template para que o resultado tenha a aparência e a leitura da sua marca sem reestilizar cada um manualmente. Os kits ficam no nível do workspace e um workspace pode manter vários, porque uma marca-mãe, uma submarca e seu e-mail transacional simples raramente querem o mesmo visual. Usar um kit é opcional: um template sem nenhum recorre a padrões limpos.
Visualize exatamente o que será enviado.
Preencha um template com valores de exemplo e veja a mensagem renderizada antes de qualquer pessoa recebê-la. O preview passa pelo mesmo caminho de renderização do envio real, então o que você aprova é o que sai, não uma aproximação razoável que se desvia quando os tokens e a lógica são resolvidos para destinatários reais.
Para onde os templates estão indo.
O modelo de template armazenado é a base para o que vem a seguir: descreva um template em um prompt e gere um rascunho para refinar, crie um visualmente sem escrever HTML e deixe que agentes de código componham templates dentro da marca via MCP, além de uma biblioteca de templates iniciais para começar. Tudo isso se constrói sobre o mesmo modelo versionado e consciente da marca, não em uma trilha separada, então a API que você integra hoje é a mesma que eles estendem.
Aprofunde-se na documentação.
Veja como os templates se encaixam no guia de envio, incluindo a renderização do React Email, e configure os eventos de e-mail e webhooks para que aberturas e cliques retornem por template.
FAQ de Templates
Preciso usar um editor visual?+
Em que um template armazenado difere de passar HTML em cada envio?+
O que a personalização pode fazer além de localizar e substituir?+
O React Email funciona?+
Posso reverter um template que estraguei?+
Existe geração por IA ou um editor de arrastar e soltar?+
Como eu de fato envio um template armazenado?+
O restante da plataforma de e-mail
Uma API, um conjunto de chaves. Conheça os outros recursos.
Os templates fazem parte de uma plataforma, não de uma ferramenta pontual.
Armazene, versione e personalize templates na mesma Email API que cuida do envio, da entregabilidade, da supressão e da análise. Um único conjunto de chaves.