Leer hoe u de FlexBookz-bookingwidget configureert, aanpast en op uw website of WordPress-site embedt voor naadloze klantboekingen.
Was this documentation helpful? Let us know!
De Booking Widget in FlexBookz is een flexibel, merkbaar component waarmee klanten rechtstreeks vanaf uw website afspraken kunnen boeken. Het maakt verbinding met uw FlexBookz-account, houdt rekening met dienstroosters en beschikbaarheid van personeel, en kan op meerdere manieren worden ingebed (pop-updialoog, zwevende knop, inline iframe) of geïnstalleerd via een WordPress-plugin. Deze documentatie legt uit hoe de widget werkt, hoe u deze configureert en embedt, praktische use-cases en tips voor probleemoplossing om een soepele boekingservaring voor uw klanten te garanderen.
De widget communiceert met FlexBookz met behulp van een authenticatie API-sleutel en een lijst met toegestane domeinen. Wanneer een bezoeker de widget opent, vraagt deze realtime beschikbaarheid op voor diensten en personeel, toont de door u geconfigureerde boekingsflow en stuurt boekingen terug naar uw FlexBookz-agenda. U kunt uiterlijk, taal, boekingsgedrag en formuliervelden aanpassen om aan uw bedrijfsbehoeften te voldoen.
De widget ondersteunt meerdere weergavemodi:
Dialoog — een getriggerde pop-up die opent wanneer een bezoeker op een knop of link klikt.
Bubble — een blijvende zwevende actieknoop die doorgaans rechtsonder wordt weergegeven.
Iframe — inline ingebed waar u de volledige boekingsinterface op een pagina wilt tonen.
WordPress-plugin — installeerbare plugin met Gutenberg-blokken en shortcodes.
Ga naar Instellingen > Booking-widget in uw FlexBookz-dashboard.
Zoek de API-sleutel. Kopieer deze of klik op Regenerate om een nieuwe sleutel aan te maken.
Houd de sleutel veilig — behandel deze als een wachtwoord. Als deze uitlekt, genereer dan een nieuwe sleutel en werk uw embeds onmiddellijk bij.
Voeg onder Toegestane domeinen elke website-URL toe die de widget zal hosten (bijvoorbeeld https://example.com of https://book.example.com).
Klik op Toevoegen om elk domein op te slaan. Deze whitelist voorkomt dat de widget op ongeautoriseerde sites wordt gebruikt.
Open het tabblad Thema-builder in de widgetinstellingen.
Selecteer een basistemplate (bijvoorbeeld Modern & Minimal of Classic Professional).
Stel kleuren, lettertypen, knopweergave en iconografie af om bij uw merk te passen.
Gebruik de Live Preview om aanpassingen te testen voor zowel desktop- als mobiele weergaven.
Open het tabblad Inhoud om talen, labels en inline helpteksten in te stellen.
Onder Gedrag configureert u de boekingsflow en formuliervelden. Typische opties zijn:
Personeelskeuze overslaan — verbergt de keuze voor personeel en wijst automatisch toe op basis van beschikbaarheid.
Express-modus — een compacte flow voor terugkerende klanten met minder verplichte velden.
Datum & tijd combineren — presenteert datum- en tijdselectie in één stap.
Stel validatieregels, verplichte velden en opt-in-schakelaars voor marketingcommunicatie in.
Kies een van de embed-opties en voeg de geleverde code aan uw site toe:
Dialoog (getriggerde pop-up)
Plaats een trigger-element op uw pagina en includeer het hoofdscript één keer (meestal in <head> of vóór </body>):
<!-- FlexBookz Widget Script -->
<script src="https://cdn.flexbookz.com/widget.js" defer></script>
<!-- Trigger button -->
<button data-flexbookz-trigger="open" data-fb-api-key="YOUR_API_KEY">Book Now</button>
Bubble (zwevend)
<script src="https://cdn.flexbookz.com/widget.js" defer></script>
<script>
window.FlexBookzWidget && window.FlexBookzWidget.init({
apiKey: 'YOUR_API_KEY',
display: 'bubble',
position: 'bottom-right'
});
</script>
Iframe (inline)
Gebruik een iframe wanneer u de volledige boekingsinterface inline op een pagina wilt tonen:
<iframe src="https://widget.flexbookz.com/embed?apiKey=YOUR_API_KEY"
title="Book an appointment"
style="width:100%;height:800px;border:0;"></iframe>
WordPress-plugin
Installeer de FlexBookz-plugin vanuit de WordPress-pluginbibliotheek of upload de plugin-ZIP.
Activeer de plugin en ga naar de FlexBookz-instellingen in de WP-admin.
Voer uw API-sleutel in, configureer weergave-opties en voeg het Gutenberg-blok of shortcode toe aan een pagina/post.
Salon op één locatie: Gebruik de Dialoog-modus op uw homepage met Personeelskeuze overslaan om boekingen te versnellen voor walk-in-stijl bedrijven.
Spa met meerdere locaties: Gebruik het iframe op elke locatiepagina om beschikbare diensten en personeel per locatie vooraf te filteren.
Promotiecampagnes: Voeg een tijdgebonden landingspagina toe met de widget in Express-modus om tijdens een actie snel boekingen te verzamelen.
Eigenaren van WordPress-sites: Gebruik de plugin en een Gutenberg-blok om de widget toe te voegen aan servicepagina's of de site-footer, wereldwijd.
Tip: Het vooraf selecteren van een dienst of locatie in de widget-URL maakt het mogelijk directe boekingslinks te creëren voor e-mailcampagnes of social ads.
Gebruik altijd https op uw site om veilige werking van de widget te garanderen en klantgegevens te beschermen.
Laat het widgetthema overeenkomen met uw merk om vertrouwen en conversieratio's te verhogen.
Test de boekingsflow op verschillende apparaten en browsers om responsiviteit en toegankelijkheid te waarborgen.
Schakel verificatiecookies of een flow voor terugkerende klanten in om frictie bij herhaalde boekingen te verminderen.
Stel passende buffers en dienstduur in FlexBookz in om dubbele boekingen te voorkomen en voorbereidingstijd voor personeel te garanderen.
Integreer met Google Calendar of uw POS om roosters en verkopen synchroon te houden.
Gebruik vooraf ingevulde parameters (dienst, locatie, personeel) in URL-links voor gerichte campagne-tracking.
Widget laadt niet:
Controleer of het domein dat de widget host is opgenomen onder Toegestane domeinen.
Zorg ervoor dat de API-sleutel in de embed-code overeenkomt met die in FlexBookz.
Open uw browserconsole om geblokkeerde bronnen te controleren (CORS- of mixed-content-fouten).
Stijlconflicten met site-CSS:
Maak sitecaches en CDN-caches leeg na updates.
Laad de widget in een iframe om stijlen te isoleren als conflicten blijven optreden.
Geen diensten of beschikbaarheid zichtbaar:
Controleer of diensten en personeel actief zijn en aan de locatie zijn toegewezen in FlexBookz.
Controleer verlofinstellingen en personeelsschema's op conflicten.
Boekingen verschijnen niet in de agenda:
Bevestig dat de boekingsinzending een succesrespons teruggeeft in het netwerk-tabblad.
Zorg ervoor dat meldingen en synchronisatie-integraties (Google Calendar, POS) correct zijn geconfigureerd.
Als u praktische hulp nodig heeft, neem dan contact op met de FlexBookz-support via uw dashboard of plan een walkthrough met ons onboardingteam.