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

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
<p style="margin-top: 0; margin-bottom: 0; font-size: 8pt; font-family: Arial, sans-serif;">{{UserProfile.Office.officeName}}</p>

// Inserts DisplayName from your Active Directory 
 <p style="margin-top: 0; margin-bottom: 0; font-size: 8pt; font-family: Arial, sans-serif;">{{Claim.DisplayName}}</p>

Inserting images

Images can be inserted from a Data resource. You can read more about data source here. 

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

//Inserts Logo from the Office data source
<img width="150" height="40" src="{{UserProfile.Office.Logo}}"/>

//Inserts FacebookIcon from the Office data source. FacebookIcon reference to another data source called Icons
<img width="15" height="15" src="{{UserProfile.Office.FacebookIcon.Icons}}"/></td>

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

• 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. 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.

Inserting email address

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

Inserting phone number

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

Inserting contact information with separators

<p style="margin-top: 2px; margin-bottom: 2px;"><span style="padding-right: 5px;">{{UserProfile.phoneNumber}}<span style="padding-right: 5px;"> | </span>{{UserProfile.mobileNumber}}</p>

Related articles