Integreer je boekingspagina op je eigen website?

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

 

In dit helpartikel


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 koos, dan zal de embedded boekingslink (bv. https://www.vectera.com/embed/book/vectera/u/vectera-matthias/) toegevoegd worden in een iframe-codeblok. Dat ziet er zo uit:

 

<iframe 
       style="width: 100%; height: 600px;" 
       src="https://www.vectera.com/embed/book/vectera/u/vectera-matthias/" 
       frameborder="0"
></iframe>

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

 

2. Plak de embedded HTML-iframe in de code van je website, op de plaats waar je de boekingspagina wil weergeven.

 

3. Pas de hoogte en breedte aan naarmate 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 doorverwijspagina nadat een afspraak is geboekt hebt ingesteld, zal je nog 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://www.vectera.com/embed/book/vectera/u/vectera-matthias/?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 Vectera
  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.

Het Vectera team kijkt uit naar jouw feedback. Ons doel is om jouw ervaring in online meetings steeds te verbeteren! Kun je niet wachten om aan de slag te gaan? Log in op jouw account of start met de gratis proefperiode van Vectera!

Was dit artikel nuttig?