Email Template Builder

Overview of the drag‑and‑drop editor used to design and customize the email templates sent by IdentitySuite.

IdentitySuite includes a built‑in email template builder that allows administrators to design the emails used for user verification, password reset, and email change confirmation. The editor provides a visual, drag‑and‑drop experience similar to modern email design tools, enabling the creation of professional and responsive layouts without writing HTML manually.

Editor Preview

The editor interface includes a central canvas where the email layout is assembled, a component toolbar for inserting elements, and a properties panel for adjusting styles and content. The screenshot below illustrates the main layout of the builder.

email template builder

What You Can Build

The builder supports creating and customizing the following system email templates:

  • Email Confirmation: Sent when a user registers or updates their email address.
  • Password Reset: Sent when a user requests to reset their password.
  • Email Change Confirmation: Sent to verify ownership of a new email address.

Each template can be fully customized using blocks, layout elements, images, buttons, text sections, dividers, and other components provided by the editor.

How the Builder Works

Before designing an email, the user must select three key elements that determine which template will be loaded and edited. These selections define the context of the email and ensure that the correct version is displayed in the editor.

  • Application: The application for which the email template is being customized. Only applications previously created in IdentitySuite are available.
  • Template: The type of system email to edit. Supported templates include: Confirm Email, Reset Password, and Confirm Email Changed.
  • Language: The language version of the template. Only languages that have been enabled in the system are available for selection.

Once these three values are selected, the builder automatically loads the corresponding email template. If the template has never been customized before, the default version is loaded. The user can then modify the layout, text, images, and components using the drag‑and‑drop editor.

email template builder

Every element inside the template is fully interactive. To modify a component, the user simply selects it directly in the canvas. When an element is selected, the right‑side ribbon automatically displays the dedicated editor for that specific component, exposing all relevant properties such as text, colors, padding, links, and dynamic placeholders. This contextual editing experience allows precise control over each part of the email without navigating away from the main design surface.

The editor provides a visual representation of the email, including placeholders for dynamic values such as {*ApplicationName*}, {*FirstName*}, and {*LastName*}. These placeholders are automatically replaced by IdentitySuite when the email is sent to the user.

Toolbar

The toolbar contains all the elements that can be dragged into the canvas to build or modify the email layout. It is the starting point for adding content, sections, images, buttons, rows, and columns to the template.

Available Elements

The toolbar is organized into categories, each providing different types of building blocks:

  • Layout elements: rows, columns, spacers, dividers.
  • Content elements: text blocks, images, buttons.
  • Structural elements: containers or wrappers (when available).
  • Special elements: links, dynamic placeholders, and other advanced components.

Each element can be dragged from the toolbar into the canvas to create new sections or enrich existing ones.

Drag and Drop into the Canvas

To add a new element to the template, the user selects it from the toolbar and drags it into the canvas. The canvas displays visual hints to indicate where the element will be inserted.

  • Drag: click and hold an element in the toolbar.
  • Move: drag it over the canvas until the desired position is highlighted.
  • Drop: release the mouse button to insert the element into the layout.

Visual Indicators in the Canvas

When the mouse hovers over existing content in the template, the editor displays colored indicators that represent the structure of the layout and allow direct manipulation of rows, cells, and elements.

  • Red — Row: highlights the entire row. From here, the user can move or remove the whole section.
  • Blue — Cell: highlights a single cell inside a row, useful for managing multi‑column layouts.
  • Purple — Element: highlights the individual content block (text, image, button, etc.).

These indicators also expose action icons that allow the user to move, duplicate (when available), or delete the selected item directly from the canvas.

Contextual Editing Panel

When an element is selected in the canvas, the right‑side panel automatically shows the dedicated editor for that specific component. The available properties depend on the type of element.

Typical options include text content, colors, padding, links, images, dynamic placeholders, borders, alignment, and size. This contextual editing model allows precise control over each part of the email without leaving the main design surface.

Preview Feature (Free Plan)

This feature is offered as a 30‑day preview for Free plan users. You can explore its capabilities during this period and evaluate how it fits your workflow. To continue using the full version after the preview, upgrade your subscription.