Hoe kan ik een online afsprakenmodule integreren op mijn website?

Iedere online afsprakenmodule die een integratiecode (of ook wel embed code) voorziet kan geïntegreerd worden op jouw Webhero website.

Hieronder kan je een stappenplan terugvinden van hoe je een Calendly kalender integreert. Maak je gebruik van een andere online tool, kan je de grote lijnen van het stappenplan hieronder zeker ook volgen.

Heb je nog geen Calendly kalender aangemaakt, volg dan eerst de stappen uit deze PDF.

Calendly integreren op jouw website

Om klanten een online afspraak te laten maken, dien je deze kalender op jouw website te zetten. Dit kan op 3 verschillende manieren:

• Maak een extra titel in jouw menubalk die linkt naar de online kalender op de URL van Calendly.

• Maak een zwevende knop onderaan rechts bij je website waarop klanten kunnen klikken en meteen online afspraak kunnen maken.

• Maak een pagina aan waarop de afsprakenkalender volledig zichtbaar is zonder dat bezoekers op een link moeten klikken.

Optie 1: titel in je menubalk

Om de nodige URL te bekomen om een link in jouw menubalk van de website te plaatsen, klik je in Calendly bij je afsprakenkalender op ‘Copy link’.

Ga daarna in de beheermodule van jouw website naar de tab ‘Pagina’s’ en klik rechts bovenaan op de groene + (= pagina toevoegen). Kies voor het type pagina ‘hyperlink’ en vul de pagina als volgt in:

1. Geef jouw pagina een titel, bv. ‘Afspraak maken’ of ‘Online afspraak’;

2. Kies bij URL voor ‘Externe pagina’;

3. Plak de link van jouw Calendly kalender in het veld dat aan de rechterkant verschenen is;

4. Activeer de schakelaar ‘Hyperlink in nieuw tabblad openen’;

5. Klik helemaal onderaan op ‘Opslaan’.

Optie 2: knop in de rechteronderhoek van je scherm

Om de nodige integratiecode te bekomen om een zwevende knop op jouw website te maken, klik je in Calendly bij je afsprakenkalender op het instellingsicoontje en daarna op ‘Add to website’.

Kies voor de optie ‘Popup widget’ en klik op ‘Continue’. Kopieer hier de volledige embed code, startend met <!--.

Indien je de Calendly kalender nog verder wenst te personaliseren kan je eventueel aan de linkerzijde de tekst op de knop en de kleuren van de knop en pagina instellen vooraleer je de embed code kopieert.

Ga hierna naar de beheermodule van jouw website en klik je rechtsboven op ‘Instellingen’ (= icoontje van het tandwiel) en dan op ‘Tracking & verification’. De embed code kan je dan plakken in het veld ‘Custom HTML code body’. Vergeet niet om op ‘Opslaan’ te klikken.

Nadat je op opslaan hebt geklikt, zal je zien dat er rechts onderaan op jouw website een knop verschijnt om een afspraak te via jouw Calendly afsprakenkalender.

Optie 3: aparte pagina op je website

Om de nodige integratiecode te bekomen om een zwevende knop op jouw website te maken, klik je in Calendly bij je afsprakenkalender op het instellingsicoontje en daarna op ‘Add to website’.

Kies voor de optie ‘Inline embed’ en klik op ‘Continue’. Kopieer hier de volledige embed code, startend met <!--.

Indien je de Calendly kalender nog verder wenst te personaliseren kan je eventueel aan de linkerzijde de kleuren van de kalender instellen vooraleer je de embed code kopieert.

Ga daarna in de beheermodule van jouw website naar de tab ‘Pagina’s’ en klik rechts bovenaan op de groene + (= pagina toevoegen). Kies voor het type pagina ‘tekst’ en vul de pagina als volgt in:

1. Geef jouw pagina een titel, bv. ‘Afspraak maken’ of ‘Online afspraak’;

2. Vul een meta omschrijving in als introductietekst wanneer je de pagina link op social media deelt;

3. Klik bij het veld ‘Tekst’ recht op de + en daarna op < > (= codeweergave);

4. Plak op regel 1 de volledige embed code van jouw Calendly kalender;

5. Upload indien gewenst nog een afbeelding;

6. Klik helemaal onderaan op ‘Opslaan’.

Je zal daarna op jouw website bovenaan in de menubalk een nieuwe pagina zien staan en als je hierop klikt zal je op jouw pagina de volledige afsprakenkalender zien.