Drag-and-Drop 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 → Design. 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.

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 → Design, under Where to use this brand kit, tick each area you want:

• Unsubscribe and resubscribe pages show your logo (linked to your website) and your social profile icons, and use the accent colour for the safe actions. The red “Yes, unsubscribe” button stays red.
• Subscription confirmation page does the same on the page a subscriber lands on after confirming their email.
• 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 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

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:

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 and html_body_add_footer is ignored for them in the API. The same rule follows a block template wherever it is used: sequence steps, confirmation emails and transactional emails made from it.
• Open and click tracking work the same as for any other email. Links to mailto: and tel: addresses are left untouched.
• 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.
• 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.