HomeAdd a widgetWebflow
Add a booking calendar to Webflow
Let visitors book you straight from Webflow. Set your real working hours — split days included — and the widget offers slots in the visitor’s own timezone, checking your connected calendar so it never double-books you.
Free plan, no card. Paid plans start at $19 a month.
Why do it this way on Webflow
Drop the Code Embed into the section where the calendar belongs and it renders inside your layout, in the same document, with your own styles reaching it. Two Webflow behaviours will make you think it failed: the Designer canvas never runs script tags, and Preview does not run custom code unless you switch on the Enable custom code toggle. Neither is a problem with the widget — publish, or flip the toggle, and it is there.
See it working
This is a real Sorraia booking calendar — the one we use for product demos, embedded here exactly the way you would embed yours. Pick a slot and it books.
How to add a booking calendar to Webflow
A widget that sits in the page flow goes in a Code Embed element, dropped exactly where you want it in the layout. Webflow’s glossary still also calls it the Embed component, so guides naming an “Embed element” mean the same thing.
Webflow words the custom-code gate as: a Core, Growth, Agency or Freelancer Workspace, or an active Site plan on the site. Publishing to your own domain is the separate gate, and that needs a Site plan — minimum Basic; the free Starter plan publishes only to a .webflow.io subdomain. Custom code is not a top-tier feature: Basic is enough. Webflow re-tiered in May 2026 and merged the CMS and Business Site plans into one called Premium, so any guide telling you to buy a “CMS plan” or a “Business plan” is naming plans that no longer exist for new purchases.
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 (the + icon) → Advanced and drag a Code Embed element to the spot in the layout where the widget should sit. Quick find (Ctrl/Cmd + E) and typing “Embed” gets you there too.
Paste the Sorraia snippet into the code editor and save it (the control reads Save & close).
The canvas will show a grey placeholder rather than the widget — script tags do not execute on the Designer canvas.
Click the Preview “play” icon in the top bar (Cmd/Ctrl + Shift + P), then switch on the Enable custom code toggle in the bottom-left corner. Custom code is off in Preview by default, so without that toggle you still see nothing.
Click Publish. Nothing reaches real visitors until you do.
What you get
Let visitors book you straight from Webflow. Set your real working hours — split days included — and the widget offers slots in the visitor’s own timezone, checking your connected calendar so it never double-books you.
Split days, not one block
A working day is an ordered list of up to four windows, so 9:00–12:00 plus 13:00–17:00 is one calendar rather than a compromise — the lunch gap serves no slots at all. The honest limit: that window list applies to every working day you tick. Split days are supported; giving Monday different hours from Tuesday is not.
Slots in the visitor’s own timezone
The widget detects the visitor’s timezone in their browser and renders every slot in it, with the zone named and changeable from a dropdown — and if their zone is not in the list, it gets added rather than snapping them to a wrong one. Nobody has to work out in their head whether your 3pm is their 3pm, which is the most common way a booking gets missed.
It fails safe, so it never double-books
When a host has a calendar connected, busy time is checked before a slot is offered. If that check cannot complete — the provider is down, the token is stale — the day is treated as busy rather than offered. You may occasionally show less availability than you have; you will not get booked over something.
Name and email are yours to rename
The built-in Name and Email rows are ordinary rows in the field list: rename them, reorder them, put your own questions above them. The booking payload keeps its fixed shape underneath, so renaming a label can never break a workflow that reads it.
Every booking gets a manage link
The confirmation carries a token link the guest uses to reschedule or cancel — rescheduling keeps the same link working, cancelling retires it, so a cancelled meeting’s link stops being a working key the moment the meeting is off.
More detail in the Help Center: Calendars & bookings · Embedding on your website
Things worth knowing about Webflow
- Scripts do not execute on the Designer canvas — you get a placeholder box — and Preview does not run custom code either unless you switch on the Enable custom code toggle in the bottom-left corner. Between the two, a perfectly working widget can look broken all the way up to Publish.
- With custom code enabled in Preview, Webflow serves the site from a different origin — a {shortName}.canvas.webflow.com subdomain — rather than your own domain. Worth knowing before you conclude something is wrong: what you are testing in Preview is not the hostname your visitors will be on.
- As of August 2020, newly published Webflow sites include jQuery 3.5.1, and Webflow warns that loading another copy in custom code can conflict with it.
- Each Code Embed and each custom-code field caps at 50,000 characters and the limit cannot be raised. A loader snippet is a few hundred characters, so this only bites if you paste an entire inlined bundle.
- For a floating launcher, prefer Footer code over a Code Embed: any ancestor element carrying a transform, filter, perspective or will-change becomes the containing block for fixed-position descendants, and Webflow Interactions add transforms routinely — which would pin the launcher inside that div instead of the viewport.
Questions
Can I have a lunch break, or two separate blocks in a day?
Yes — that is exactly what the windows are for. A day holds up to four working-hours windows, so a morning block and an afternoon block is the normal setup rather than a workaround, and the gap between them offers nothing. What it does not do is per-day hours: the same window list applies to every day you have ticked as a working day.
What timezone do visitors see?
Their own, detected in their browser, with the zone shown on the widget and changeable if they are travelling. Your own timezone is displayed alongside so both sides can see what they are agreeing to.
Does it check my real calendar?
Yes, when you connect one — Google Calendar today. Busy time is read before slots are offered, and if that read fails the day is treated as busy rather than offered, so an outage costs you a few visible slots instead of a double booking. Multi-host modes like round-robin and collective scheduling are available on organisation accounts.
Which Webflow plan do I need?
To run the widget on your own domain, a Basic Site plan or higher. Webflow gates custom code on having a Core, Growth, Agency or Freelancer Workspace or an active Site plan; the custom domain is the separate thing a Site plan buys, and the free Starter Site plan publishes only to a .webflow.io subdomain. Note that Webflow merged the old CMS and Business plans into Premium in May 2026 — you do not need Premium for this.
The embed shows an empty grey box, and Preview does not help. Did I do it wrong?
No — two separate Webflow behaviours are stacking up. Script tags never execute on the Designer canvas, so you get a placeholder there by design. And Preview does not run custom code by default: once you are in preview mode, click the Enable custom code toggle in the bottom-left corner, or turn on “Run custom code in Preview” in Site settings → Custom code so it stays on. Publishing and opening the live URL always shows the real thing.
Add a booking calendar to Webflow
Build it in Sorraia, paste one line into your Webflow site, and change it later without touching the embed again.