In dit helpartikel begeleiden we je bij het maken van een knop via HTML die linkt naar je boekingspagina, zodat je deze kan toevoegen aan je Outlook- of Gmail-handtekening. In de eerste stap maken we de knop aan en voegen we de URL van de boekingspagina toe, en in de tweede stap voegen we deze toe aan je Outlook- of Gmail-handtekening. We raden aan om je IT'er om hulp te vragen bij het instellen hiervan.
*Opmerking: In dit helpartikel is John Doe bij XYZ accountancy een fictief persoon en bedrijf dat is gemaakt als voorbeeld. Elke gelijkenis berust op toeval.
In dit helpartikel:
- Maak de knop aan
- Voeg deze toe aan je e-mailhandtekening
- Outlook (via de browser!)
- Gmail
1. Maak de knop aan
- Kopieer je boekingspaginalink op de pagina met afspraaktypes.
Dit kan een teamboekingspagina, een persoonlijke boekingspagina of een afspraaktype-link zijn.
-
Plak het in de volgende code:
<a href="BOEKINGSPAGINA LINK" style="background-color:#FFFFFF; color:#FFFFFF; padding:10px 20px; text-decoration:none; border-radius:5px; display:inline-block; font-family:sans-serif;" target="_blank"> Knoptekst </a>
-
Verander de achtergrondkleur van de knop naar de hex-code die je verkiest. bv. Zwart: #000000
<a href="BOEKINGSPAGINA LINK" style="background-color:#000000; color:#FFFFFF; padding:10px 20px; text-decoration:none; border-radius:5px; display:inline-block; font-family:sans-serif;" target="_blank"> Knoptekst </a>
-
Verander de tekstkleur van de knop naar de hex-code die je verkiest. bv. wit: #FFFFFF
<a href="BOEKINGSPAGINA LINK" style="background-color:#000000; color:#FFFFFF; padding:10px 20px; text-decoration:none; border-radius:5px; display:inline-block; font-family:sans-serif;" target="_blank"> Knoptekst </a>
-
Voeg de tekst van de knop toe. Bv. Boek een afspraak
<a href="BOEKINGSPAGINA LINK" style="background-color:#000000; color:#FFFFFF; padding:10px 20px; text-decoration:none; border-radius:5px; display:inline-block; font-family:sans-serif;" target="_blank"> Boek een afspraak </a>
Dus een voorbeeld van een knop zou kunnen zijn:
<a href="https://meeting.teamleader.eu/book/my-team-name/u/username/t/meetingtype" style="background-color:#000000; color:#FFFFFF; padding:10px 20px; text-decoration:none; border-radius:5px; display:inline-block; font-family:sans-serif;" target="_blank"> Boek een afspraak </a>
Wat eruit ziet als:
2. Voeg het toe aan je e-mailhandtekening
Zodra de knop is gemaakt, kan je deze toevoegen aan de e-mailhandtekening. We raden aan om je IT'er om hulp te vragen, maar voor het geval je het zelf wil doen, hebben we de stappen hieronder toegevoegd.
- Outlook (via de browser!)
- Gmail
Outlook (via de browser!)
- Open Outlook in je browser en log in
- Ga naar https://outlook.live.com/mail/0/options/accounts-category/signatures-subcategory of via het tandwielicoon ==> Account ==> Handtekeningen
- Typ aaa op de plek waar je de knop wil toevoegen
- Klik met de rechtermuisknop buiten(!) het handtekeningvak en selecteer 'Inspecteren'. De ontwikkeltools worden nu geopend in je browser.
- Klik in de ontwikkeltools op het pictogram linksboven (pijl die naar binnen wijst):
- Klik in het handtekeningveld waar je aaa hebt getypt. Dit zou nu zichtbaar moeten zijn in de ontwikkeltools code. Als je 'aaa' niet ziet, klik dan op de pijl naast de code en het zou zichtbaar moeten worden:
- Klik met de rechtermuisknop op het blauwe codegedeelte en selecteer Bewerken als HTML.
- Dubbelklik op aaa, verwijder de tekst en plak de code van je knop:
- Klik ergens naast die code in de ontwikkeltools en dan zou je de knop in je handtekeningveld moeten zien verschijnen.
- Klik op Opslaan en stuur een testmail naar jezelf. Controleer in de verzonden mail of de knop je naar je boekingspagina leidt wanneer je erop klikt.
*Opmerking: als de bovenstaande informatie niet duidelijk is, raden we aan om een kijkje te nemen naar deze Youtubevideo. De eigenaar van de video heeft op geen enkele manier een relatie met Teamleader, maar de uitleg is handig.
Gmail
- Open Gmail in je browser en log in.
- Klik op het tandwielpictogram ==> Alle instellingen bekijken ==> Algemeen ==> Handtekening (je moet naar beneden scrollen)
- Typ aaa op de plek waar je de knop wil toevoegen
- Klik met de rechtermuisknop buiten(!) het handtekeningvak en selecteer Inspecteren. De ontwikkeltools worden nu geopend in je browser.
- Klik in de ontwikkeltools op het pictogram linksboven (pijl die naar binnen wijst).
- Klik in het handtekeningveld waar je aaa hebt getypt. Dit zou nu zichtbaar moeten zijn in de ontwikkeltools code. Als je 'aaa' niet ziet, klik dan op de pijl naast de code en het zou zichtbaar moeten worden.
- Klik met de rechtermuisknop op het blauwe codegedeelte en selecteer Bewerken als HTML.
- Dubbelklik op aaa, verwijder de tekst en plak de code van je knop:
- Klik ergens naast die code in de ontwikkeltools en dan zou je de knop in je handtekeningveld moeten zien verschijnen.
- Klik op Opslaan en stuur een testmail naar jezelf. Controleer in de verzonden mail of de knop je naar je boekingspagina leidt wanneer je erop klikt.
*Opmerking: als de bovenstaande informatie niet duidelijk is, raden we aan om een kijkje te nemen naar deze Youtubevideo. De video is in Outlook, maar de acties zijn hetzelfde in Gmail. De eigenaar van de video heeft op geen enkele manier een relatie met Teamleader, maar de informatie is nuttig.