Email Signatures - HTML best practices

About this article

In the following article, you will be presented with the best practices around creating HTML e-mail signatures for Email Signature Manager. More information about Templafy's email signature manager can be found here.

Sections in this article:

• Insert dynamic text
• Insert images
• Insert email address
• Insert phone number
• Insert contact information with separators
• Delete If Empty

Prerequisites

Inserting dynamic text

When inserting dynamic text, you can reference information from the user profile, company data sources and active directory claims.

Below you can see examples of how these dynamics bindings would look like in an email signature:

// Inserts Name from the User Profile.
<p style="margin-top: 0; margin-bottom: 0; font-size: 8pt; font-family: Arial, sans-serif;">{{UserProfile.Name}}</p>

// Inserts OfficeName from the Office data source that is connected to a field in the User Profile called 'Office'.
<p style="margin-top: 0; margin-bottom: 0; font-size: 8pt; font-family: Arial, sans-serif;">{{UserProfile.Office.officeName}}</p>

Inserting images

Images can be inserted from a Data resource. You can read more about data source here. Also, the images uploaded to resources to be used in email signature components should have the same size as targeted in the HTML.

Below you can see an example of inserting an image from a data source:

//Insert image into email banner from Image data source.
<div><img src='{{DataSources.DataSourceName["ImageName"].DataSourceColumnName}}' width="X" height="X"></div>

//Inserts Logo from the Office data source that is connected to a field in the User Profile called 'Office'.
<img width="150" height="40" src="{{UserProfile.Office.Logo}}"/>

//Inserts FacebookIcon from the Office data source that is connected to a field in the User Profile called 'Office'. FacebookIcon reference to another data source called Icons.
<img width="15" height="15" src="{{UserProfile.Office.FacebookIcon.Icons}}"/></td>

//Adds a website link to a facebook image. Website must be https.
<a href="https://www.facebook.com/" img width="15" height="15" src="{{UserProfile.Office.FacebookIcon.Icons}}"/></td>

When inserting images, it is important to remember the following requirements: 

• Website linking must be https:// 
• Width and height must always be specified in numbers (The HTML editor automatically assumes the number is in pixels).
• Supported image formats are .png and .jpg (do not use .svg format as these images can have unpredictable behavior). Recommended .png with 32-bit depth and .jpg with a 96-bit depth to avoid compression by Outlook.
• Images with transparent backgrounds are supported in Templafy, however, some e-mail clients do not support it. Therefore, we recommend using images with a white background.
• Hyphens and underscores can not be used for column names (data source) that are used to reference email signature logos. E.g. {{UserProfile.Office.Logo}} does work, {{UserProfile.Office.Logo-1}} will not validate.

Using dynamics functions in email signatures

When inserting information from either the user profile or a data source in email signatures, you can use either use a simple binding e.g. {{UserProfile.Name}} or you can use dynamics functions. In the examples below, you will find the most common ways to use StringJoin() and IfElse().

Inserting email address

<a style="text-decoration: none; color: #6a6a6a;" href="mailto:{{UserProfile.Email}}">{{UserProfile.Email}}</a>

Inserting a phone number

//Inserting a phone number without any prefix character.
<a style="text-decoration: none; color: #6a6a6a;" href="tel:{{UserProfile.PhoneNumber}}">{{UserProfile.PhoneNumber}}</a>

//Inserting a mobile phone number with a prefix character that must be deleted if the field value is empty.
<p style="margin-top: 0; margin-bottom: 0; font-size: 9pt; font-family: Calibri, 'sans-serif'; color: #505050">{{IfElse(Equals(UserProfile.Mobile, ""), "", StringJoin("", "<span style='color: #F49930'> M </span><a href='tel:", UserProfile.Mobile, "' style='color: #505050;text-decoration: none;'>", UserProfile.Mobile, "</a>"))}}</p>

Inserting information with separators

//Inserting a Job title and Department information with a separator. If any of the values are empty, the separator and the value will be deleted.
<p style="margin-top: 0; margin-bottom: 0; font-size: 9pt; font-family: Calibri, 'sans-serif'; color: #505050">{{StringJoin("<span style='color: #F49930'> | </span>", UserProfile.Title, UserProfile.Department)}}</p>

Delete If Empty

Templafy previously used a DeleteIfEmpty tag for deleting fields such as Mobile Number. In Hive, there is a slightly different approach using Dynamics functions. See the example below for deleting a Mobile Number. 

{{if(Not(Equals(UserProfile.Mobile, "")))}}Mobile: {{UserProfile.Mobile}}{{endif}}

Related articles