Het gemakkelijk maken voor klanten om een afspraak te boeken kan veel tijd besparen. Door je persoonlijke boekingspagina in je eigen website te integreren, is het mogelijk om dat te bereiken.


Bekijk je liever eerst onze video? Dat kan hier:




Opmerking: bovenstaande video is een beetje verouderd, aangezien je nu niet meer manueel de iframe moet toevoegen. 

Algemeen

Nadat je afspraaktypes hebt aangemaakt is het enige dat je moet doen de code kopiëren van het afspraaktype en deze in de code van je website plakken op de juiste plaats. 

  • Ga naar Afspraaktypes
    • Als je de persoonlijke of de teamboekingspagina wil kopiëren, klik dan op Boekingslinks in de rechterbovenhoek en klik op de gewenste embedded HTML-link (persoonlijk of team).
    • Als je het afspraaktype wil kopiëren, klik dan op het Delen-icoontje en kies voor Embedded HTML kopiëren.


Voorbeeld: 

Als je een van de embedded HTML's kiest, dan zal de embedded boekingslink (bv. https://cloud.teamleader.eu/_customer-meeting/embed/book/my-team-name-1/u/user-name/) toegevoegd worden in een iframe-codeblok. Dat ziet er zo uit:

<iframe
       style="width: 100%; height: 600px;"
       src="https://cloud.teamleader.eu/_customer-meeting/embed/book/my-team-name-1/u/user-name/"
       frameborder="0"
></iframe>

Het deel na /book/ is de teamnaam, terwijl het laatste deel (=/u/user-name) het aanpasbare deel is van de afspraakplanningsconfiguratie.


2. Kopieer de embedded HTML-code en plak deze in de code van je website, Wordpress, Webflow of WIX (cf. hieronder).


3. Pas de hoogte en breedte aan volgens je website (in onze suggestie is de hoogte 600px).


4. De publieke afsprakenpagina is nu mooi geïntegreerd in je eigen website.


Belangrijk: Als je een redirect-URL hebt ingesteld nadat een afspraak werd geboekt, zal je een extra lijn in je iframe-code moeten toevoegen:

<iframe
    style="width: 100%; height: 600px;"
    src="EMBEDDABLE_BOOKING_URL"
    sandbox="allow-forms allow-same-origin allow-scripts allow-top-navigation"      
    frameborder="0"
></iframe>

Als je boekingspagina's automatisch vooraf wil laten invullen, kan je gegevens toevoegen in de parameter achter de URL zoals in dit voorbeeld:

https://cloud.teamleader.eu/_customer-meeting/embed/book/my-team-name-1/u/user-name/?questions.id=value

Bekijk dit helpartikel voor meer informatie.


Eigen website

Het enige dat je eigenlijk moet doen is de embedded HTML-iframe kopiëren en deze plakken in de code van je website op de juiste plaats.


Wordpress

Wordpress.com

Het is niet mogelijk om een boekingspagina in een Wordpress.com-website te integreren. Je kan wel een hyperlink achter tekst plaatsen, om je klanten door te sturen naar een boekingspagina.


Wordpress.org

Als je het codeblok met de embedded boekingspagina hebt gekopieerd (zie algemeen), kan je het nu integreren in je Wordpress-website. 

  1. Open de pagina waar je het codeblok wil toevoegen
  2. Klik op het plusje en selecteer Aangepaste HTML
  3. Plak de iframe-code in het aangepaste HTML-blok
    *Opmerking: Afhankelijk van je lay-out wil je het iframe misschien in een paragraaf plaatsen.
  4. Test en bewerk de hoogte zodat het iframe perfect wordt weergegeven op je website.
  5. Publiceer je website

Webflow

Kopieer en plak de embedded HTML-iframe in je Webflow-website.

  1. Open de pagina waar je het codeblok wil toevoegen
  2. Klik op het plusje en kies bij Advanced voor Embed, sleep de Embed-box naar je pagina
  3. Plak de iframe-code in de custom HTML-blok:
  4. Test en bewerk de hoogte zodat het iframe perfect wordt weergegeven op je website.
  5. Publiceer je website


WIX

Boekingspagina integreren

Om een contactformulier in je Wix-website te integreren, klik je op Kopieer embedded HTML.

  1. Open de pagina waar je het codeblok wil toevoegen
  2. Klik op de Plus en Code embedden - HTML insluiten

  3. Selecteer in de HTML-instellingen Webadres en plak de embedded code van de boekingspagina in het vak Website-adres. Klik op Toepassen.
  4. Bewerk de hoogte zodat het iframe perfect wordt weergegeven op je website.
  5. Publiceer je website

Redirect-URL

In Afspraakplanning is het mogelijk om een redirect-URL toe te voegen aan je afspraaktypes. Helaas wordt dit geblokkeerd door WIX, wat betekent dat als je een redirect-URL hebt ingesteld er een foutmelding verschijnt nadat een klant een afspraak heeft geboekt. 


We raden je aan om de redirect-URL te verwijderen voor de afspraaktypes die worden getoond op je embedded boekingspagina of contact op te nemen met WIX-support.


  1. Ga naar de afspraaktypespagina in de Lead capture-Booster
  2. Klik in het kaartje van het afspraaktype op de 3 puntjes en selecteer Bewerken
  3. Ga in 'Krachtige extensies' naar Doorsturen
  4. Verwijder de URL in het veld onder 'Redirect-URL'.
  5. Sla de pagina op


Een boekingspagina integreren in een contactwidget

Als je niet de volledige boekingspagina op je website wil weergeven, maar deze achter een knop wil plaatsen, dan kan je de contactwidget gebruiken. Optioneel kan je kiezen of het afspraaktype of de boekingspagina moet openen in een pop-upvenster op je website of in een ander tabblad.

  1. Ga naar Contactwidgets
  2. Klik op Maak een widget
  3. Ontwerp je knop
  4. Selecteer of het contacttype in een nieuw tabblad of op dezelfde pagina moet worden geopend
  5. Selecteer bij 'Contacttype linken' Afspraaktype en kies welk Afspraaktype of boekingspagina moet worden weergegeven.
  6. Klik op Opslaan en integreer de Contactwidget in je website.