Templates de e-mail

Em preview

Templates com lógica, renderizados no momento do envio.

Armazene um assunto e corpo uma vez, publique-o como uma versão imutável e envie-o por slug. Condicionais, loops e filtros Liquid são executados quando a mensagem é gerada, de modo que a lógica de personalização vive no template em vez de espalhada pelo seu código. Crie-o no builder do painel, a partir do bird CLI, ou deixe um agente fazê-lo via 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..."

Armazene um template. Personalize no envio.

A marcação já está no Bird.

Os templates fazem parte da Bird Email API. Armazene o layout e a sua lógica uma vez; cada envio indica o template por slug ou id e passa os valores que os seus tokens precisam. A mensagem final é renderizada do nosso lado, de modo que o mesmo template serve um recibo, um lote de cem ou um broadcast para toda uma audiência.

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();

Mais do que localizar e substituir.

Liquid, resolvido do lado do Bird quando a mensagem é gerada.

  1. 01

    Condicionais.

    Um bloco Liquid if é exibido apenas quando o seu valor se aplica, como uma nota exclusiva para membros ou um banner de frete grátis, para que um template cubra ambos os casos.

  2. 02

    Loops.

    Um loop for repete uma linha para cada item num array, de modo que um template de confirmação de pedido lista cada item que o cliente realmente comprou. Um limite que vale a pena saber de antemão: um broadcast carrega um único valor por propriedade de contacto e não tem nada para iterar, por isso um template com loops é enviado pela API de mensagens em vez de um broadcast.

  3. 03

    Filtros.

    Passe um valor por um filtro Liquid antes de renderizar. O filtro default captura um primeiro nome em falta antes de ser enviado como uma saudação vazia.

  4. 04

    Dados aninhados.

    Tokens com notação de ponto acedem a objetos estruturados, para que possa passar um objeto de pedido completo e referenciar o seu número e total a partir da marcação, em vez de o aplanar primeiro.

  5. 05

    Nada a declarar.

    A lista de tokens é lida a partir da sua marcação, combinada em todos os idiomas, de modo que não há um esquema de variáveis separado para manter sincronizado com o corpo. Os valores podem ser qualquer JSON: strings, números, booleanos, arrays, objetos.

Faça a autoria do jeito que você já trabalha.

Três formas de entrada, todas chegando ao mesmo template. O builder do painel é o visual. O bird CLI controla todo o ciclo de vida a partir de um script ou passo de deploy, e um agente acede às mesmas operações via MCP. Já tem componentes React Email? Renderize-os para HTML e armazene o resultado, deixando os tokens do Bird como texto literal no JSX para que sobrevivam à renderização em vez de ficarem fixos com um valor quando o React é executado.

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

Versionados, como o resto do seu código.

A edição acontece num rascunho e nunca toca no que está live, porque um envio resolve sempre a versão publicada atual e rascunhos nunca são enviados. Publicar congela uma versão imutável e numerada e torna-a live; se uma alteração correr mal, reverta para uma anterior. As gravações carregam a revisão que leu por último, de modo que se um colega alterou esse idioma entretanto, a gravação é recusada como conflito em vez de sobrescrever o trabalho dele. As estatísticas de entrega e engagement são discriminadas por template, para que possa ver qual está realmente a funcionar.

Um template, até 25 idiomas.

Um template carrega conteúdo em até 25 idiomas, cada um com o seu próprio assunto e corpo, indexados por uma tag BCP-47 como en ou pt-BR. Um envio indica o idioma pretendido, ou omite-o e recebe o padrão do template. Quando um envio pede um idioma que o template não possui, on_missing_language decide o que acontece: fallback serve a correspondência mais próxima, de modo que um pedido de pt-BR é respondido por um pt armazenado, e fail rejeita o envio por completo, para conteúdo onde o idioma errado é pior do que não enviar.

Visualize exatamente o que será enviado.

Preencha um template com valores de exemplo e receba de volta o assunto e os corpos HTML e texto que um envio entregaria. A pré-visualização renderiza o rascunho, que é como verifica uma alteração antes de ir para live, ou uma versão publicada quando quer ver o que está a ser enviado neste momento. Nada é enviado. Também executa as mesmas verificações de personalização que a publicação, de modo que uma construção que seria rejeitada aparece aqui primeiro.

Para onde os templates estão indo.

O builder visual e uma biblioteca inicial de quarenta templates integrados já estão incluídos, para que possa copiar um para o seu workspace e editar a partir daí. Próximos na lista: descreva um template num prompt e obtenha um rascunho para refinar, uma superfície de composição mais compacta para agentes e brand kits, que guardarão as suas cores, tipografia e voz ao nível do workspace e aplicarão estilo a um template a partir deles. Cada um desses estende o mesmo modelo versionado, de modo que o que integra hoje é a base sobre a qual constroem.

Aprofunde-se na documentação.

O guia de templates cobre rascunhos, versões publicadas, conteúdo por idioma e as regras Liquid. O guia de envio tem o contrato do lado do envio, e eventos de e-mail e webhooks faz com que aberturas e cliques fluam de volta.

Os templates vêm com a plataforma à volta deles.

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.

Comece com um canal.
Adicione os outros quando estiver pronto.

Uma chave API de teste é sua imediatamente. A produção é desbloqueada quando você adiciona um método de pagamento e verifica um remetente.

Usa Claude Code, Cursor ou Codex? Copie um prompt de configuração e o seu agente instala o Bird CLI e as skills por si. Escolha o seu:

Cursor