After having taken care of the basics, you can create the actual HTML for your signature. This is done in the E-mail editor. Open the editor from the E-mail signatures screen, see Creating or modifying an Outlook signature. Select the signature you wish to edit and click Design.
In the top leftcorner you can close this screen with pushing the X.
In the top rightcorner there are 3 buttons:
- Disc: Save the current HTML for the emailsignature
- Eye: Show the signature on screen
- Radar: Settings (Theme, Visability, etc)
On the right next to the HTML editor is the sidebar to use variables in the signature.
On the leftbottom is the main screen for the HTML code which makes the emailsignature.
This is the HTML for our demo signature:
HTML
<!DOCTYPE html>
<html>
<body style="font-family: Calibri; font-size: 11pt;">
<!--#renderbody#-->
Click <a href="https://eformity.freshdesk.com/solution/articles/9000162058-demo-signature-manager/en"> here </a> to view two short clips on how to change your logo and how to add a temporary line or image to your e-mail signature.<br />
<br />
<[@\Template\Closinglines\Informal]>,<br />
<[DXEmployee["FullName"]]><br />
<[IF DXEmployee["JobTitle"]]><i><[DXEmployee["JobTitle"]]></i><br /><[ENDIF]>
<[IF DXEmployee["OrganizationId.LogoEmail"]]>
<br />
<img src="<[DXEmployee["OrganizationId.LogoEmail"]]>"<[IF DXEmployee["OrganizationId.LogoEmailWidth"]]> width="<[DXEmployee["OrganizationId.LogoEmailWidth"]]>"<[ENDIF]><[IF DXEmployee["OrganizationId.LogoEmailHeight"]]> height="<[DXEmployee["OrganizationId.LogoEmailHeight"]]>"<[ENDIF]> nosend="1" /><br />
<[ENDIF]>
<br />
<span style="font-size: 9pt;"><[DXEmployee["LocationId.VisitAddress"]]><br />
<[DXEmployee["LocationId.VisitZipcode"]]> <[DXEmployee["LocationId.VisitCity"]]><br />
<[DXEmployee["LocationId.Country"]]><br /></span>
<br />
<[IF not IsEqual(DXEmployee["EmailVariant"], "NoSocialMedia")]>
<[IF DXEmployee["LinkedIn"]]>
<a href="<[DXEmployee["LinkedIn"]]>"><img src="cid:linkedin" width="25" height="20" alt="LinkedIn" nosend="1" /></a>
<[ELSE]>
<[IF DXEmployee["OrganizationId.LinkedIn"]]>
<a href="<[DXEmployee["OrganizationId.LinkedIn"]]>"><img src="cid:linkedin" width="25" height="20" alt="LinkedIn" nosend="1" /></a>
<[ENDIF]>
<[ENDIF]>
<[IF DXEmployee["OrganizationId.Facebook"]]>
<a href="<[DXEmployee["OrganizationId.Facebook"]]>"><img src="cid:facebook" width="25" height="20" alt="Facebook" nosend="1" /></a>
<[ENDIF]>
<[IF DXEmployee["Twitter"]]>
<a href="<[DXEmployee["Twitter"]]>"><img src="cid:twitter" width="25" height="20" alt="Twitter" nosend="1" /></a>
<[ELSE]>
<[IF DXEmployee["OrganizationId.Twitter"]]>
<a href="<[DXEmployee["OrganizationId.Twitter"]]>"><img src="cid:twitter" width="25" height="20" alt="Twitter" nosend="1" /></a>
<[ENDIF]>
<[ENDIF]>
<[IF DXEmployee["OrganizationId.YouTube"]]>
<a href="<[DXEmployee["OrganizationId.YouTube"]]>"><img src="cid:youtube" width="25" height="20" alt="YouTube" nosend="1" /></a>
<[ENDIF]>
<br />
<[ENDIF]>
<[IF not IsReplySignature]>
<[IF not IsEqual(Variables.GetText("OrganizationCampaign.DisplayName"), "")]>
<br />
<br />
<[IF not IsEqual(Variables.GetText("OrganizationCampaign.Url"), "")]><a href="<[%OrganizationCampaign.Url]>"><[ENDIF]>
<[IF not IsEqual(Variables.GetValue("OrganizationCampaign.Image", null), null)]><img src="<[%OrganizationCampaign.Image]>" nosend="1" /><br /><[ENDIF]>
<[IF not IsEqual(Variables.GetText("OrganizationCampaign.Text"), "")]><[%OrganizationCampaign.Text]><[ENDIF]>
<[IF not IsEqual(Variables.GetText("OrganizationCampaign.Url"), "")]></a><[ENDIF]>
<[ENDIF]><[IF not IsEqual(Variables.GetText("LocationCampaign.DisplayName"), "")]>
<br />
<br />
<[IF not IsEqual(Variables.GetText("LocationCampaign.Url"), "")]><a href="<[%LocationCampaign.Url]>"><[ENDIF]>
<[IF not IsEqual(Variables.GetValue("LocationCampaign.Image", null), null)]><img src="<[%LocationCampaign.Image]>" nosend="1" /><br /><[ENDIF]>
<[IF not IsEqual(Variables.GetText("LocationCampaign.Text"), "")]><[%LocationCampaign.Text]><[ENDIF]>
<[IF not IsEqual(Variables.GetText("LocationCampaign.Url"), "")]></a><[ENDIF]>
<[ENDIF]><[IF not IsEqual(Variables.GetText("DepartmentCampaign.DisplayName"), "")]>
<br />
<br />
<[IF not IsEqual(Variables.GetText("DepartmentCampaign.Url"), "")]><a href="<[%DepartmentCampaign.Url]>"><[ENDIF]>
<[IF not IsEqual(Variables.GetValue("DepartmentCampaign.Image", null), null)]><img src="<[%DepartmentCampaign.Image]>" nosend="1" /><br /><[ENDIF]>
<[IF not IsEqual(Variables.GetText("DepartmentCampaign.Text"), "")]><[%DepartmentCampaign.Text]><[ENDIF]>
<[IF not IsEqual(Variables.GetText("DepartmentCampaign.Url"), "")]></a><[ENDIF]>
<[ENDIF]>
<[ENDIF]>
</body>
</html>You will need to know the basics of HTML in order to create your signature, we will not go into HTML specifically. Below we will describe commonly used parts of the signature.
HTML
<[DXEmployee["FullName"]]>This enters the value from a datasource field; in this case the value of the field FullName in the Employee datasource.
HTML
<[DXEmployee["OrganizationId.LinkedIn"]]>This also enters the value from a datasource field, but in this case it is from a datasource that is linked to another datasource. This option is used when you have several Organisations or Locations and you want to use the default Employee to specify the organisation or location that you want to use. Each employee is linked to an Organisation and Location, so in the above example the LinkedIn address is used, belonging to the Organisation that is linked to the employee. The fullstop as a separator is used to indicate linked data.
HTML
<[@\Template\Closinglines\Informal]>The @ symbol indicates that a translation will be used. The translations are stored in folders, separated by a '\'. In the above example the translation 'Informal' is used from the main folder 'Template' and the sub folder 'Closinglines'. Click here to learn how to create translations.
HTML
<[IF DXEmployee["LinkedIn"]]>...<[ELSE]>...<[ENDIF]>Use an 'IF' to carry out a test. In the above example the system tests whether the employee has a value for LinkedIn. If it does, everything after the 'IF' is carried out. If the field is empty, everything after the 'ELSE' is carried out. The 'ELSE' is optional and can be left out if no alternative situation is necessary. In the example of our demo HTML (at the top) you see that if the employee does not have a LinkedIn address, the Organisation's LinkedIn address is used.
HTML
<[IF not IsReplySignature]>...<[ENDIF]>The system variable 'IsReplySignature' indicates the variant that is used in case of a reply e-mail. This allows the same signature to be used both for the creation of new and reply e-mails. In our demo example you see that in the reply e-mails the campaign (= a temporary line or image) is not inserted.
HTML
<[IF not IsEqual(DXEmployee["EmailVariant"], "NoSocialMedia")]>...<[ENDIF]>This checks whether a specific value is set. If it is, the rest of the HTML upto the accompanying END IF is not carried out. In this case we check whether a certain e-mail variant is set in the employee profile: the variant NoSocialMedia. If the variant is chosen, the social media icons are not inserted. Click here to learn How to add variants for an Outlook signature
HTML
<img src="cid:linkedin" width="25" height="20" alt="LinkedIn" nosend="1" />By referring to 'cid:linkedin' you are inserting the image named 'linkedin' from the image list. You can also link to external images (e.g. on a website) by entering the URL in question. Click here to learn how to add images to the images list
HTML
<img src="<[DXEmployee["OrganizationId.LogoEmail"]]>" nosend="1" />An image can also be linked from the datasource. This is done in the same way as other datasource data, but with img src=
HTML
<!--#renderbody#-->This indicates the starting point where content is placed if the signature is used in combination with text blocks.
Tips & Tricks
Inline styles
In HTML it is common to arrange the layout (CSS) centrally so that it is defined in one place and applied in multiple places. However, this does not apply to an HTML e-mail signature, certainly not in combination with Microsoft Outlook. Ensure that all 'inline' formatting is defined where it is needed using the 'style' attribute.
HTML
<span style="font-size: 8pt; color: #FF0000;"> Dit is rode tekst in 8pt, toegepast met behulp van een 'span'.
</span>Image dimensions
More and more screens with a high resolution are used. To keep everything readable, Micorosft Windows often uses 'scaling', the percentage scaling of the image. However, this also has consequences for the images used in the e-mail signature. Specifying a height and width explicitly (if known) will prevent the receiver from seeing images that are out of proportion. Note Specify the dimensions in pixels, but without actually entering the value (px) behind it.
HTML
<img src="cid:linkedin" width="25" height="20" alt="LinkedIn" nosend="1" />Images not as attachment
Often, especially on mobile devices, the images used are shown in the signature as an attachment. To prevent this, the 'nosend = "1"' attribute can be used in the imaging element. This ensures that the images used in the e-mail signature are not seen as an attachment.
HTML
<img src="cid:linkedin" width="25" height="20" alt="LinkedIn" nosend="1" />Complete URL's
If links are included in the email signature, it is important to make these as complete as possible. Note that the links are also provided with the 'http: //' or 'https: //' prefix. This prevents abnormal views in some online e-mail programs.
Sending images
When using images in Micorosft Office, they will no longer be sent along with the e-mail, starting from Microsoft Office 2013. In stead, these are linked, but since the link refers to the local source (usually a local disk) they are not accessible to the recipient, who will then see a red cross where the image should be.
To solve this problem, a setting can be added to the registry to tell Microsoft Outlook to send the images anyway.
HKEY_CURRENT_USER\Software\Microsoft\Office\X.0\Outlook\Options\Mail\Send Pictures With Document = 1 (type DWORD)
Whereby X is the version number for Office (15 for Office 2013 and 16 voor Office 2016, 2019 and Office 365).