Email signature HTML - Best practice

Headlines in this article 

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

Insert 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

You can hide empty elements 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

You can insert images 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="">

• Width and height must always be specified in points. Percentage is not supported in Outlook and Pixels might look incorrect on hight resolution screens.
  You can read more about units here. 
• Supported formats are png and jpg
• Images with transparant bagground 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. You can read more about inline CSS styling here. 

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

Example

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>