Kalender toevoegen op je Squarespace website

Bookedin kalender (iFrame) plaatsen op jouw Squarespace website

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).

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 Squarespace de inhoud).

Optie A: Squarespace 7.1 (meest voorkomend)

1. 1
   Log in op je Squarespace account en open je site in de Editor.
2. 2
   Navigeer naar de pagina waar je de kalender wilt plaatsen en klik op Edit.
3. 3
   Klik op het plus-icoon (Add Block) op de plek waar je de kalender wilt.
4. 4
   Kies in het blok-menu More (of scroll naar beneden) en selecteer Code.
5. 5
   In het Code-block plak je je iFrame-code (zie het voorbeeld hierboven).
6. 6
   Klik op Apply om het block op te slaan.
7. 7
   Sleep en positioneer het block; zet de breedte op 100% indien gewenst.
8. 8
   Gebruik de Mobile / Desktop preview knop om te controleren hoe het eruitziet op mobiel.
9. 9
   Klik op Save of Publish om de wijziging live te zetten.

Optie B: Squarespace (Classic)

1. 1
   Log in en open de site in de Site Editor.
2. 2
   Ga naar de gewenste pagina en klik op Edit Page.
3. 3
   Klik op een insert-punt en kies Insert Point → More → Code (of kies “Embed” en vervolgens “HTML” als je die optie ziet).
4. 4
   Plak je iFrame-code in het Code-veld.
5. 5
   Sla het blok op en positioneer het waar je wilt.
6. 6
   Controleer de pagina in de preview en publiceer de wijziging.

Handige tips

• checkBlank 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.
• checkMixed content: zorg dat de iFrame-URL https:// gebruikt; anders blokkeert Squarespace de inhoud.
• checkDubbele scrollbalk: verhoog de height of gebruik de responsive wrapper zodat de iFrame geen interne scrollbar toont.
• checkCache/preview: soms zie je de wijziging niet meteen, publiceer en ververs de pagina in een incognito venster.
• checkSite-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.