> ## Documentation Index
> Fetch the complete documentation index at: https://docs.brudcast.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Design an email with the builder
> Build an email body from AI, a starter design, your own HTML or a blank canvas, then edit blocks, add merge tags and check it on mobile.
export const DemoVideo = ({id, title, embedUrl, src, poster, duration}) => {
if (embedUrl) {
return ;
}
if (src) {
return ;
}
const label = duration ? `Video walkthrough coming soon · ${duration}` : "Video walkthrough coming soon";
return } />;
};
export const Loop = ({id, src, alt, caption}) => {
if (!src) {
return } />;
}
return
{caption && {caption}}
;
};
export const Screenshot = ({id, src, srcDark, alt, caption}) => {
if (!src) {
return } />;
}
return
{caption && {caption}}
;
};
Lay out an email body with blocks, personalize it, and check it on desktop and mobile before you
use it in a campaign or save it in a template.
**Before you start:** open a campaign or template with the **Email** channel selected, and leave
the Email block's **Editor** on **Visual builder**. Designs are tinted with the **Brand colour**
set in [Organization settings](/organization/organization-settings), and the footer prints your
business address, so fill both in first.
In the Email block, select **Open builder**. Once a body exists, the button reads **Edit body**.
**Let's build your email** offers three tabs:
* **Design with AI:** describe the email under **What's this email about?** and select
**Generate designs**. You get several directions written from the same copy; pick one to open
it. **Match a design** lets you attach a picture of an email, poster or landing page for the
design to follow. See [Draft with AI](/campaigns/create-a-campaign#draft-with-ai).
* **Templates:** starter designs in your brand color. Pick the closest one and edit from there.
* **Build it yourself:** **Start from scratch** for an empty canvas, or **Import HTML** to paste
or upload an email you already have. See [Import your own HTML](#import-your-own-html).
Drag a block from the palette onto the canvas, or click it to add it. The blocks are **Text**
(a heading, subheading or paragraph), **Image**, **List**, **Button** and **Section**. A
section can be split into up to four columns, and blocks go inside each column.
Click a block to select it, then type straight onto the canvas. The inspector on the right holds
everything else for that block, such as alignment, colors, spacing, font weight and borders.
For an image, select **Select image** to open the
[media library](#images-and-the-media-library), and fill in **Alt text**.
Hover over a block for **Move up**, **Move down**, **Duplicate** and **Hide**. A hidden block
stays in the design but isn't sent, and **Show** brings it back. Shift-, ⌘- or Ctrl-click
selects several blocks at once, to redesign or delete them together.
Use **Insert variable** to add a merge tag such as `{{first_name}}`, in text, button labels,
links, list items and alt text. Tags are highlighted as you type. See
[Placeholders and merge tags](/templates/placeholders-and-merge-tags).
Every design ends with a **Footer** block. It stays at the bottom and can't be removed. You
choose how it looks; Brudcast writes what it says. See
[The compliance footer](#the-compliance-footer).
Switch between **Desktop preview** and **Mobile preview** in the toolbar, and select **Preview**
to see the email as a mail app shows it. **Undo** (⌘Z) and **Redo** (⌘⇧Z) cover every change on
the canvas, including ones AI makes.
Select **Use design** to close the builder and put the design in the Email block. A campaign
saves it automatically. In a template, select **Save template** or **Save changes** to keep it.
## The compliance footer
Every campaign email ends with a footer that says who sent it, why the recipient is getting it, and
how to stop. You decide how it looks; Brudcast decides what it says.
| Line | Content | Shown when |
| -------------------- | -------------------------------------------------------------------------------------------- | ---------------------------------- |
| Your footer text | Whatever you enter in the campaign's **Footer text**, under **Delivery** | You've entered some |
| The reason | "You're receiving this email because you subscribed to" followed by your organization's name | The unsubscribe link is included |
| The unsubscribe link | "Unsubscribe from these emails", minted for each recipient | **Include unsubscribe link** is on |
| Your identity | Your organization's name and postal address | Always |
Anti-spam laws such as CAN-SPAM and CASL require every commercial email to carry the sender's
physical address and a way to opt out, and mailbox providers expect the same. A missing opt-out also
pushes people to the spam button, which hurts your reputation more than an unsubscribe does. That's
why the footer is part of every design rather than something you remember to add, and why its
wording can't be edited into something that isn't true.
The identity line needs a postal address, so a campaign email can't send until your organization has
one. Fill in the street address, city and country under **Business address** in
[Organization settings](/organization/organization-settings). If a required part is missing, the
builder's footer shows a warning naming it and the send checklist blocks the campaign.
Unsubscribing is organization-wide: the recipient stops getting campaign email from your whole
organization, not just this campaign. If your content already includes an unsubscribe link, using
`{{unsubscribe_url}}` or a link marked `rel="unsubscribe"`, Brudcast leaves out its own reason line
and link so the email doesn't carry two. Your identity line is still added. The plain-text version
carries the same footer, with the link written out in full.
## Images and the media library
Every image you upload for an email or a form is kept in your organization's media library, so you
can reuse it without uploading it again. It opens from wherever you add an image, such as an image
block's **Select image** button, and has no page of its own.
On the **Select file** tab, drop an image or pick one from your computer, or paste an address under
**Upload from URL** and select **Use link**. Brudcast downloads a copy, so your email doesn't depend
on the other site keeping it. Select **Import** to insert it. The **Files & folders** tab holds
everything you've uploaded, searchable by file name. Uploading the same file twice doesn't store it
twice.
| Rule | Detail |
| ---------- | ---------------------------------------------------------------------- |
| File types | PNG, JPEG, GIF and WEBP. SVG isn't supported |
| Size | Up to 5 MB per image |
| From a URL | A public `http` or `https` address that returns an image |
| Storage | Your plan's image storage allowance, shown at the bottom of the dialog |
An image over 400 KB shows a note that large images slow inboxes down and can trip spam filters.
Smaller is better in email.
Deleting an image is permanent. Campaigns and templates that already use it will show it as
broken, including emails that were already sent.
## Import your own HTML
On the **Build it yourself** tab, select **Import HTML**, then paste the markup or upload the file
and edit it against the live preview. Select **Use design** when you're done. Merge tags work in
imported HTML exactly as they do anywhere else. For simple formatted text without designing
anything, set the Email block's **Editor** to **Rich text** instead.
Your HTML goes out with these changes, made for each recipient:
1. **Merge tags** are replaced with the recipient's values.
2. **Preview text** is added straight after the opening `body` tag, hidden, so mail apps show it
next to the subject line.
3. **UTM tags**, when **UTM tracking** is on, are added to every `http` and `https` link. A link
that already has a UTM parameter keeps its own value.
4. **The compliance footer** is filled into your footer slot if you've included one, or added at the
end of the email if you haven't.
5. **Open and click tracking**, when they're on, add a tracking pixel and route links through your
tracking host. `mailto:` and `tel:` links, `#` anchors and unsubscribe links are left alone.
Without a slot, the footer lands after your content, which in most designs means outside your
content card. To keep it inside your design, mark where it goes:
```html theme={"system"}
```
Brudcast only writes the text; your styles stay as they are. A part with nothing to say is removed,
and if every part is empty the whole slot goes.
Every campaign email is sent with a plain-text version alongside the HTML. Brudcast writes it from
your design in the visual builder, and from your content with the markup removed for rich text and
imported HTML.
## Save your design as a template
When the design is finished, you can keep it for reuse. Go to **Templates**, select **New
template**, enter a **Template name**, pick the **Channels**, and fill in each channel's block. The
**Before you save** checklist lists anything missing; when it reads **Ready**, select **Save
template**.
See [Templates](/templates/overview) for what each channel stores, the field limits, and how reusing,
previewing, duplicating and deleting a template work.
## Troubleshooting
**Why:** the footer prints your business address, and part of it is missing. Campaigns can't
send until it's complete.
**Fix:** follow the link in the notice, or fill in **Business address** in
[Organization settings](/organization/organization-settings).
**Why:** the picture you attached with **Match a design** doesn't contain a layout to follow,
for example a photo or a logo.
**Fix:** attach a screenshot of an email, poster or landing page instead.
**Why:** there wasn't enough in the description to design from.
**Fix:** say what the email is for, who it's for, and what it should ask the reader to do.
**Why:** an image was pasted into the email as data rather than uploaded, and most mail apps
won't show it.
**Fix:** select the image block, choose **Select image**, and add the image again through the
media library.
## Related
Personalize with contact fields and fill-once values.
Generate, redesign, rewrite and translate.
Put the design into a campaign and send it.