Chat SDK

Chat SDK Card Emails

Send rich, structured HTML card emails by rendering a card object to HTML with React Email and sending it via MailBlastr.

A "card" is a small data structure you render into styled HTML with @react-email/components, then send via the `mailblastr` SDK (or POST /emails). This lets you send structured, branded messages without hand-writing raw email HTML. In a Chat SDK adapter (see Chat SDK) your post method accepts a card and does the render-and-send.

Card structure

Define a card type in your own code: a type, a title, an optional subtitle, and a children array. Children can be text blocks, dividers, link buttons, or action groups.

interface CardElement { /* defined in your project */ }

const card: CardElement = {
  type: 'card',
  title: 'Order Confirmed',
  subtitle: 'Order #1234',
  children: [
    { type: 'text', content: 'Your order has been shipped.' },
    { type: 'divider' },
    {
      type: 'actions',
      children: [
        {
          type: 'link-button',
          label: 'Track Order',
          url: 'https://example.com/track/1234',
        },
      ],
    },
  ],
};

Child element types

textcontentoptional

A plain-text paragraph.

divider—optional

A horizontal rule.

link-buttonlabel, urloptional

A clickable button that opens a URL.

actionschildrenoptional

A container for one or more link buttons.

Rendering and sending a card

Render the card to an HTML string with @react-email/render, then send it with the SDK. Always provide a plain-text text fallback for clients that strip HTML.

import { render } from '@react-email/render';
import { MailBlastr } from 'mailblastr';
import { CardEmail } from './emails/card'; // a React Email component you write

const mb = new MailBlastr(process.env.MAILBLASTR_API_KEY!);

async function sendCard(to: string, card: CardElement, fallbackText: string) {
  const html = await render(<CardEmail card={card} />);

  const { error } = await mb.emails.send({
    from: 'My Bot <bot@yourdomain.com>',
    to: [to],
    subject: card.title,
    html,
    text: fallbackText,
  });
  if (error) throw new Error(`${error.name}: ${error.message}`);
}

Always include a text fallback. Some email clients strip HTML entirely, and the plain-text body is what recipients see in that case.