HomeAdd a widgetWebflow
Booking Calendar for Webflow
A booking calendar styled to match your Webflow site, live with one copy-paste into a Code Embed, with slots in each visitor’s timezone and Google Calendar sync once you connect Google Calendar.
Needs a Webflow plan that allows custom code: a paid Workspace or an active Site plan
Free plan with no time limit, no card.
See it working
This is a real Sorraia booking calendar, loaded by the same embed script you paste and showing times in your own timezone. Pick a slot to see the confirmation screen; nothing is booked.
How to add a booking calendar to Webflow
Drop a Code Embed into the section where people should book and the calendar renders in your layout, not on a booking page somewhere else. Two Webflow behaviours make a working embed look broken: the Designer canvas shows only a placeholder for any Code Embed that holds a script, and Preview runs no custom code until you switch it on. Publish, or flip the toggle, and the calendar is there.
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.
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.
In the Designer, open the Add panel → Elements → Custom Code and drag a Code Embed element to where the widget should sit. Quick find (Cmd/Ctrl + E, then type “embed”) gets you there too.
Paste the Sorraia snippet — only the snippet, with no <html>, <head> or <body> tags — and click Save & Close.
The canvas shows a placeholder instead of the widget: Webflow does not run a Code Embed that contains a script in the Designer.
To see it before publishing, open Preview and switch on the Enable custom code toggle in the bottom-left corner — custom code is off in Preview by default.
Click Publish and select the domain. Nothing reaches visitors until you do.
Where these steps come from:1234
Add the DNS TXT record where the domain’s DNS lives, or paste the meta tag into Site settings → Custom code → Head code — Webflow says meta tags always go in the head — and publish.5
A Code Embed needs a Core, Growth, Agency or Freelancer Workspace, or an active Site plan. Your own domain is a separate gate: Starter publishes only to .webflow.io, Basic adds a custom domain, and Premium — CMS and Business, merged in May 2026 — isn’t needed for a static embed.267
Worth knowing for this one
- Webflow’s own scheduling article embeds Calendly the same way: Add panel → Custom Code → Code Embed, or Quick find with Cmd/Ctrl + E and “embed”.81
- Each Code Embed holds up to 50,000 characters and the limit can’t be raised. The Sorraia snippet is a few hundred, so the old 10,000-character figure some guides still quote never comes into it.2
What Webflow already has
Webflow’s help sends scheduling to a third-party tool: its own guide puts Calendly on a site by a link, a Code Embed or code before the closing body tag. Any of those means a second account and a booking page in another company’s design. A Sorraia calendar takes the same Code Embed route, starts from the site’s brand-kit colours, and puts every client site’s bookings in one dashboard instead of one scheduling account per client.8
What’s included
- Slots in each visitor’s own timezone
- Google Calendar sync when you connect Google Calendar
- An .ics file with every confirmation
- A Google Meet link when your calendar uses one
- Styled to match: colours from the site’s brand kit
Free plan with no time limit, no card.
More detail in the Help Center: Calendars & bookings · Embedding on your website
Questions
Where does Webflow say a booking embed should go?
In a Code Embed element. Webflow’s own scheduling guide drags one in from the Custom Code section of the Add panel, pastes the embed code, and clicks Save & Close — the same moves as a Sorraia calendar.
Why does Preview show a canvas.webflow.com address?
With custom code switched on, Webflow serves the preview from a {shortName}.canvas.webflow.com subdomain so that scripts from other hosts can load. Visitors see the calendar on your own domain once you publish.
Which Webflow plan runs the booking calendar?
Any plan that allows custom code: a Core, Growth, Agency or Freelancer Workspace, or an active Site plan on the site. To publish on your own domain you need a paid Site plan such as Basic; the free Starter plan publishes only to webflow.io.
Can I change the calendar later without editing the Webflow page?
Yes. Its hours, questions and colours live in Sorraia, and the embed loads the current version each time, so an edit in the calendar builder reaches the live page without anyone reopening the Code Embed.
What happens to the calendar if the client’s Site plan lapses?
Cancelling a Site plan unpublishes the site from its custom domain and from webflow.io at the end of the billing period, so the page goes offline with the calendar on it. The Code Embed stays in the project, locked from editing until a paid Site plan returns, unless the site sits in a paid Workspace.
Sources
- The Add panel · help.webflow.com
- Custom code embed · help.webflow.com
- Preview mode · help.webflow.com
- Publishing a site · help.webflow.com
- Custom code in head and body tags · help.webflow.com
- Choosing a Site plan · help.webflow.com
- May 2026 plan changes · help.webflow.com
- A calendar with Calendly · help.webflow.com
- Custom code in previews · help.webflow.com
- Downgrading a Site plan · help.webflow.com
Each page read and checked on 20 October 2026.
Add a booking calendar to Webflow
Build it in Sorraia, put it live on your Webflow site with one copy-paste, and change it later without touching the embed again.