Frontend Usage Guide

Email Template Variables

A streamlined process where frontend engineers embed template variables directly into email HTML, ensuring HTML integrity and faster turnaround with clear ownership.

Frontend

Template Ownership

Variable Syntax

Faster

Turnaround

Reduced

Error Rate

Overview

To reduce errors and maintain HTML integrity, frontend engineers are now responsible for embedding template variables directly into email HTML. Backend will no longer modify HTML content—they will only load templates as-is.

Before (Old Process)

✕FE delivers static HTML with placeholder text
✕Backend modifies HTML to inject variables
✕Risk of breaking HTML structure
✕Back-and-forth for corrections

After (New Process)

✓FE embeds variables directly in HTML
✓Backend loads templates without modification
✓HTML integrity preserved
✓Clear ownership and faster turnaround

Frontend

HTML + Variables

Backend (Load Only)

Email Sent

Workflow Decision

Your workflow depends on whether a variable specification already exists for the email template.

Variables Already Exist - Steps

Backend shares the .go variable spec file

Review the spec to identify available variables

Embed variables in your HTML using {{variableName}}

Submit the complete template to backend

Case 1: Variables Already Exist

When the backend team has already defined the variable specification for an email template, follow this process:

Backend shares the variable spec

You will receive a .go file (e.g., new-inflow-mail-variables.go) containing the available variables and their types.

Review the spec

new-inflow-mail-variables.go

NewInflowEmailTemplateVariables {
 amount number // Amount for the inflow
 currency string // Currency of the inflow
 inflowFrom string // Who the inflow's from
 inflowRef string // Reference for the inflow
 transactionId string // Unique transaction id
 ...variables // Inherited from @root/variables.go
}

Note: ...variables means you also have access to root variables like year, baseUrl, and nuvionLogo.

Embed variables in your HTML

Use the {{variableName}} syntax:

❌ Before (what we want to avoid)

<p>Hello Damian, your account is now active</p>
<p>You received NGN 50,000 from John Doe</p>

✓ After (what FE should deliver)

<p>Hello {{fullname}}, your account is now active</p>
<p>You received {{currency}} {{amount}} from <i>{{inflowFrom}}</i></p>

Submit the complete template

Hand off the HTML with all variables already in place. Backend will load it directly without modifications.

Case 2: Variables Don't Exist

When you're working on a new email design and no variable spec exists yet, follow this process:

Create Design

Build the HTML template with placeholder text as usual

Request Review

Share design with backend team for variable identification

Receive Spec

Backend provides the .go variable definition file

Apply Case 1

Follow Case 1 process to embed variables

Create your email design

Build the HTML template with placeholder text as usual. Focus on the visual design and structure without worrying about the variables at this stage.

Request a variable spec review

Share the design with the backend team and ask them to:

Identify which parts of the content need to be dynamic
Create the corresponding variable specification (.go file)

Receive the new spec

Backend will provide the variable definition file. This file will list all available variables with their types and descriptions.

Proceed with Case 1

Once you have the spec, follow the Case 1 process to embed the variables into your HTML. This ensures consistency across all email templates.

Interactive Demo

See how template variables get replaced with actual values when the email is rendered.

Template

Variables

Result

Variable Values

fullnameSarah Chen

currencyUSD

amount1,250.00

inflowFromAcme Corp

Raw HTML with variable placeholders

Hello {{fullname}}, your account is now active

You received {{currency}} {{amount}} from {{inflowFrom}}

Syntax Reference

Syntax	Description	Example
`{{variableName}}`	Insert a variable value	`{{fullname}} → "Damian"`
`{{baseUrl}}`	Root variable for app URL	`href="{{baseUrl}}/account-activation"`
`{{nuvionLogo}}`	Root variable for logo URL	`src="{{nuvionLogo}}"`

Root Variables

These are inherited from @root/variables.go and available in all templates. Access them via the ...variables spread.

year

string

Current year

Example: 2025

baseUrl

string

Base URL of the frontend app

Example: https://app.nuvion.com

nuvionLogo

string

Hosted URL to the official Nuvion Logo

Example: https://cdn.nuvion.com/logo.png

Example Usage in HTML

<footer>
  <img src="{{nuvionLogo}}" alt="Nuvion Logo" />
  <a href="{{baseUrl}}/dashboard">Go to Dashboard</a>
  <p>© {{year}} Nuvion. All rights reserved.</p>
</footer>

Why This Matters

Reduces Errors

Backend team members unfamiliar with HTML won't accidentally break markup. HTML structure stays intact throughout the process.

Faster Turnaround

No back-and-forth for HTML corrections. Templates go straight from frontend to production without modification delays.

Clear Ownership

Frontend owns HTML structure and styling. Backend owns data injection and variable management. Clean separation of concerns.

The Bottom Line

By having frontend engineers embed template variables directly, we create a more reliable, faster, and cleaner workflow. The HTML never needs to be touched by backend, reducing the risk of broken emails and ensuring templates look exactly as designed.