Email Builder

Email Format

Every email you build here is produced as HTML:

Table-based HTML - Traditional HTML with table-based structure for maximum control over email rendering.

Uses traditional HTML table layouts for email compatibility
Requires manual responsive design considerations
More flexible for custom styling and layouts

Editor Features

Visual Building Blocks

The editor provides drag-and-drop building blocks:

Structure components: Sections, columns, and containers
Content elements: Text, images, buttons, and links
Styling options: Colors, fonts, spacing, and responsive behavior

Saving Your Work

Changes are not saved automatically. Use the editor's save button, or move on to the next step, to save your work.

If you leave the page with unsaved changes, the editor asks whether to save them or discard them.

Test Email Functionality

Send test emails directly from the editor to verify your email design and content.

Click the "Send test mail" button to open a modal where you can:

Select recipient email addresses (add multiple test recipients)
Choose a verified sender email from your organization
Send the current email template with your custom subject, preheader, and sender name

This allows you to preview how your email will appear in real email clients and ensure all dynamic content and styling renders correctly before sending to your full audience.

Border Visibility Toggle

Use the "View components" command to visualize component boundaries and spacing during design.

The actions above the canvas are grouped by what they do:

Content — Load content (bring in a template or a previous email) and Save as template.
Code — Import code and Edit code.
Send test mail — the paper-plane icon button.
Keep the template — the switch that decides what the AI may touch (see below). It appears only when the email has a Content area.
Generate with AI — opens the AI dialog.

On a narrow screen the first three collapse into a single menu.

Code Management

Import Code

Import existing HTML code directly into the editor:

Open Code → Import code to load external templates
Accepts HTML
Automatically parses and converts code into editable components

Edit Code

Access the raw code view for advanced editing:

Open Code → Edit code to launch the Monaco editor (the same editor that powers VS Code)
HTML syntax highlighting, auto-indent, bracket matching, and word wrap
Automatic code formatting when the editor opens
"Apply" pushes your changes back to the visual editor, "Cancel" discards them

The Generate with AI button in the toolbar opens the AI dialog for the email you are working on. It is built around templates: a template is a full email with one Content area, and everything outside the Content area is kept exactly as designed.

What the AI is allowed to touch is set by the Keep the template switch next to the button, not inside the dialog:

Switch on (the default) — the AI writes only inside the Content area. The header, footer, colors and layout stay exactly as they are.
Switch off — the AI may redesign the whole email, header and footer included.

In the template editor the same switch reads Keep the frame. Ask for a header or footer change while it is on and the AI does the rest of your request, then tells you what it skipped.

Inside the dialog you describe the email. When the editor already has content you first choose Change this email (refer to what is already there: "shorten the intro", "make the button green") or Write a new email (the content is replaced). A change rewrites the whole of what the AI is allowed to touch — the Content area, or the entire email with the switch off — rather than patching single lines, so wording you did not mention can come back slightly reworded. You can also reuse the text of up to three previous emails, allow {{variable}} placeholders, and add 1–3 AI images with optional style instructions.

The result goes straight into the editor; Undo in the toast restores the previous content, and opening the AI again with Change this email refines it.

The AI never writes the subject line or the preview text — set those on the campaign's Details step or the automation's email step.

Generating a single image

Double-click any image on the canvas and the image library opens with Generate an image with AI at the top: describe the picture, pick Wide, Landscape or Square, and click Generate. It is added to your images like an upload and dropped onto the picture you were editing. Generated images are billed per image from your AI credits.

Generate with AI

The full guide: every option in the dialog and the template's frame.

The template's frame

Frame from the template — an email started from a template keeps that template's header and footer around the Content area; the toolbar shows the template's name. Everything is editable, frame included — changes stay in this email only, the saved template never changes.
The AI follows the same rule — with Keep the template on, everything outside the Content area stays exactly as it is, and a brief that asks for a header or footer change comes back as something the AI could not do. Switch it off and the AI may edit the header and footer too.
Content area — the dashed zone on the canvas. Drop blocks into it; it can be moved but not deleted.
Styled blocks — the top of the blocks panel: headings, paragraphs, buttons, cards and more, already in the email's colors and fonts; the editor's own blocks follow under Basic blocks.
Content → Load content — brings in a template or a previous email. It always replaces everything currently in the editor — content, header and footer alike — and asks you to confirm first, because unsaved work is lost.
Content → Save as template — the whole email becomes a new template, its content kept as starter content inside the Content area.

Dynamic Content & Variables

Basic Fields

Pre-defined variables for common contact information:

{{email}}
{{name}}
{{created_at}}
{{state}}

Custom Fields

Organization-specific variables from your contact database:

{{customFieldName}}

Reserved Variables

System-generated URLs for email management:

{{subscribeURL}}
{{unsubscribeURL}}

Reserved variables are generated for each email. If you don't include {{unsubscribeURL}} in a regular email — or {{subscribeURL}} in a verification email — it is added to the footer automatically.

Fallback Values

If a contact has no value stored for a variable, the raw tag is left visible in the sent email. Add a fallback after a pipe inside the tag to control what gets sent instead:

{{name|there}} — sends "there" whenever the contact's name is missing or empty
{{name|}} — an empty fallback leaves the spot blank
{{name}} — no fallback: the tag stays visible, so mistakes are easy to catch in test sends

Drag and drop building blocks from the sidebar
Customize content, styling, and layout
Use the AI generator for initial content creation
Fine-tune with direct code editing if needed

Dynamic Data Integration

Insert variables using the {{variableName}} pattern:

Click on text elements to edit content
Type or paste variable placeholders
Variables will be replaced with actual data when emails are sent

Button Actions

Set button links to reserved variables for user management:

Use {{subscribeURL}} for subscription confirmation
Use {{unsubscribeURL}} for easy opt-out
Links automatically handle user preferences

Footer Fallback

If you don't include {{unsubscribeURL}} in a regular email, or {{subscribeURL}} in a verification email, it's added to the footer automatically for compliance.