Articles in this section

Email Signatures - HTML best practices

Updated
Follow

About this article

In the following article, you will be presented with the best practices around creating HTML email signatures for Email Signature Manager. These best practices will maximize the consistency of email signatures across different mail clients and devices.

Sections in this article:

 

Prerequisites

 
  • Templafy Hive
  • Admin rights on your Templafy tenant
  • At least one of the Email Signature modules enabled

 

Use table structure in creation of email signature

Make sure to use <table> HTML elements in order to have signatures formatted correctly across mail clients, applications, and devices.

Below you can see a basic example of a properly formatted signature using <table>, <tr>, and <td> tags:

<table>
   <tr>
      <td> {{UserProfile.SignOff}} </td>
      <td> {{UserProfile.Name}} </td>
      <td> {{UserProfile.Title}} </td>
   </tr>
</table>
 
  • The use of other HTML elements (such as headings, paragraphs, line breaks, blockquotes, etc.) is not recommended as these tags are usually preformatted to match a global theme on mail clients, applications, and devices. The preformatted global theme could override any styling within these HTML elements if they are used to format email signatures.

 

Inserting dynamic text

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

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

// Inserts Name from the User Profile.
<td style="font-size: 10pt; font-family: Arial, sans-serif;">{{UserProfile.DisplayName}}</td>

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

 

Fonts

Font size

Avoid setting the font-size to 0 to align images as Outlook does not support it and will produce an error or incorrect rendering.

Font family

Make sure to use a Web Safe CSS font to avoid inconsistency within the font style.

 

 

Make sure to add the font family property to each of the <td> elements containing the text.

 
  • Mail clients may optimize draft emails by updating font families (defaulting to Times New Roman) if they are not directly specified on text element tags. Some inconsistency with font usage has been noticed on Outlook applications when the font is only defined at the top level and inherited afterwards in all the <td> elements.

 

Using Hyperlinks

To ensure hyperlinks are displayed as expected, remember the following requirements:

  • Website Linking: href must be set and the value must always start with https://
  • Using Dynamic Values: all possible dynamic values must start with https://, or alternatively always prepend it in the signatures's HTML. 
 
  • Example: href='{{DataSources.Websites["row"].Value}}'--> All possible DataSources must start with https:// or the HTML should be updated to href='https://{{DataSources.Websites["row"].Value}}' 
  • Text Decoration: Always set the text-decoration style property.
    • Templafy recommends text-decoration: none, but you can underline the hyperlink with text-decoration: underline

Inserting images

Images are required to be inserted from a data source in Templafy to avoid the "Download Images" error when receiving an email.

Below are examples of inserting images from data sources:

//Syntax for inserting an image.
<td><img src='{{DataSources.DataSourceName["ImageName"].DataSourceColumnName}}' width="X" height="Y"></td>

//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.
<td><img width="15" height="15" src="{{UserProfile.Office.FacebookIcon.Image}}"/></td>

//Adds a website link to a Facebook image. Website must be https.
<td><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: 

  • Utilizing an HTML https:// image URL link isn't supported
  • Images uploaded to a data source to be used in email signature components should have the same size as targeted in the HTML.
  • 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.
 

 

Avoid Incorrect Image Sizing in Outlook Online

Images inserted into Outlook Online (including New Outlook and Outlook Mobile) may have spacing issues due to default margins set within the mail client. 

Solution: Any table cell that contains content with a fixed size should be wrapped in a <div> with the fixed height set as styling, corresponding to the largest height element of that table row.

<table>
   <tr>
      <td> Example text </td>
      <td> 
          <div style='height:100px'>
              <img height="100" width="150" src="{{UserProfile.Office.Logo}}">
          </div>
      </td>
   </tr>
</table>

 

Using dynamics functions in email signatures

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

Reference:

 

 

Inserting an email address

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

 

Inserting a phone number

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

//Inserting a mobile phone number with a prefix character that must be deleted if the field value is empty.
<td 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>"))}}</td>

 

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.

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

 

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

Example 1

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

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

 

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

email_language.png

 

Example 2

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")}}

 

Example 3

The Translate() function can be used to automatically show text in the language that is set in the user profile. For this it's recommended to use DocumentLanguage as the name of the variable when creating a document language field in the user profile.

In this example the Translations data source is configured with the languages English (En-US) and Dutch (Nl-NL):

translationsclosing.png

 

When this HTML code is used:

<div>
<p>{{Translate("ClosingFormal")}}</p>
<p>{{UserProfile.DisplayName}}</p>
</div>

 

Then the output will show 'Yours sincerely' when the language in the user profile is set to en-US (marked red):

closingformalenglish.png

 

The output will show 'Hoogachtend' when the language in the user profile is set to nl-NL:

closingformaldutch.png

 

Instead of using the document language set in the user profile you can also hard-code the language in the HTML, by adding for example , "En-US" to the binding if you always want to show the English translation:

<div>
<p>{{Translate("ClosingInformal", "En-US")}}</p>
<p>{{UserProfile.DisplayName}}</p>
</div>

 

This means that the output in the example below will be 'Kind regards' (in English) even while the document language is set to Dutch (marked red):

closinginformallanguage.png

 

 

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">
 
  • The data source Headshots will have 2 fields and in the Name field it will contain as shown in the example above the users email address.
  • The Image field will contain the images of the headshots themselves.

 

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:

officeslogoinsertion.png

 

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

userprofile_showlogo.png

 

This HTML is used:

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

 

 
  • Forsrc='{{DataSources.LogoInsertion["LogoColor"].Image}}' the Inner quotes and the Outer quotes need to be always Different.

 

The result looks like this:

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

 

 
  • Using {{DataSources.LogoInsertion["LogoColor"].Image}} will always show the 'LogoColor'.
    If you change this binding to {{UserProfile.Office.Logo.Image}} (when the user profile contains a form field 'Office' that uses the 'Offices' data source) then the 'LogoColor' is shown when in the user profile the office is set to 'Copenhagen', but the 'LogoGreyScale' is shown when the office is set to 'Eindhoven'.
  • If you want to show (or hide) the logo with a 'Yes/No' dropdown instead of a checkbox that is also possible: just replace the first line {{if(UserProfile.ShowLogoCheckbox)}} with {{if(Equals(UserProfile.ShowLogo.Name, "Yes"))}} (when the name of the dropdown form field is 'ShowLogo').

 

 

Related articles

 

Related articles

Comments

0 comments

Article is closed for comments.