Add a booking calendar to any website

How to add a booking calendar to any website

Paste it into the page where you want to be booked and the calendar renders right there, in your own layout, instead of sending visitors to a booking page with someone else’s name on it. Your hours live in Sorraia and the open times load from it as the visitor picks a day, so a change of availability never means editing or redeploying the site. Nothing about it depends on what built the page.

1. In Sorraia, add the website and verify it — a DNS TXT record, or a meta tag in your homepage’s <head>. Verification is what lets you attach a widget to that site, so it comes before there is anything to paste.

2. Save the calendar and the Copy Embed Code popup appears; the Install wizard on the calendar’s row on the Calendars page does the same job with a verification step.

3. Copy the snippet from Sorraia. It already has your widget’s id and the right URL baked in, so copy it rather than retyping it.

4. Open the .html file (or the template, component, or partial) for that page and paste all three lines at the spot in the body where the widget should appear.

5. Save and deploy.

6. Load the live page. If nothing renders, check that it is on the domain the widget belongs to and that the domain shows as verified in Sorraia, then open the browser console, where a blocked script or a loader warning shows up.

Where these steps come from:¹

Worth knowing for this one

• Your own timezone is set in the calendar’s Schedule & Hours; visitors see every slot in theirs, detected automatically, with a dropdown to change it.²
• If a template moves the script above its <div>, the calendar waits for DOMContentLoaded — the moment the HTML has been completely parsed — and mounts then, so it still appears.³