All Categories
User Manual
Email Templates

Email Templates

Customize your own email templates

Email Templates give you full control over your email branding so that every message sent from the platform aligns with your brand identity. This page covers everything from configuring a template in the dashboard to the HTML coding standards, cross-client testing, and the legally required footer. It targets three roles: Admins who operate templates in the dashboard, Developers who write the HTML, and Legal/Compliance who own the footer.

1. Overview & Setup

For: Admins

Before you can edit anything, the feature must be enabled for your account in the Settings area. Once active, the Email Templates screen (under Emails in the sidebar) lists every customizable email, grouped into four categories: Authentication, Newsletter, SDK Registration, and Service emails.

Notion image
☝ Default templates are pre-installed. New customers start with default templates already integrated. They work out of the box, but the footer still needs your company-specific details before going live (see Section 6).

A few things to know up front - The sender email address is configured centrally and cannot be changed here - only the subject line and body. - The platform does not host images or assets. You are responsible for serving all images (logos, icons, banners) via a publicly accessible URL - a dedicated server, a CDN, or your newsletter tool’s asset hosting. Always use absolute URLs (see Section 4). - A template that is not enabled falls back to the default template - so an unconfigured email still sends, just unbranded.

Languages (DE / EN)

The flags you see on each template (🇩🇪 / 🇬🇧) come from your configured Available Languages - they are not set up automatic. Each language is a separate template that must be enabled and configured on its own. If you only set up German, the English variant stays on the default fallback. Add or remove languages under Languages → Available Languages.

2. Configure a Template

For: Admins

  1. On the Email Templates screen, click the template you want to configure (e.g. Magic link).
  1. Use the Split / Edit / Preview toggle to switch between editor, live preview, or both.
Notion image
  1. Subject line: Enter the subject (e.g. {{ code }} – Your link & code to log in).
  1. Body: Input your custom HTML. Click Variables to see the authoritative placeholder list for this template (see Section 3), and Format to tidy the markup. The body must be valid HTML.
  1. Save the template.
  1. Preview & test: Use Preview to render it, and Send test email to receive it in a real inbox. A banner reminds you when a template is still disabled (the default fallback is used until you enable your customized template).
☝ Recommended build path: For maximum client compatibility, build with an email framework like MJML - it generates the table/VML structure from Section 4 automatically. If you hand-code, follow the standards in Section 4 directly.
Notion image
  1. Enable: Click Enable template once QA has passed (Section 5). You can also Delete a template to revert to the default.

Release flow: New templates are first validated on Staging and only promoted to Production once QA has passed.

3. Placeholders & Email Types

For: Admins

Placeholders are automatically replaced with dynamic values when the email is sent. The Variables button in the editor always shows the authoritative list for the selected template - use it as the source of truth.

☝ Verify the exact spelling. A misspelled placeholder is not replaced and ships literally. Reconcile against the Variables list before enabling.

Common placeholders

Placeholder
Purpose
Used in
{{ first_name }}
Recipient’s first name
Most templates
{{ link }}
The magic sign-in link
Magic link
{{ code }}
The verification code
Magic link
{{ accept_invitation_url }}
Invitation acceptance link
Invitation instructions
{{ confirmation_url }}
Email confirmation link
Confirmation instructions
{{ reset_password_url }}
Password reset link
Reset password instructions
{{ email }}
Recipient’s email address
e.g. Reset password instructions

Customizable email types

Category
Template
Description
Key placeholders
Authentication
Magic link
One-time link & code for passwordless login
{{ link }}, {{ code }}, {{ first_name }}
Authentication
Confirmation instructions
Confirms the account at signup
{{ confirmation_url }}, {{ first_name }}
Authentication
Confirm new email address
Confirms a changed email address
{{ email }} , {{ unconfirmed_email }}
Authentication
Email changed
Notifies that the email has been changed
{{ email }} , {{ unconfirmed_email }}
Authentication
Invitation instructions
Invites new users to the platform
{{ accept_invitation_url }}, {{ first_name }}
Authentication
Reset password instructions
Password reset link
{{ reset_password_url }}, {{ first_name }}
Newsletter
Newsletter subscription confirmation
Double opt-in confirmation
{{ confirm_path }}
Newsletter
Newsletter login
Login link to the newsletter profile
{{ newsletter_path }}
SDK Registration
Email verification
Verification code for registration
{{ email }}, {{ code }}
SDK Registration
Resume registration
Resume an incomplete registration
{{ email }}, {{ resume_link }}
Service
(admin) Unsubscribe
Unsubscribe notification
{{ user_email }}

4. HTML Standards & Best Practices

For: Developers

Coding standard for consistent, cross-client–compatible templates. Background: clients render very differently - classic desktop Outlook uses the Word engine (no modern CSS), while Apple Mail (WebKit) and Gmail support far more.

4.1 Layout

  • Always structure with <table>, never <div> - Outlook does not support flexbox/grid.
  • Use fixed attributes on tables: <table width="600" align="center" cellpadding="0" cellspacing="0" border="0" role="presentation">.
  • For multiple columns, nest tables; do not use CSS positioning.
  • Add role="presentation" to all layout tables so screen readers don’t announce them as data tables.

4.2 Styling

  • CSS inline by default (<td style="font-size:16px; line-height:24px;">).
  • Exception: media queries (responsive) and dark mode require a <style> block in the <head> - this cannot be done inline. So: inline by default, <style> allowed for media queries + dark mode.
  • No CSS shorthand: instead of margin:10px 0; → margin-top:10px; margin-bottom:10px;.
  • Avoid float, flexbox, position - ignored by Outlook.

4.3 Images

  • Every image with explicit width, height, and alt: <img src="https://cdn.example.com/logo.png" width="200" height="100" alt="Description" />
  • Absolute URLs, never relative paths.
  • alt text is mandatory - many clients block images by default.
  • No background images without a VML fallback for Outlook.

4.4 Buttons (CTAs)

Build buttons as table-based bulletproof buttons with a VML fallback for Outlook - not as an <a> with display:block/padding/background (that loses background and padding in classic Outlook).

<table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center">
  <tr>
    <td align="center">
      <!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
        href="{{ link }}"
        style="height:48px;v-text-anchor:middle;width:260px;" arcsize="12%" stroke="f" fillcolor="#0054ff">
        <w:anchorlock/>
        <center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">
          Sign in
        </center>
      </v:roundrect>
      <![endif]-->
      <!--[if !mso]><!-->
      <a href="{{ link }}"
         style="display:inline-block;background:#0054ff;color:#ffffff;font-family:Arial,Helvetica,sans-serif;
                font-size:16px;font-weight:bold;text-decoration:none;
                padding-top:14px;padding-bottom:14px;padding-left:28px;padding-right:28px;border-radius:8px;">
        Sign in
      </a>
      <!--<![endif]-->
    </td>
  </tr>
</table>

4.5 Fonts & Text

  • Use only web-safe fonts with a fallback, e.g. font-family: Arial, Helvetica, sans-serif;.
  • Set line-height inline.
  • ⚠️ No externally loaded web fonts (e.g. Google Fonts via <link>). This transmits recipients’ IP addresses to third-party servers and is a GDPR risk. Use system/fallback fonts - web fonts load unreliably in email anyway.

4.6 Spacing

  • Use padding inside <td> (<td style="padding:20px 0;">), not margin (unreliable in Outlook).
  • For vertical spacing, use a spacer row: <tr><td height="20">&nbsp;</td></tr>.

4.7 Dark Mode

  • In the <head>:
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
  • Define dark-mode colors via @media (prefers-color-scheme: dark) { … } in the <style> block.
  • Note: some clients (especially iOS, Gmail) invert colors automatically - dark mode is one of the most common breakage points. Always test it explicitly (Section 5).

4.8 Responsive Design

  • Percentage widths + max-width: <table width="100%" style="max-width:600px;">.
  • max-width media queries work in Gmail and Apple Mail, not in classic Outlook → always provide a desktop fallback (fixed 600 px).

4.9 Required checks before commit

5. Testing & QA

For: Developers

We highly recommend testing your template before saving it to ensure it looks perfect across different email clients and devices.

How to test

  1. Use the live Preview while editing (Split / Preview, Section 2).
  1. After Save, but before enabling, click Send test email and verify it renders on the major clients.
  1. Once QA has passed, Enable the template.

New templates are validated on the Staging environment before going live on Production.

Test in major clients

  • Outlook (Windows, Mac)
  • Gmail (Web & Mobile)
  • Apple Mail

Use professional tools for validation

  • Litmus
  • Email on Acid

Verify that

  • Buttons display correctly in Outlook
  • Links function as expected
  • Layouts remain intact on desktop and mobile
☝ Re-test on every template change - clients update their rendering engines continuously.

6. Compliance & Footer

For: Legal

Commercially sent emails (including transactional ones such as reset, confirmation, invitation) count as commercial telemedia and require provider information. Check these points before every go-live.

⚠️ Not legal advice. This section summarizes common requirements; for concrete liability risk, involve a law firm specializing in IT/competition law.

Complete the default footer

The pre-installed default templates ship with a footer that contains placeholder fields you must replace with your company-specific data before enabling.

Notion image

Replace every bracketed field:

Footer field
Maps to
[Company Name]
Company name / legal entity
[Street, ZIP, City]
Summonable postal address
Managing Director: [Name(s)]
Authorized representative(s)
Registration Court: District Court [City], HRB [Number]
Commercial register + number, if applicable
VAT ID: [Number]
VAT ID (where applicable)
Privacy Policy: [Link to Privacy Policy]
Working, absolute privacy policy link

Footer requirements

  • Imprint / provider identification: name, summonable postal address, an email address plus a second fast contact channel; depending on legal form, authorized representatives, commercial register/number, and VAT ID where applicable. The word “Impressum” need not appear - the information must be present or reachable via a working, absolute link.
  • Privacy policy link: For transactional emails, data was usually collected beforehand, so a link is sufficient; the full policy need not be in every email.
  • Postal address: part of the imprint information, covered via the imprint link.

Additional points

  • No external Google Fonts (see 4.5).
  • No-reply is permissible if clearly identifiable as such and a working alternative channel (help/imprint) is offered.
  • No unsubscribe link is required for pure transactional/system emails (mandatory only for advertising/newsletters) - keep transactional emails ad-free.
  • For newsletter emails: ensure double opt-in (Subscription Confirmation).

Compliance checklist

Did this answer your question?
😞
😐
🤩
Confirmation-less General Settings