Het maken van de Outlookhandtekening (HTML)

Gewijzigd op Do, 19 Nov, 2020 om 3:05 PM

Als de basis voor de handtekening gelegd is, kan worden begonnen met het invullen van de handtekening. De handtekening wordt met HTML opgebouwd. Om de handtekening op bouwen, open je het scherm met de E-mail handtekeningen, zie Het aanmaken van een Outlookhandtekening. Vervolgens kies je de handtekening die je wilt aanpassen en klik je op Design.

Nu verschijnt het scherm waarin je de HTML kunt invoeren, met een aantal functionaliteiten.

Linksboven is dit scherm middels de X te sluiten en kom je terug in het scherm waar je een emailhandtekening kan kiezen.

Rechtboven zijn 3 knoppen:

- Diskette: Sla hiermee de huidige versie op

- Oog: Hiermee is te zien hoe de emailhandtekening eruit ziet in een email (voorbeeld)

- Radar: Instellingen (Thema, Zichtbaarheid, enz)

Rechts naast de HTML editor is een venster om variabelen in te voegen.

Aan de linkerkant onder wordt de HTML code weergegeven voor het opbouwen van de emailhandtekening.

Hieronder zie je de HTML van onze demo handtekening:

<!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;"><[DXOrganization["Location.VisitAddress"]]><br />
    <[DXOrganization["Location.VisitZipcode"]]>  <[DXOrganization["Location.VisitCity"]]><br />
    <[DXOrganization["Location.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>

Er wordt uitgegaan van een basis begrip van HTML, dit wordt dus niet altijd specifiek toegelicht. Hieronder worden veelgebruikte onderdelen van de e-mailhandtekening beschreven. Daarna worden stukjes van de e-mailhandtekening uitgelicht en voorzien van een toelichting.

<[DXEmployee["FullName"]]>

Hiermee wordt de waarde van een veld uit de database op de positie ingevoegd. In dit geval wordt uit de medewerker database 'DXEmployee' de inhoud van het veld 'FullName' geplaatst.

<[DXEmployee["OrganizationId.LinkedIn"]]>

Ook hier wordt weer de inhoud van een veld ingevoegd. Echter, nu wordt er een veld uit een gerelateerde database gelezen; in dit geval gaat het dus om het LinkedIn adres van de Organisatie die gelinked is aan de medewerker. Dit is de organisatie die in het medewerkerprofiel gekozen is. Met een punt '.' als scheidingsteken kunnen gerelateerde gegevens uitgelezen worden.

<[@\Template\Closinglines\Informal]>

Met het @-teken wordt aangegeven dat er een vertaling uitgelezen moet worden. De vertalingen zijn opgeslagen in een mappenstructuur, gescheiden door een '\'. Hier wordt dus de vertaling 'Informal' gelezen uit de hoofdmap 'Template' en submap 'Closinglines'. Hoe je vertalingen aanmaakt, lees je hier.

<[IF DXEmployee["LinkedIn"]]>...<[ELSE]>...<[ENDIF]>

Met een 'IF' kan een test worden uitgevoerd. In dit geval wordt gekeken of het medewerker profiel een waarde voor 'LinkedIn' bevat. Indien dit waar is, wordt alles wat na de 'IF' komt uitgevoerd. Indien de waarde leeg is, wordt alles na de 'ELSE' uitgevoerd. De 'ELSE' is optioneel en kan dus weggelaten worden als er geen alternatieve situatie nodig is. In het voorbeeld van onze HTML (hierboven) zie je dat er eerst wordt gekeken of er een LinkedIn adres voor de medewerker is ingevuld, als deze leeg is, wordt het LinkedIn adres van de organisatie gebruikt.

<[IF not IsReplySignature]>...<[ENDIF]>

De systeemvariabele 'IsReplySignature' geeft aan of het een handtekening voor het beantwoorden van een e-mail betreft. Hiermee kan één handtekening gebruikt worden voor zowel nieuwe e-mails als het beantwoorden van e-mails die een afwijkende inhoud hebben. In het voorbeeld van onze HTML zie je dat in de reply e-mails de campagne (= een tijdelijke regel of afbeelding) niet wordt weergegeven.

<[IF not IsEqual(DXEmployee["EmailVariant"], "NoSocialMedia")]>...<[ENDIF]>

Hier wordt gekeken of een specifieke waarde is ingesteld. Zo ja, dan wordt de rest van de HTML, tot aan de bijbehorende END IF niet uitgevoerd. In dit geval wordt gekeken of in het medewerkerprofiel een bepaalde e-mail variatie is gekozen: de variatie met de naam NoSocialMedia. Als deze variatie gekozen is, worden de social media icoontjes niet geplaatst. Hoe je variaties aanmaakt, lees je hier.

<img src="cid:linkedin" width="25" height="20" alt="LinkedIn" nosend="1" />

Het invoegen van een afbeelding is standaard HTML, echter de verwijzing naar 'cid:linkedin' zorgt ervoor dat de afbeelding 'linkedin' uit de afbeeldingenlijst hier wordt ingevoegd. Het is ook mogelijk naar externe afbeeldingen (op bijv. een website) te linken door de betreffende URL op te geven. Klik hier voor het toevoegen van afbeeldingen aan de afbeeldingenlijst.

<img src="<[DXEmployee["OrganizationId.LogoEmail"]]>" nosend="1" />

Een afbeelding kan ook uit de database worden gelezen. Hiervoor wordt de normale manier van gegevens invoegen gebruikt als waarde voor het attribuut (in geval de 'src').

<!--#renderbody#-->

Hiermee wordt de startpositie / invoegpositie aangegeven waar de content wordt ingevoegd als de handtekening in combinatie met tekstbouwblokken wordt gebruikt.

Tips & Tricks

Inline styles

Bij HTML is het gebruikelijk om de opmaak (CSS) centraal te regelen zodat het op één plek gedefinieerd wordt en op meerdere plaatsen toegepast. Echter bij een HTML e-mailhandtekening gaat dit niet op, zeker niet in combinatie met Microsoft Outlook. Zorg dat alle opmaak 'inline' wordt gedefinieerd op de plek waar het nodig is met behulp van het 'style' attribuut.

<span style="font-size: 8pt; color: #FF0000;">
  Dit is rode tekst in 8pt, toegepast met behulp van een 'span'.
</span>

Afmetingen bij afbeeldingen

Steeds vaker wordt gebruik gemaakt van beeldschermen met een hoge resolutie. Om alles leesbaar te houden, wordt in Micorosft Windows vaak 'scaling' toegepast, het procentueel opschalen van het beeld. Dit heeft echter ook gevolgen voor de afbeeldingen gebruikt in de e-mailhandtekening. Door expliciet een hoogte en breedte op te geven (indien bekend), wordt voorkomen dat de ontvanger geen opgeblazen afbeeldingen te zien krijgt. NB De afmetingen geef je aan in pixels, maar zonder de waarde (px) erachter te zetten.

<img src="cid:linkedin" width="25" height="20" alt="LinkedIn" nosend="1" />

Afbeeldingen niet als bijlage

Vaak worden, met name op mobiele apparaten, de gebruikte afbeeldingen in de handtekening als bijlage getoond. Om dit te voorkomen, kan in het afbeeldingselement gebruik worden gemaakt van het attribuut 'nosend="1"'. Dit zorgt ervoor dat de gebruikte afbeeldingen in de e-mailhandtekening niet als bijlage worden gezien.

<img src="cid:linkedin" width="25" height="20" alt="LinkedIn" nosend="1" />

Volledige URL's

Als er links in de e-mailhandtekening worden opgenomen, is het belangrijk deze zo volledig mogelijk te maken. Let erop dat de links ook worden voorzien van de 'http://' of 'https://' prefix. Dit voorkomt afwijkende weergaven in sommige online e-mail programma's.

Afbeeldingen meesturen

Bij het gebruik van afbeeldingen in Micorosft Office, worden deze vanaf Office 2013 niet meer standaard meegestuurd. Deze worden dan gelinkt, maar deze link verwijst naar de lokale bron (meestal op schijf) en is dus niet toegankelijk voor de ontvanger. Deze krijgt dan een rood kruis te zien op de plaats van de afbeelding.

Om dit probleem te verhelpen, kan in het register een instelling worden toegevoegd om Microsoft Outlook te vertellen de afbeeldingen toch mee te sturen.

HKEY_CURRENT_USER\Software\Microsoft\Office\X.0\Outlook\Options\Mail\Send Pictures With Document = 1 (type DWORD)

Hierbij is X het versienummer van Office (15 voor Office 2013 en 16 voor Office 2016, 2019 en Office 365).