Skip to main content

​
Build an email template visually

The Email hub carries a visual Builder: a drag-and-drop editor that renders blocks into table-based, inline-styled HTML — the format that survives Gmail, Outlook, and Apple Mail. You design the template on screen; the platform handles compatibility markup. No HTML or MJML knowledge needed. This guide covers the dashboard editor. If you prefer managing templates over the API or pasting raw HTML, the email lifecycle guide covers that path — this page covers the visual one. You will:
  1. Open the Builder tab
  2. Add and arrange blocks
  3. Personalize with variables
  4. Preview and send a test
  5. Import or export MJML and HTML
  6. Attach the template to a campaign

​
1. Open the Builder tab

  1. Open the Email hub under Messages → Email.
  2. Select the Builder tab. The screen is a three-panel editor: block palette on the left, canvas in the middle, and the selected block’s properties on the right.
The palette holds eight block types: header, text, image, button, divider, spacer, columns, and footer. The canvas renders them in near-final form, and the toolbar carries the saved-templates picker, import, save, preview, and test-send controls.
Type the template name first. Save, preview, and test-send stay disabled until the canvas has a name and at least one block, and the editor says which of the two is still missing.

​
2. Add and arrange blocks

  1. Click or drag a block from the palette into the canvas. New blocks land with sensible defaults (a header with your company name, a button with a “Click here” label) that you replace with your own content.
  2. Select a block on the canvas to open its properties panel, where you edit copy, image URLs, button links, and style fields such as background color and font size.
  3. Reorder blocks by dragging them in the canvas, or with the move up/down controls; the properties panel also offers delete.
  4. Start from an existing template instead of a blank canvas with Load Template, which opens your saved list (up to 50 entries, each shown with its block count and last edit time).
A live spam-score badge sits in the toolbar — from “Looks clean” to “Likely to be flagged” — and updates as you edit. Use it as a pre-send content heuristic; it checks things like image-to-text balance and wording patterns. DNS authentication (SPF, DKIM, DMARC) still carries more weight in real filters, as covered in the lifecycle guide.

​
3. Personalize with variables

Type merge tags into text, header, or footer blocks; they render through to send time and are substituted per recipient. When a campaign sends the template, the tags resolve from the contact’s record. The standard contact fields are: Campaigns can layer their own custom variables on top of these five. Two rules to respect:
  • Resolve every tag before send — an unresolved merge tag reaches the recipient as the literal {{...}} string.
  • Unsubscribe needs one tag — the footer block’s unsubscribe link expects exactly {{unsubscribe_url}}, which the personalization layer substitutes at send time. Keep the footer block (or its unsubscribe text) on every marketing template.
The substitution and URL-normalization rules that apply at render and send time are documented under Personalization with merge tags.

​
4. Preview and send a test

  1. Click Preview to render the blocks into the finished HTML document and inspect it in the canvas. Rename the template before previewing if you want a meaningful subject line in the rendered output.
  2. Type a recipient address into the test-recipient field and click Send Test. The button activates once the canvas has blocks and the address is valid; the editor prompts for whichever is missing.
  3. Check the proof inbox — click the links, load it on mobile, and confirm the personalization reads correctly against your own data.
A test send renders the current canvas content exactly as a real send would, so it is the safest place to catch an unresolved merge tag or a misplaced footer.

​
5. Import and export MJML or HTML

The Builder also speaks MJML, the responsive-email markup format:
  • Import MJML opens a paste dialog. The source is transpiled into cross-client HTML and dropped into the same preview pane the Preview button uses. Non-fatal issues (unsupported components or structural gaps) list in the dialog while the best-effort render stays available, so you can fix the source and re-render.
  • To export, click Preview and copy the fully rendered cross-client HTML from the preview pane, or call POST /api/v1/messages/email-builder/render from tooling to get the document programmatically.
The raw-MJML/raw-HTML path over the API (no dashboard editor) is documented in the email lifecycle guide — use the visual Builder when you want on-screen design, and the API path when your team manages templates as code.

​
6. Attach the template to a campaign

  1. Click Save Template. Saved templates persist in your workspace and appear in the Load Template picker for anyone in the workspace to reuse.
  2. When you build the campaign, copy the template’s rendered HTML into the campaign content step — open Preview in the Builder and copy the finished document from the preview pane.
  3. To drive template selection programmatically instead, a campaign can call POST /api/v1/messages/email-builder/list at send time, render the chosen blocks through POST /api/v1/messages/email-builder/render, and submit the resulting HTML as its message content.
Either way, the campaign’s dry-run preview resolves the merge tags before launch, so run it — the campaign end-to-end guide walks the audience, dry-run, and launch loop.

​
Next steps