Email signature HTML - Best practice

Headlines in this article

• Insert dynamic text
• Hide empty fields
• Insert images
• Insert contact information with separators
• Insert email address
• CSS Styling
• Sample signature

This article describes the best practice for setting up the HTML required for email signatures. More information about Templafy's email signature manager can be found here. 

Insert dynamic text

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

// Inserts Name from the User Profile 
%Profile.Name%


// Inserts OfficeName from the Office data source
%Profile.Office.OfficeName%


// Inserts DisplayName from your Active Directory 
 %Claim.DisplayName%

Hide empty fields

Empty elements can be hidden with the DeleteIfEmpty tag.

//Deletes the Name if it is not filled out in the User Profile 

<!--DeleteIfEmpty:%profile.Name%-->Name: %profile.Name%<!--/DeleteIfEmpty-->

Insert images

Images can be inserted  from the Company Logos section in Templafy.
Path: Admin site > Configuration > Company data > Company Logos

//Inserts a logo from the Campany Logos section
<img src="logo.png" width="100 pt" height="100 pt" alt="">

//References image name through the office data source
<img src="%Profile.Office.Logo%.png" width="100 pt" height="100 pt" alt="">

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

• Width and height must always be specified in points. Percentages are not supported in Outlook, and pixels may look incorrect on high resolution screens.
  You can read more about units here. 
• Supported image formats are .png and .jpg.
• Images with transparent backgrounds are not supported.

Insert contact information with separators:

T: %Profile.Phone% | D: %Profile.Domesticphone% | M: %Profile.Mobile% 

<p style="margin-top: 2px; margin-bottom: 2px;"><!--DeleteIfEmpty:%profile.phone%--> <span style="padding-right: 5px;"><strong>T: </strong></span> %Profile.Phone% <!--/DeleteIfEmpty--> <!--DeleteIfEmpty:%profile.domesticphone%--> <span style="padding-right: 5px;"> <strong><!--DeleteIfEmpty:%profile.phone%-->|<!--/DeleteIfEmpty--> D:</strong> </span> %Profile.Domesticphone% <!--/DeleteIfEmpty--> <!--DeleteIfEmpty:%profile.mobile%--> <span style="padding-right: 5px;"> <strong><!--DeleteIfEmpty:%profile.domesticphone%%profile.phone%-->|<!--/DeleteIfEmpty--> M:</strong> </span> %Profile.Mobile% <!--/DeleteIfEmpty--></p>

Insert email address

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

CSS Styling:

Outlook supports inline CSS styling of content. More information about inline CSS styling can be found here. 

<p style="margin-top: 2pt;">SomeText</p>

Example of a simple email signature:

HTML:

<div style="color: #000000; font-size: 10pt; font-family: 'Arial';">
<!--Name and department-->
<p style="margin-top: 2px; margin-bottom: 2px;"><strong>%Profile.Name%</strong></p>
<p style="margin-bottom: 2px;">%Profile.Department%</p>
<p style="margin-bottom: 2px;">%Profile.Title%</p>
<!--Phone-->
<p style="margin-top: 2px; margin-bottom: 2px;"><!--DeleteIfEmpty:%profile.phone%--> <span style="padding-right: 5px;"><strong>T: </strong></span> %Profile.Phone% <!--/DeleteIfEmpty--> <!--DeleteIfEmpty:%profile.domesticphone%--> <span style="padding-right: 5px;"> <strong><!--DeleteIfEmpty:%profile.phone%-->|<!--/DeleteIfEmpty--> D:</strong> </span> %Profile.Domesticphone% <!--/DeleteIfEmpty--> <!--DeleteIfEmpty:%profile.mobile%--> <span style="padding-right: 5px;"> <strong><!--DeleteIfEmpty:%profile.domesticphone%%profile.phone%-->|<!--/DeleteIfEmpty--> M:</strong> </span> %Profile.Mobile% <!--/DeleteIfEmpty--></p>
<!--Email address-->
<!--DeleteIfEmpty:%profile.email%-->E: <a style="text-decoration: none; color: #6a6a6a;" href="mailto:%Profile.Email%">%Profile.Email%</a><!--/DeleteIfEmpty-->
<!--Website and address-->
<p style="margin-top: 2px; margin-bottom: 2px;"><strong>W: </strong><a href=“http://MyCompanyWebsite.com“></a></p>
<p style="margin-bottom: 2px;"><strong>My Company Name</strong></p>
<p style="margin-top: 2px; margin-bottom: 14px;">%Profile.SelectionID.Address%</p>
</div>