Articles in this section

How to personalize email signature templates

Updated
Follow

About this article

This article will guide you through the process of customizing email signature templates available in the Admin Center to reflect your organization’s brand and data.

 

Prerequisites

 

 

 
  • It should be noted that below article refers to common practices and may not be exactly applicable for all setups and configurations 

 

Working with email signature templates


When creating new signatures, 5 commonly used templates can be utilized, to help you get a head start. Choosing one of the existing templates will allow to easily create signature for your organization without needing to be an HTML expert.


These templates were built keeping in mind the following:

  • Accessibility: Each table element in the HTML contains a called role="presentation" that will improve accessibility for users utilizing screen readers
  • Optimization: Ensuring that these templates are compatible with the most used Email providers
  • Responsiveness: The responsive email signature design helps to view them on any device perfectly and easily

Each template has a pre-built HTML that will require to be manipulated to ensure that the signature is tailored to your organization’s details as opposed to the static data prefilled in the template. In order to support this exercise, each piece of information that requires to be updated has been listed below, along with their location in each template, as well as suggestions on where the information is usually (or typically) found.

 

Example of updating the name, the job title, and the logo utilized in a template

 

Email_signature_template_updates.gif

 

Template numbers used in the below sections

 

email_templates.png

 

Adjusting the logo

When selecting the template 1, 2, 3, or 4, it will be necessary to update the logo to the desired logo that should be utilized in the signature.

Most commonly the logo will be located in a data source listing information about the organization such as the organization name(s), the address(es), the logo(s), the website(s) and more that is referenced in the user profile via a dropdown. To reflect the logo correctly in the signature, one must adjust the width, height, border, source, and alt text of the logo. Different examples and best practices when inserting images in signatures can be found here.

<img width="90" height="70" border="0" src="stockimage://templafy/logo.png" alt="Logo">

 

Location of the HTML part in the templates:

  • Template 1: Line 10
  • Template 2 and 3: Line 20
  • Template 4: Line 16
  • Template 5: not available as this template does not contain a logo

 

Adjusting personal information (name, job title, email address, and phone number)

When selecting one of the templates, it will be necessary to update the “John Doe” to the user’s name, “Senior Manager” to the user’s title, “johndoe@greatcompany.com” to the user’s email address, and “:+123-456-7890” to the user’s phone number.

This information can be dynamically retrieved from the user profile information:

  1. Navigate to the User Profile in the Admin Center and retrieve the Name of the field utilized for the user name
  2. In the below dynamic syntax replace FormFieldName with the Name of the field {{UserProfile.FormFieldName}}
  3. In the template, replace “John Doe” with the dynamic binding
  4. Repeat steps 1 and 3 for the job title field, and replace “Senior Manager” with the dynamic binding
  5. Repeat steps 1 and 3 for the email address field, and replace “johndoe@greatcompany” with the dynamic binding in both places
  6. Repeat steps 1 and 3 for the phone number field, and replace “:+123-456-7890” with the dynamic binding in both places

 

For the user’s name, the dynamic binding will result often in {{UserProfile.Name}}, {{UserProfile.FullName}} or {{UserProfile.DisplayName}}.

For the user’s title, the dynamic binding will result often in {{UserProfile.Title}} or {{UserProfile.JobTitle}}

For the user’s email address, the dynamic binding will result often in {{UserProfile.Email}} or {{UserProfile.EmailAddress}}.

For the user’s phone number, the dynamic binding will result often in {{UserProfile.Phone}}, {{UserProfile.PhoneNumber}}, {{UserProfile.Mobile}}, or {{UserProfile.MobileNumber}}

Additional examples can be found here.

 

Name

<tr height="17px" style="margin: 0; border: 0; line-height: 15px; vertical-align: middle; height: 17px">
 <td>
  <span style="font-family: Roboto, Arial, sans-serif; font-style: normal; color: #293038; font-size: 10pt; font-weight: 500">John Doe</span>
 </td>
</tr>

Location of the HTML part in the templates:

  • Template 1: Lines 19 to 23
  • Template 2, 3, 4, and 5: = Lines 4 to 8

 

Job title

<tr height="15px" style="margin: 0; border: 0; line-height: 15px; vertical-align: middle; height: 15px">
 <td>
  <span style="font-family: Roboto, Arial, sans-serif; font-style: normal; color: #293038; font-size: 9pt; font-weight: 400">Senior Manager</span>
 </td>
</tr>

Location of the HTML part in the templates:

  • Template 1: Line 24 to 28
  • Template 2, 3, 4, and 5: Lines 9 to 13

 

Mail

<td>
 <a href="mailto:johndoe@greatcompany.com" target="_blank" style="text-decoration: none; color: #293038">
  <span style="font-family: Roboto, Arial, sans-serif; font-style: normal; color: #293038; font-size: 9pt; font-weight: 400">johndoe@greatcompany.com</span>
 </a>
</td>

Location of the HTML part in the templates:

  • Template 1: Lines 41 to 45
  • Template 2 and 3: Lines 33 to 37
  • Template 4: Lines 31 to 35
  • Template 5:  Lines 22 to 26

 

Phone

<td>
 <a href="tel:+123-456-7890" target="_blank" style="text-decoration: none; color: #293038">
  <span style="font-family: Roboto, Arial, sans-serif; font-style: normal; color: #293038; font-size: 9pt; font-weight: 400">+123-456-7890</span>
 </a>
</td>

 

Location of the HTML part in the templates:

  • Template 1: Lines 51 to 55
  • Template 2: Lines 43 to 47
  • Template 3: Lines 43 to 47 and 53 to 57 (2 phones)
  • Template 4: Lines 60 to 64 and 70 to 74
  • Template 5: Lines 32 to 26

 

Adjusting the address

 

When selecting the template 1, 2, 3, or 5, it will be necessary to update the “123 Anywhere St. City, ST 12345” to the address(es) that should be utilized in the signature.

Most commonly the address(es) will be located in a data source listing information about the organization such as the organization name(s), the address(es), the logo(s), the website(s) and more that is referenced in the user profile via a dropdown. This information can be dynamically retrieved from the user profile information and the data sources:

  1. Navigate to the User Profile in the Admin Center and retrieve the Name of the field used to select an office/location
  2. Navigate to the data source used in the user profile field and retrieve the name of the column(s) containing the address
  3. In the below dynamic syntax replace FormFieldName with the Name of the field and DataSourceColumnName with the name of the data source column {{UserProfile.FormFieldName.DataSourceColumnName}}
  4. In the template, replace “123 Anywhere St. City, ST 12345” with the dynamic binding
<td>
 <span style="font-family: Roboto, Arial, sans-serif; font-style: normal; color: #293038; font-size: 9pt; font-weight: 400">123 Anywhere St. City, ST 12345</span>
</td>

Location of the HTML part in the templates:

  • Template 1: Lines 61 to 63
  • Template 2: Line 53 to 55
  • Template 3: Line 63 to 65
  • Template 4: not available as this template does not contain an address
  • Template 5: Lines 42 to 44

 

Adjusting the website and social media icons (LinkedIn, Facebook, and Twitter)

When selecting one of the templates, it will be necessary to update www.greatcompany.com, https://linkedin.com, https://facebook.com, and https://twitter.com to the organization(s) website(s).

If there is only one link utilized across the organization for the website, LinkedIn, Facebook, and Twitter, the URL can be statically changed in both places.

If there is only one link utilized across the organization for the website, LinkedIn, Facebook, and Twitter,, these will most commonly be located in a data source listing information about the organization such as the organization name(s), the address(es), the logo(s), the website(s) and more that is referenced in the user profile via a dropdown.

The images used for the logos can be also replaced with their own by following the same steps as described in the adjusting the logo section.

 

Website

<td>
 <a href="https://www.greatcompany.com" target="_blank" style="text-decoration: none; color: #293038">
  <span style="font-family: Roboto, Arial, sans-serif; font-style: normal; color: #293038; font-size: 9pt; font-weight: 400">www.greatcompany.com</span>
</a>
</td>

Location of the HTML part in the templates:

  • Template 1: Lines 69 to 73
  • Template 2: Lines 61 to 65
  • Template 3: Lines 80 to 84
  • Template 4: Lines 41 to 45
  • Template 5: Lines 50 to 54

 

LinkedIn

<td>
 <a href="https://linkedin.com" target="_blank">
  <img width="10" height="10" border="0" src="stockimage://templafy/linkedin.png" alt="LinkedIn">
 </a>
</td>

Location of the HTML part in the templates:

  • Template 1: Lines 84 to 89
  • Template 2: Lines 76 to 80
  • Template 3: Lines 91 to 95
  • Template 4: Lines 89 to 93
  • Template 5: Lines 65 to 69

 

Facebook

<td>
 <a href="https://facebook.com" target="_blank">
  <img width="10" height="10" border="0" src="stockimage://templafy/facebook.png" alt="Facebook">
 </a>
</td>

Location of the HTML part in the templates:

  • Template 1: Lines 93 to 96
  • Template 2: Lines 84 to 88
  • Template 3: Line 99 to 103
  • Template 4: Lines 97 to 101
  • Template 5: Lines 73 to 77

 

Twitter

<td>
 <a href="https://twitter.com" target="_blank">
  <img width="10" height="10" border="0" src="stockimage://templafy/twitter.png" alt="Twitter">
 </a>
</td>

Location of the HTML part in the templates:

  • Template 1: Lines 100 to 104
  • Template 2: Lines 91 to 96
  • Template 3: Lines 107 to 111
  • Template 4: Lines 105 to 109
  • Template 5: Lines 81 to 85

 

Related articles

 

 

Related articles

Comments

0 comments

Article is closed for comments.