# 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](https://www.mailblastr.com/docs/resources/sdks) (or [POST /emails](https://www.mailblastr.com/docs/api/emails-send)). This lets you send structured, branded messages without hand-writing raw email HTML. In a Chat SDK adapter (see [Chat SDK](https://www.mailblastr.com/docs/ai/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.

```ts
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

| Name | Type | Required | Description |
| --- | --- | --- | --- |
| `text` | content | No | A plain-text paragraph. |
| `divider` | — | No | A horizontal rule. |
| `link-button` | label, url | No | A clickable button that opens a URL. |
| `actions` | children | No | 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.

```ts
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}`);
}
```

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