Email Signatures - HTML best practices

About this article

In the following article, you will be presented with the best practices around creating HTML email signatures for Email Signature Manager.

Sections in this article:

• Insert dynamic text
• Insert images
• Insert email address
• Insert phone number
• Insert contact information with separators
• Delete if empty
• Using HTML element names in a function
• Use language
• Inserting headshots
• Show or hide image with (alternative) hyperlink

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="font-size: 10pt; font-family: Arial, sans-serif;">{{UserProfile.DisplayName}}</p>

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

// Inserts Name from the Office data source that is connected to a field in the User Profile called 'Office'.
But the DataSource contains multiple lines/line breaks? Then use the "<pre>" HTML tag (Preformatted text) 
Example: <pre>{{UserProfile.Office.Name}}</pre>

Inserting images

To avoid the "Download Images" error when receiving an email, Images are required to be inserted from a data source in Templafy, utilizing an HTML HTTPS image URL link isn't supported. Also, images uploaded to a data source 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:

//Syntax for inserting an image.
<div><img src='{{DataSources.DataSourceName["ImageName"].DataSourceColumnName}}' width="X" height="Y"></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 is a reference to another data source that contains an Image column.
<img width="15" height="15" src="{{UserProfile.Office.FacebookIcon.Image}}"/></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.Image}}"/></td>

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

• Website linking (href) must be https://.
• Width and height must always be specified in numbers (The HTML editor automatically assumes the number is in pixels).
• The attributes src, alt, width, and height are the only allowed attributes on the image tag.
• 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 email clients do not support it. Therefore, we recommend using images with a white background.
• In data sources column names should not contain a "-" or a "_", this will cause an error. E.g. {{UserProfile.Office.Company_Logo}} will not work.

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="font-family: Arial, 'sans-serif'; font-size: 9pt; color: #505050">
{{StringJoin("<span style='color: #F49930'> | </span>", UserProfile.Title, UserProfile.Department)}}
</p>

Delete if empty

You can use the {{if}} ... {{endif}} function to delete plain text or a field if the variable is empty.

In the example below the plain text and user profile field 'Mobile: {{UserProfile.MobilePhone}}' are deleted when the user profile field MobilePhone is empty:

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

Use HTML element names in a function

Use HTML element names like <table>, <tr> and <td> in a function. If the personal message is empty then the output is empty, else a table is created with the personal message:

<table>
   <table>
      <tr>
         <td>Phone:</td>
         <td>{{UserProfile.Phone}}</td>
      </tr>
   </table> {{IfElse(Equals(UserProfile.PersonalMessage, ""),
  "", StringJoin("<table><tr><td>", UserProfile.PersonalMessage,
  "</td></tr>
   </table>"))}}
</table>

Use language

If you want to display the language set in the user profile, you can use these bindings:

<p style="font-family: 'Arial', sans-serif; font-size: 10pt;">
Language: {{UserProfile.DocumentLanguage.Name}} <br>
Language code: {{UserProfile.DocumentLanguage.Language}} <br>
Language code: {{DocumentLanguage}}
</p> 

If the language is e.g. 'English (United States) (en-US)' then the result looks like this:

You can also use the language in a function. In the example below the email shows "Met vriendelijke groet" when the DocumentLanguage is set to Dutch ("nl-NL"), else it will be "Kind regards":

{{IfElse(Equals(DocumentLanguage, "nl-NL"), "Met vriendelijke groet", "Kind regards")}}

Inserting headshots 

Templafy offers the ability to dynamically insert the headshot for each user based on a unique field (email address for example) into the email signatures. This will require the creation of a data source which is referenced to containing the headshot images.

<img src='{{DataSources.Headshots[UserProfile.Email].Image}}' height="100" width="100">

Show or hide image with (alternative) hyperlink

In this example a user can choose to show (or hide) a logo through a checkbox, and use it with a default or alternative hyperlink.

These data sources are used. The column Logo of the Offices data source is a reference to the column Name of the LogoInsertion data source:

The user profile contains a checkbox to show (or hide) the logo and a textbox to provide an alternative link:

This HTML is used:

{{if(UserProfile.ShowLogoCheckbox)}}
   {{if(Equals(UserProfile.AlternativeLink, ""))}}
      <br>
      <a href="http://www.templafy.com">
      <img src="{{DataSources.LogoInsertion["LogoColor"].Image}}" width="90" height="25"></a>
   {{endif}}
   {{if(Not(Equals(UserProfile.AlternativeLink, "")))}}
      <br>
      <a href="{{UserProfile.AlternativeLink}}">
      <img src="{{DataSources.LogoInsertion["LogoColor"].Image}}" width="90" height="25"></a>
   {{endif}}
{{endif}}

The result looks like this:

Input	UserProfile.ShowLogoCheckbox = "☐"	UserProfile.ShowLogoCheckbox = "☑", UserProfile.AlternativeLink = ""	UserProfile.ShowLogoCheckbox = "☑", UserProfile.AlternativeLink = "https://support.templafy.com"
Output	No image

Related articles