Set up a custom email template

Prev Next

We provide default templates, however, each template can be customized as you see fit.

  1. Clone an existing template

  2. Create a new template from scratch


Create a new template

  1. Open the template group by clicking on the name.

  2. Click on the name of the template you would like to customize.

  3. Enter a name for internal use and the subject that is used for the email.

  4. Click on the pen symbol to edit the newly created template.

Different Tabs and their Use

The interface is composed by four tabs:

  1. Editor: A drag and drop interface which allows you to add components to your template.

  2. Text: A text editor which is displayed/sent to the customer if HTML is not supported by the email client.

  3. JSON: An interface that gives you the possibility to upload your JSON file and download the JSON file of the template.

  4. HTML: You can see and copy the HTML output of your template.

Editor Tab: Building Your Template

Available Components

Drag any component into your template to add it.

UX

Component

Use for

Key features

Columns

Layout structure

1-4 columns distributions, responsive design

Heading

Section titles

AI-powered Smart Heading

Text

Body content

AI-powered Smart Text

Image

Visuals

AI generation, stock photos, effects

Button

Call-to-action

AI-powered smart buttons

Divider

Visual separation

Customizable line styles

Menu

Navigation links, for example: link to customer support email address, homepage, linkedin, etc.

Multiple items with separators

HTML

Custom code

Direct HTML insertion

Most components share these settings:

  1. Display Conditions: Show or hide components based on data availability.

    For detailed instructions, click here.

  2. Links: Decide on the color of the link and if the link should be underlined or not.

  3. General (Padding): Define the padding around the container.

  4. Responsive Design: Control visibility on desktop vs. mobile devices using the Desktop/Mobile toggle at the top.

Body Settings

Set global styling for your entire template:

General

  • Text color and background color

  • Template width (in pixels)

  • Content alignment (left or centered)

  • Font family and weight

Email Settings

  • Add a preheader text

Links

  • Default link color and underline settings

Adding Dynamic Content

Make your emails personal and relevant by inserting dynamic data from your system. We provide three features.

  1. Merge Tags

What are merge tags?

Merge tags insert customer-specific information into your emails automatically.

When to use them:

  • Personalize greetings (e.g., "Hello {{customer.name}}")

  • Display customer-specific data (email, company, subscription details)

  • Show invoice or order information

How to add a merge tag:

  1. Position your cursor where you want the data.

  2. Click on Merge Tags.

  3. Choose Add a regular merge tag.

  4. Select the data section (e.g. Customer).

  5. Select the field (e.g. Name).

  6. Review the preview and click Insert.

  7. Click on Confirm.

  1. Merge Tag Rules

What are merge tag rules?

Rules let you display repeating information, like showing each line item in an invoice. Merge tag rules are defined for each block.

When to use them:

  • List all order lines in an invoice

  • Display multiple subscription products

  • Show repeating data sets

How to add a merge tag rule:

  1. Click on Merge Tags.

  2. Select the data section (e.g. Invoice).

  3. Select the repeating item (e.g. Orderlines).

  4. Click the rule preview box, and Insert.

  5. Position your cursor between the opening and closing tags.

  6. Add merge tags within the rule (choose Add a merge tag based on a merge tag rule).

  7. Select the fields you want to display for each item.

  8. Click on Confirm.

Example:

{{#invoice.orderlines}}
- {{ordertext}}: {{amount}}
{{/invoice.orderlines}}

This displays each order line with its description and amount.

  1. Display Conditions

What are display conditions?

Conditions show or hide content based on whether specific data exists or meets certain criteria.

When to use them:

  • Hide date ranges when they're not applicable

  • Show content only for specific customer types

  • Display information conditionally based on data availability

How to add a display condition:

  1. Select the text you want to show conditionally.

  2. Click on Display conditions.

  3. Select the data section and field.

  4. Choose the condition type:

    • Exists - shows content if the field has data

    • Contains - shows content if it matches specific text

    • Equals - shows content if it equals another value

  5. Toggle Negate condition if needed (to hide instead of show).

  6. Click on Confirm.

Practical Example: Invoice Email

Let's combine all three features:

Subject: Invoice {{invoice.id}} for {{customer.name}}

Hello {{customer.name}},

Your invoice is ready:

{{#invoice.orderlines}}
- {{ordertext}}
{{#period_from.date_medium}}Period: {{period_from.date_medium}} - {{period_to.date_medium}}{{/period_from.date_medium}}
  Amount: {{amount}}
{{/invoice.orderlines}}

Total: {{invoice.amount}}

This example uses:

  • Merge tags: {{customer.name}}, {{invoice.id}}

  • Merge tag rule: {{#invoice.orderlines}}...{{/invoice.orderlines}}

  • Display condition: {{#period_from.date_medium}}...{{/period_from.date_medium}} (only shows period dates when they exist)