HTML Results Email Template Guide
- April Muller (Unlicensed)
This guide will show you how to edit the HTML Results Email Templates.
Requirements
Text editor you are familiar with (visual studio code recommended)
preezie results email HTML templates
Template 1: Two Columns
This template has two columns of results. Without editing, it will look like this:
Template 2: One Column, Info on side
This template has one column of results, with product information on the left of the image. Without editing, it will look like this:
Template 3: One Column, Info Below
This template has one column of results, with product information below the image. Without editing, it will look like this:
Currently Supported Fields
In the HTML file you may find these fields depending on the template:
{LeadName} – Name from the form field at the end of a workflow
{LeadPhone} – Phone number from the form field at the end of a workflow
{LeadEmail} - Email from the form field at the end of a workflow
{LogoUrl} – Logo image URL
{Title} – Title from CMS
{DescriptionText} – From CMS
{CtaDescription} – Text before the CTA button
{CtaUrl} – Link on the CTA button & Logo
{CtaText} – Text inside CTA button
{AnswersStory} – The heading at the top of a workflow when you complete it
{LeadComment} – Comment left in comments box at the end of a workflow
{ProductImage} – Product image
{ProductLink} – URL of the product itself
{ProductName} – Name of the product
{ProductPrice} – Price of the product
{LeadId} – Do not edit or change
{RecommendedProducts} – Do not edit or change
Currently supported customisations
Changing font colour
Text alignment
Changing CTA button colour
Changing font sizes
Underlining/bolding/italicizing text
Combining custom messages with fields. Ie “Hello, {LeadName}”
Removing & adding fields
More customisations are currently being tested.
Changing margins, paddings, or display properties may shift the overall look of the template.
Before you start
Most customisations require you to simply modify or add style attributes to text fields. Text fields will look like this:
If you want to add/modify specific stylings of a field, simply add to the list of styles that currently exist. For eg if you wanted to align the text differently:
If you want to see your changes, save the file and open it in any browser.
Remember to add a semicolon between each styling attribute & you can replace any p tag with H1, h2, h3, h4, h5 etc.
Changing Font Colour
Every text field in the document has a ‘color:black’ property by default. You can change the colour to any hex value you like. Try this hex value generator if you need assistance.
Before:
After:
Text Alignment
All text by default is aligned centrally, if you want to change this, add the ‘text-align’ attribute to any specific text you’d like to change
Before:
After:
Changing CTA Button Colour
Search for ‘CtaText’ in the document & change its background-colour attribute. You can also change the font colour inside the CTA button by changing the ‘color’ attribute.
Before:
After:
Changing Font Size
If you want a custom font size for any of the fields, add font-size: (number)px to the styling.
Before:
After:
Underlining/Bolding/Italicizing text
This kind of customisation is determined by three styling attributes: text-decoration, font-style and font-weight.
Before:
After:
Combining custom messages with fields
Add text around the field name between the brackets to customise the recipient’s email.
Before:
After:
Removing and adding fields
You can delete specific text fields by finding it and deleting the html tags wrapping the text.
Before:
After:
To add fields, you can copy and paste existing ones to modify them.
You can only add new fields on the line before/after existing fields or in place of an existing one.
Before:
After: