In 5 stappen een boekingswidget op je website

Steeds meer gasten verwachten dat ze direct online kunnen boeken. Geen contactformulier, geen telefoontje, geen wachttijd. Gewoon een datum kiezen, gegevens invullen en betalen. Een boekingswidget maakt dat mogelijk, direct op jouw eigen website. In deze handleiding lopen we stap voor stap door het hele proces: van het configureren van je aanbod tot het testen van een echte boeking.

Wat je leert
Hoe je een boekingswidget installeert op elke website (WordPress, Wix, Squarespace, of custom HTML)
Welke instellingen je vooraf moet configureren voor een professioneel resultaat
Hoe je de widget aanpast aan je huisstijl met kleuren, lettertypen en taalinstellingen
Praktische tips om je conversie te verbeteren na installatie

Wat is een boekingswidget precies?

Een boekingswidget is een stukje code dat je op je website plaatst. Het toont een interactief boekingsformulier waarin bezoekers direct een reservering kunnen maken en betalen. De widget draait volledig in de browser van je bezoeker en communiceert rechtstreeks met het boekingssysteem, zonder dat je server er iets voor hoeft te doen.

Technisch gezien is de widget een zelfstandig JavaScript-bestand. Het heeft geen afhankelijkheden van frameworks zoals React of jQuery. Dat betekent dat het werkt op elke website die HTML ondersteunt, ongeacht welk CMS of bouwplatform je gebruikt.

Hoe werkt de communicatie?

De widget gebruikt een uniek company token om te communiceren met de API. Dit token is publiek en veilig om in je broncode te plaatsen. Het geeft de widget alleen leesrechten op je beschikbaarheid en prijzen, en schrijfrechten om een boeking aan te maken. Gevoelige informatie zoals betalingsgegevens worden verwerkt via de betaalprovider, niet via de widget zelf.

Drie verschillende boekingsflows

Afhankelijk van je type bedrijf toont de widget een andere flow:

Vakantieverhuur — Bezoekers kiezen een accommodatie, selecteren aankomst- en vertrekdatums, en zien prijzen op basis van seizoenstarieven
Verhuur — Klanten kiezen een verhuurobject (fiets, boot, apparatuur), selecteren de huurperiode en zien de dagprijs
Horeca — Gasten kiezen een datum, een tijdslot en het aantal personen, waarna beschikbare tafels worden getoond

Die flow wordt automatisch bepaald op basis van je bedrijfsconfiguratie. Je hoeft hier niets extra voor in te stellen.

Welke voorbereidingen zijn nodig voordat je begint?

Voordat je de widget installeert, moet je aanbod compleet zijn ingericht in het portaal. Zonder objecten, prijzen of beschikbaarheid heeft de widget niets om te tonen. Dit is de belangrijkste stap, want de kwaliteit van je configuratie bepaalt direct hoe professioneel de widget overkomt.

Vakantieverhuur configureren

Voeg je accommodaties toe met alle relevante informatie. Denk aan:

Duidelijke naam en omschrijving (in elke taal die je ondersteunt)
Foto's van hoge kwaliteit (minimaal 3 per accommodatie)
Seizoensprijzen met correcte periodes
Minimale en maximale verblijfsduur
Eventuele extra opties (schoonmaakkosten, linnengoedpakket)

Een veelgemaakte fout is het vergeten van seizoensprijzen. Als je geen prijzen configureert voor een bepaalde periode, toont de widget die periode als onbeschikbaar. Controleer dus of je prijskalender het hele jaar dekt.

Verhuur configureren

Voor verhuurbedrijven geldt een vergelijkbaar proces. Voeg je objecten toe met:

Productnaam en categorie
Dagprijs of uurtarief
Beschikbare aantallen
Foto's en beschrijving

Horeca configureren

Bij horecabedrijven stel je je tafels en tijdsloten in:

Tafels met capaciteit (minimum en maximum aantal gasten)
Weekschema met tijdsloten per dag
Eventueel verschillende schema's voor lunch en diner

De widget ondersteunt aanpassingen aan kleuren, lettertype en taal. In het portaal vind je deze opties onder Integratie. Door de widget visueel af te stemmen op je website, voelt het voor bezoekers als een natuurlijk onderdeel van je site in plaats van een externe tool.

Kleuren instellen

Je kunt twee kleuren instellen:

Primaire kleur — Wordt gebruikt voor knoppen, links en actieve elementen. Kies hier je merkkleur of de hoofdkleur van je website.
Secundaire kleur — Wordt gebruikt voor accenten en hover-effecten. Een iets lichtere of donkerdere variant van je primaire kleur werkt vaak goed.

De widget past deze kleuren toe via CSS custom properties. Dat betekent dat alle elementen consistent meekleuren wanneer je de instellingen aanpast.

Lettertype kiezen

Standaard gebruikt de widget het lettertype Outfit. Je kunt dit vervangen door elk Google Font. Het systeem laadt het gekozen lettertype automatisch. Als je website bijvoorbeeld Poppins of Inter gebruikt, kies dan hetzelfde lettertype voor een consistente uitstraling.

Het lettertype heeft meer impact op de uitstraling dan de kleurkeuze. Bedrijven die hetzelfde font gebruiken als hun website scoren beter op "vertrouwen" in gebruikerstests, simpelweg omdat de widget niet aanvoelt als een vreemd element.

Taalinstellingen

De widget ondersteunt Nederlands, Engels en Duits. De standaardtaal wordt automatisch bepaald op basis van de browsertaal van de bezoeker. Je kunt dit gedrag overschrijven door een vaste taal in te stellen:

<div id="votula-widget"></div>
<script src="https://widget.votula.io/booking.js"
        data-token="jouw-company-token"
        data-locale="nl"></script>

Met de Talen-module kun je ook de vertalingen van je objectnamen en beschrijvingen beheren, zodat buitenlandse gasten alles in hun eigen taal zien.

Hoe installeer je de embed-code op je website?

De installatie bestaat uit het kopieren van een HTML-snippet en het plakken op de juiste plek in je website. Het volledige embed-script ziet er zo uit:

<div id="votula-widget"></div>
<script src="https://widget.votula.io/booking.js"
        data-token="jouw-company-token"></script>

Vervang jouw-company-token door het token dat je vindt in het portaal onder Integratie. Dit is een unieke code van 64 tekens die je bedrijf identificeert.

Hieronder leggen we per platform uit waar je de code plaatst.

WordPress

WordPress is het meest gebruikte CMS ter wereld. De installatie hangt af van je editor:

Gutenberg (blokeditor):

Open de pagina waar je de widget wilt plaatsen
Voeg een nieuw blok toe van het type "Aangepaste HTML"
Plak de embed-code in het blok
Publiceer de pagina

Elementor:

Sleep een "HTML" widget naar je pagina
Plak de embed-code
Klik op "Toepassen" en bekijk het resultaat

Heb je een ander page builder plugin? Zoek naar een element met de naam "HTML", "Custom HTML" of "Code". Vrijwel elke page builder heeft deze optie.

Wix

Wix werkt met een drag-and-drop editor:

Klik op "Toevoegen" in de linker zijbalk
Kies "Embed code" en vervolgens "Embed a widget"
Plak de embed-code
Pas de grootte van het element aan zodat de widget voldoende ruimte heeft

Let op: geef het embed-element voldoende hoogte. Een minimum van 600 pixels werkt goed voor de meeste configuraties.

Squarespace

In Squarespace gebruik je een Code Block:

Bewerk de pagina waar je de widget wilt tonen
Voeg een nieuw blok toe en kies "Code"
Plak de embed-code
Zorg dat de optie "Display Source" uitstaat
Sla op en bekijk het resultaat

Eigen HTML-website

Op een zelfgebouwde website plak je de code op de gewenste plek in je HTML. Een logische locatie is binnen een <section> element op je boekingspagina:

<section id="boeken">
  <h2>Reserveer nu</h2>
  <div id="votula-widget"></div>
  <script src="https://widget.votula.io/booking.js"
          data-token="jouw-company-token"></script>
</section>

Na installatie is het testen onmisbaar. Een widget die er goed uitziet maar niet correct functioneert, kost je boekingen. Neem vijf minuten om het volledige boekingsproces door te lopen.

Testchecklist

Loop de volgende punten na:

Laden — Opent de widget zonder foutmeldingen? Controleer de browserconsole (F12) op errors.
Objecten — Worden je accommodaties, verhuurobjecten of tafels correct getoond?
Beschikbaarheid — Kloppen de beschikbare datums met wat je hebt geconfigureerd?
Prijzen — Worden de juiste prijzen getoond voor de geselecteerde periode?
Formulier — Kun je het boekingsformulier invullen en versturen?
Betaling — Wordt je doorgestuurd naar de betaalpagina? (Gebruik testmodus als je die hebt ingeschakeld)
Bevestiging — Ontvang je een bevestigingsmail na een succesvolle testboeking?

Mobiel testen

Open je website op je telefoon en doorloop hetzelfde proces. De widget is responsive en past zich aan het scherm aan, maar het is belangrijk om te controleren of:

Alle tekst leesbaar is zonder horizontaal scrollen
Knoppen groot genoeg zijn om aan te tikken
De datumkiezer goed werkt op een touchscreen
Het betaalproces compleet doorlopen kan worden

Welke tips verbeteren je conversie na installatie?

De technische installatie is pas het begin. Hoe je de widget presenteert op je website heeft direct invloed op het aantal boekingen dat je ontvangt. Hier zijn praktische aanpassingen die je vandaag kunt doorvoeren.

Positionering op de pagina

Plaats de widget hoog op de pagina. Bezoekers die op je boekingspagina landen, zoeken een manier om te reserveren. Laat ze niet scrollen. Zet de widget direct zichtbaar, bij voorkeur "above the fold" (het gedeelte dat zichtbaar is zonder te scrollen).

Call-to-action erboven

Voeg een duidelijke kop toe boven de widget. Voorbeelden:

"Boek je verblijf"
"Reserveer een tafel"
"Huur nu online"

Een kop van twee tot vier woorden werkt het best. Vermijd lange zinnen. De widget spreekt voor zich.

Foto's en beschrijvingen up-to-date houden

De widget toont de informatie die je in het portaal hebt ingevoerd. Verouderde foto's of onvolledige beschrijvingen schrikken bezoekers af. Controleer minstens elk kwartaal of je content nog klopt.

Een simpele verbetering die vaak werkt: voeg een korte alinea toe boven de widget die de verwachtingen schept. Iets als "Selecteer je datums en boek direct, je ontvangt binnen een minuut een bevestiging per e-mail." Dit verlaagt de drempel voor bezoekers die nog niet eerder online geboekt hebben.

Betalingen activeren

Activeer online betalingen als je dat nog niet hebt gedaan. Bezoekers die direct kunnen betalen bij het boeken, ronden het proces vaker af dan bezoekers die achteraf een factuur ontvangen. Bovendien vermindert het no-shows, omdat een betaling commitment creëert.

Redirect-URL instellen

Na een succesvolle boeking kun je de bezoeker doorsturen naar een bedankpagina. Dit doe je met het data-redirect-url attribuut:

<div id="votula-widget"></div>
<script src="https://widget.votula.io/booking.js"
        data-token="jouw-company-token"
        data-redirect-url="https://jouwwebsite.nl/bedankt"></script>

Op die bedankpagina kun je extra informatie delen, zoals parkeerinstructies, huisregels, of een link naar je FAQ. Dit verbetert de gastervaring direct na de boeking.

Veelgestelde vragen

Ja. De widget is een zelfstandig JavaScript-bestand zonder afhankelijkheden. Het werkt op elke website die HTML ondersteunt: WordPress, Wix, Squarespace, Webflow, Shopify, of een volledig zelfgebouwde website. Het enige vereiste is dat je een HTML-element en het script-tag kunt plaatsen.

De widget laadt asynchroon en blokkeert het laden van je pagina niet. Het JavaScript-bestand wordt gecached door de browser, waardoor het bij een tweede bezoek vrijwel direct beschikbaar is. De impact op je laadtijd is minimaal.

Kan ik meerdere widgets op een pagina plaatsen?

Technisch is dat mogelijk, maar het is zelden nodig. De widget toont al je objecten, tafels of verhuuritems in een overzichtelijke interface. Als je toch meerdere instanties wilt, gebruik dan verschillende container-elementen met elk hun eigen token.

Je hoeft niets te doen. De widget wordt gehost en bijgewerkt via een CDN. Wanneer er een nieuwe versie beschikbaar is, wordt die automatisch geladen. Je embed-code blijft altijd hetzelfde.

Controleer de volgende punten: is het company token correct? Staat er een adblocker aan die het script blokkeert? Zijn er JavaScript-fouten in de browserconsole? In de meeste gevallen is een verkeerd of ontbrekend token de oorzaak.