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:
- Use
<table>structure in creation of email signature - Inserting dynamic text
- Fonts
- Inserting images
- Using dynamics functions in email signatures
- Insert email address
- Insert phone number
- Inserting information with separators
- Delete if empty
- Use HTML element names in a function
- Use language
- Inserting headshots
- Show or hide image with (alternative) hyperlink
Prerequisites
|
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>
|
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.
|
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.
<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:
- 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 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 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
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:
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, ""))}}
<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}}
|
The result looks like this:
| Input | UserProfile.ShowLogoCheckbox = "☐" | UserProfile.ShowLogoCheckbox = "☑", UserProfile.AlternativeLink = "" | UserProfile.ShowLogoCheckbox = "☑", UserProfile.AlternativeLink = "https://support.templafy.com" |
| Output | No image |
|
Comments
0 comments
Article is closed for comments.