Drag & Drop Email Builder

The drag-and-drop builder lets you create beautiful, professional email templates without writing a single line of code. Design responsive layouts with a visual canvas, drag in content blocks, customize every detail, and preview on desktop and mobile — all from within Booked55.

Creating a visual template

1. 1

   Click "Create Template"

   From the Templates page, click the Create Template button. A dialog opens with three options.

2. 2

   Choose "Drag & Drop Builder"

   Select the Drag & Drop Builder card. You will be asked to enter a template name and subject line before the builder opens.

3. 3

   Enter name and subject

   Provide a descriptive template name and a subject line. You can use variables like {{contact.first_name}} in the subject. Click "Open Builder" to continue.

4. 4

   Design your email

   The full-screen visual builder opens. Drag content blocks from the left panel — text, images, buttons, dividers, social icons, and more. Customize colors, fonts, spacing, and layout for every element.

5. 5

   Add personalization with merge tags

   Inside any text block, click "Merge Tags" in the text toolbar to insert variables like {{contact.first_name}} or {{company.name}}. These are replaced with real data when the email is sent.

6. 6

   Save your template

   Click the "Save" button in the top bar. After the first save, the builder auto-saves every 10 seconds so you never lose your work.

Builder layout

The builder is a full-screen editor with three main areas:

• Left panel — Content blocks (text, image, button, divider, HTML, social, video, menu, timer) and design settings. Drag blocks onto the canvas.
• Center canvas — The live preview of your email. Click any block to select it and edit its content or style.
• Top bar — Template name, subject line, variable picker, preview toggles (desktop/mobile), save status, and the Save button.

Available content blocks

Using merge tags (variables)

The builder supports merge tags natively. When editing a text block, click the Merge Tags option in the text formatting toolbar to pick from available variables:

• {{contact.first_name}}, {{contact.last_name}}, {{contact.name}}
• {{contact.email}}, {{contact.phone}}
• {{company.name}}, {{company.email}}, {{company.phone}}, {{company.website}}

For the subject line, click the variable icon in the top bar to copy a variable to your clipboard, then paste it into the subject field.

Desktop and mobile preview

Use the desktop and mobile preview buttons in the top bar to see how your email will look on different screen sizes. The builder generates responsive HTML so your design adapts automatically.

Auto-save

After your first manual save, the builder automatically saves your work every 10 seconds. The save status indicator in the top bar shows Saving..., Saved, or Save failed so you always know the current state.

Editing a visual template

From the templates list, click the edit button on any template with the Visual badge. The drag-and-drop builder opens with your existing design fully loaded, ready to edit. Changes are auto-saved.

Using visual templates in campaigns

When creating a campaign, select a visual template from the Load from Template dropdown. Templates built with the drag-and-drop builder are marked with a Visual badge. When loaded, the campaign modal shows a read-only preview of the email — the full design is sent as-is, so no additional editing is needed.

Drag & Drop Builder vs. Basic Text Editor

Next steps

• Creating Templates — All three ways to create templates.
• Variables Reference — Full list of available merge tags.
• Writing Campaign Emails — Use templates in campaigns.