Bookedin kalender (iFrame) plaatsen op jouw Webflow website
Met een iFrame-code kun je eenvoudig je Bookedin kalender integreren in een Webflow-site. Hieronder lees je precies hoe je dat doet.
Voor je begint
- checkZorg dat je de iFrame-code of de iFrame-URL uit Bookedin klaar hebt ( via Kalender → widget/iFrame).
- checkGebruik altijd https:// in de iFrame-URL (anders blokkeert Webflow de inhoud).
1
Open je project
- checkLog in op Webflow en open het project waarin je de kalender wilt toevoegen.
- checkGa naar de pagina waar de kalender moet komen.
2
Sleep een Embed-element naar de pagina
- checkKlik in de linkerbalk op het + Add Panel.
- checkScroll naar Components en zoek Embed (</> symbol).
- checkSleep het Embed-element naar de plek op de pagina waar je de kalender wilt tonen.
3
Voeg je iFrame-code in
- checkEr opent een code-venster.
- checkPlak je iFrame-code (uit Bookedin) in het venster.
- checkKlik op Save & Close.
4
Stel breedte & hoogte in
- checkHet iFrame schaalt standaard op 100% breedte, maar krijgt vaak een vaste hoogte.
- checkJe kunt de
heightin de code aanpassen (bijv.900of1200px), of gebruik maken van een responsive variant (zie hieronder).
5
Publiceer je site
- checkKlik rechtsboven op Publish → kies je domein → Publish to Selected Domains.
- checkOpen je site en controleer of de kalender goed wordt geladen.
Handige tips
- checkKalender laadt niet? Controleer of de embed-URL correct is en begint met
https://. - checkScrollbalk zichtbaar? Vergroot de
heightof gebruik de responsive wrapper. - checkEmbed niet zichtbaar in Designer? Webflow laat soms een leeg blok zien in de Editor; bekijk de live Published site om te testen.
- checkPlaatsing site-breed: Wil je de kalender op alle pagina’s (bijv. in de footer)? Voeg dan het embed-codeblok toe in je Master Symbol / Footer component.
Was deze handleiding nuttig?
Stel je vraag aan support