# Drag-and-Drop Email Builder

> Product documentation: design broadcasts, templates and sequence emails visually with Broadcast's block editor, your channel's brand kit, personalisation tags and subscriber previews.

Source: https://sendbroadcast.net/docs/block-email-builder

The block editor lets you design an email by dragging blocks onto a canvas, with no HTML. It is the third option, alongside rich text and HTML, when you create a broadcast, a template or a "Send Email" step in a sequence.

Everything the editor produces is rendered on the server into table-based HTML with inline styles, so what you see on the canvas is exactly what is sent, and it holds up in Outlook, Gmail and Apple Mail.

## Set up your brand kit first

Go to **Settings → Brand Kit**. The editor fills the window: the settings on the left, a live sample email on the right that follows every change, and Save in the top bar, which tells you when you have unsaved changes. On a phone the settings fill the screen and **Show preview** swaps to the sample.

The brand kit holds your logo and its display width, website, social links and their icon style (dark, light or brand colours), colours and font. Email width is set per design in the editor. Every new block email starts from it, and three blocks read from it directly:

- **Header** shows your logo linked to your website, or your channel name until a logo is set.
- **Footer** shows your sender name and physical address from **Settings → Sender Details**, plus the unsubscribe link.
- **Social links** shows the profiles you filled in, with hosted icons.

Change the brand kit and every draft picks up the new colours the next time it is saved. Emails that have already been sent keep the HTML they went out with.

Note

Fonts are limited to stacks every mail client can render. Custom web fonts are not supported in email.

### Using the brand kit beyond emails

Block emails always use the brand kit. Everything else is opt-in, so nothing changes for an existing installation until you ask for it. At the bottom of **Settings → Brand Kit**, under **Where to use this brand kit**, tick each area you want:

- **Unsubscribe and resubscribe pages** take the whole kit: your logo (linked to your website), social profile icons, page and card backgrounds, text, secondary text and link colours, the accent for buttons, the corner radius and the font. The unsubscribe button stays red unless you ask for the accent, so leaving is clearly marked. The [Unsubscribe Settings](https://sendbroadcast.net/docs/unsubscribe-settings) page can also give those pages their own colours, which take priority over the kit.
- **Subscription confirmation page** takes the same, on the page a subscriber lands on after confirming their email. Its page editor can also give it its own colours, which take priority over the kit: see [Confirmation Pages](https://sendbroadcast.net/docs/confirmation-pages#appearance).
- **New opt-in forms** start from the kit's accent, text colours, font and corner radius, and the form designer offers **Apply brand kit** to copy those values into a form. The form's other colours, sizes and effects are left alone, and existing forms are never changed on their own.

![The Brand Kit editor scrolled to Typography and layout and Where to use this brand kit, with Unsubscribe and resubscribe pages and Subscription confirmation page ticked, beside a live sample email in the kit's colours and font](https://sendbroadcast.net/assets/docs/block-email-builder/brand-kit-where-to-use-189e9a3f.png)

The rich-text editor always offers your accent colour as a one-click swatch beside the colour picker. The logo you choose must come from this channel's file library.

## The editor

Choosing **Drag and drop** for a new broadcast or template first asks you to **choose a layout**: **Blank** (your brand header, a heading, text, a button and a footer) or one of twelve ready-made layouts, such as a newsletter, a product launch, an event invitation or an order confirmation. Each layout is shown in your own brand kit and starts in it, not in the colours of the preview gallery. Picking one creates the draft and opens the editor in its own full-width window. The composer, template form or sequence step shows a preview of the rendered design with an **Edit design** button that takes you back into the editor; **Done** or **Back** returns you.

Everything you do in the editor is saved as you go. The header shows **Saved** with the time, **Saving**, **Unsaved changes**, or **Save failed** with a **Retry** button, and Done waits for a pending save before it leaves. If the same design is changed in another tab or by someone else, the editor tells you and lets you load their version or keep yours. Edits that never reached the server are kept on your device and offered back the next time you open that design.

The editor has three panes.

- **Blocks** on the left. Drag a block onto the email, or click it to add it after the selected block.
- **The canvas** in the middle. Click a block to select it. The small toolbar on the block moves it up or down, duplicates it or deletes it. Drag blocks to reorder them, including into and out of columns.
- **The inspector** on the right. With nothing selected it shows the email's own fields (name, subject, preview text) and the design overrides for this email. With a block selected it shows that block's settings.

Above the canvas you can undo and redo, switch between desktop and mobile widths, preview the email as a real subscriber, and save the design as a template.

Keyboard shortcuts: **Escape** deselects, **Delete** removes the selected block, **⌘Z** and **⇧⌘Z** (or Ctrl+Z and Ctrl+Y) undo and redo.

## Blocks

| Block | What it does |
|---|---|
| Heading, Text | Headings in three sizes and rich text with bold, italic, underline, lists and links. |
| Image | Upload an image, pick one from your file library, or paste a URL. Optionally link it. |
| Button | A bulletproof button that renders correctly in Outlook. Solid or outline, full width or not. |
| Image + text | An image beside a title, some text and a link. Flip it to put the image on the right. |
| Video | A linked thumbnail with a caption. Email clients do not play video, so this links out. |
| Columns | Two or three columns that stack on phones. Drag any block except another Columns block into a column. |
| Divider, Spacer | Horizontal rules and vertical space. |
| Brand header, Footer, Social links | Read from your brand kit (see above). The Brand header shows the logo from Settings → Brand Kit, or your channel name until one is set; its inspector shows which. |
| HTML | Paste your own markup. Scripts, forms and event handlers are removed. Set `font-family` on your own elements or Outlook will fall back to Times New Roman. |

### Link colour

(Requires Broadcast 2.48 or later)

Text and Image + text blocks have a **Link colour** setting in the inspector. It sets the colour of every link in the text of that block. Leave it blank, and the field shows **Using theme** with the colour the links get. **Reset** clears the field and returns the block to the theme colour.

![The design window with a Text block selected: the inspector's Link colour field is set to #dc2626 and both links in the block show in red on the canvas](https://sendbroadcast.net/assets/docs/block-email-builder/link-colour-ad2b5228.png)

A link takes the first colour that is set:

1. The **Link colour** of the block.
2. The link colour in the design overrides for this email (`theme.link` in the API).
3. The link colour of your brand kit.

Through the API, set the block colour as `styles.linkColor` with a hex value such as `#1a73e8`. A value the renderer does not accept is ignored, the theme link colour is used, and the response carries a `parameter_ignored` warning (see [API Response Warnings](https://sendbroadcast.net/docs/api-response-warnings)).

## Personalisation

Any text field with a tag button can insert a personalisation tag such as `{{ first_name }}` or `{{ custom_data.company }}`. The list includes the standard subscriber fields plus the custom fields Broadcast finds on this channel, from opt-in form custom fields and from subscriber data. A tag with a fallback, for example `{{ first_name | default: "there" }}`, works too.

To check the result, type a subscriber's name or email into **Preview as subscriber** above the canvas. The canvas is rendered with that subscriber's real data and any visibility rules applied. Choose **Sample data** to preview without a real subscriber. Editing is paused while previewing; click **Exit preview** to continue.

## Show a block only to some subscribers

Every block has a **Visibility** setting at the bottom of its inspector. Enter a tag, and the block is sent only to subscribers who carry that tag. Everyone else receives the email without it. This is a good fit for a paid-members section, a regional notice or a nudge aimed at people who have not completed a step.

## Templates and sequences

- **Save as template** stores the current design as a reusable block template. It appears under Templates with a "Drag and drop" badge and can start a new broadcast or a sequence step.
- Sequence steps built with the editor render through the same engine when the step sends, so a brand kit change reaches automated emails too.
- The ready-made layouts are offered every time you start a drag-and-drop email, so there is nothing to install. If you would also like them as templates in a channel's Templates list, seed them from the command line:

bash

```
bin/rails block_templates:seed CHANNEL=your-channel-slug
```

## Footer, tracking and the API

- A **Footer** block replaces the channel footer that Broadcast normally appends, so subscribers never see two footers. Leave the footer block out (or delete it later) and the channel footer is appended as usual. The design decides this each time it is saved, so the "Add footer to HTML body" setting is not shown for block emails. A design that links `{{ unsubscribe_url }}` itself, for example in a footer of your own in an HTML block, also gets no channel footer (see [API Response Warnings](https://sendbroadcast.net/docs/api-response-warnings#the-footer-of-a-block-email)). The same rule follows a block template wherever it is used: sequence steps, confirmation emails and transactional emails made from it.
- The footer block's **Show unsubscribe link** option (on by default, `"showUnsubscribe"` in the API) removes its unsubscribe link (2.46.0 or later). Turn it off only for an email that must not have one, such as a double opt-in confirmation. The option removes the link from the footer block only. The email must also be sent with its unsubscribe link off: an email sent with the link on, and with no other unsubscribe link, gets the channel footer. For a double opt-in confirmation, turn off the opt-in form's unsubscribe link setting, or send `double_opt_in: { include_unsubscribe_link: false }` in the subscribers API. The confirmation then has no channel footer, no unsubscribe link and no `List-Unsubscribe` header. See [API Response Warnings](https://sendbroadcast.net/docs/api-response-warnings#emails-sent-with-the-unsubscribe-link-off) for every type of email.
- When an email goes out with its unsubscribe link switched off (a confirmation, a transactional or a sequence step), the footer block leaves its unsubscribe link out. The preference page link is left out when there is no preference page, for example in a transactional email to an address that is not a subscriber.
- On a Postmark server whose `broadcast` stream has Postmark unsubscribe handling, the footer block's unsubscribe link goes out as `{{{pm:unsubscribe}}}`, so Postmark does not add a second link (2.50.2 or later). See [Unsubscribe Settings](https://sendbroadcast.net/docs/unsubscribe-settings#postmark-unsubscribe-handling).
- Open and click tracking work the same as for any other email. Links to `mailto:` and `tel:` addresses are left untouched, and the unsubscribe and preference page links are never tracked.
- Through the API, send `content_type: "blocks"` with a `blocks_json` document to create block broadcasts, templates and transactional emails. The response includes both fields alongside the rendered `body`. See [Broadcasts API](https://sendbroadcast.net/docs/api-broadcasts).
- `GET /api/v1/channel/design` returns the channel's resolved brand kit (colours, font stack, width, logo URL, website and social links) for a token with templates read permission, so an SDK or the free builder can design on-brand. See [Templates API](https://sendbroadcast.net/docs/api-templates).