Alle soorten velden die je kan gebruiken
Hieronder vind je een tutorial om de Bookedin iFrame-kalender op een Squarespace website te plaatsen. Ik geef een korte voorbereiding, daarna twee routes (Squarespace 7.1 en Classic) en twee code-voorbeelden (simpele vaste hoogte en een responsive variant).
Zorg dat je de iFrame-code of de iFrame-URL uit Bookedin klaar hebt ( via Kalender → widget/iFrame).
Gebruik altijd https:// in de iFrame-URL (anders blokkeert Squarespace de inhoud).
Log in op je Squarespace account en open je site in de Editor.
Navigeer naar de pagina waar je de kalender wilt plaatsen en klik op Edit.
Klik op het plus-icoon (Add Block) op de plek waar je de kalender wilt.
Kies in het blok-menu More (of scroll naar beneden) en selecteer Code.
In het Code-block plak je je iFrame-code (zie het voorbeeld hierboven).
Klik op Apply om het block op te slaan.
Sleep en positioneer het block; zet de breedte op 100% indien gewenst.
Gebruik de Mobile / Desktop preview knop om te controleren hoe het eruitziet op mobiel.
Klik op Save of Publish om de wijziging live te zetten.
Log in en open de site in de Site Editor.
Ga naar de gewenste pagina en klik op Edit Page.
Klik op een insert-punt en kies Insert Point → More → Code (of kies “Embed” en vervolgens “HTML” als je die optie ziet).
Plak je iFrame-code in het Code-veld.
Sla het blok op en positioneer het waar je wilt.
Controleer de pagina in de preview en publiceer de wijziging.
Blank of foutmelding: controleer of de iFrame-URL daadwerkelijk ingesloten mag worden (X-Frame-Options header). Als Bookedin de embed ondersteunt zou dit geen probleem moeten zijn.
Mixed content: zorg dat de iFrame-URL https:// gebruikt; anders blokkeert Squarespace de inhoud.
Dubbele scrollbalk: verhoog de height of gebruik de responsive wrapper zodat de iFrame geen interne scrollbar toont.
Cache/preview: soms zie je de wijziging niet meteen — publiceer en ververs de pagina in een incognito venster.
Site-breed embed: wil je de kalender in de footer of header? Gebruik dan Site → Settings → Advanced → Code Injection (let op: sommige instellingen of script-invoegingen vereisen een betalend plan). Als je onzeker bent, raad ik aan de kalender op een gewone pagina te plaatsen met een Code-block.
