Embedding the Bookedin calendar (iFrame) on your Webflow website
Using an iFrame code, you can easily integrate your Bookedin calendar into a Webflow site. Follow the steps below to set it up correctly.
Before you begin
- checkEnsure you have your iFrame code or the iFrame URL ready from Bookedin (via Calendar → Widget/iFrame).
- checkAlways use https:// in the iFrame URL (otherwise, Webflow will block the content for security reasons).
1
Open your project
- checkLog in to Webflow and open the project where you want to add the calendar.
- checkNavigate to the specific page where the calendar should be placed.
2
Add an Embed element to the page
- checkClick the + Add Panel in the left sidebar.
- checkScroll down to Components and find the Embed element (
</>symbol). - checkDrag the Embed element to the desired location on your page.
3
Insert your iFrame code
- checkA code editor window will open.
- checkPaste your iFrame code (from Bookedin) into the window.
- checkClick Save & Close.
4
Set width & height
- checkBy default, the iFrame scales to 100% width but often requires a fixed height.
- checkYou can adjust the height directly in the code (e.g.,
900or1200px) or use a responsive wrapper for better scaling.
5
Publish your site
- checkClick Publish in the top right corner → choose your domain → Publish to Selected Domains.
- checkVisit your live site to verify that the calendar loads correctly.
Handy Tips
- checkCalendar not loading? Double-check that the embed URL is correct and starts with https://.
- checkScrollbar visible? Increase the height attribute or use a responsive wrapper to ensure the full calendar fits without internal scrolling.
- checkEmbed not visible in Designer? Webflow often shows an empty block within the Designer view to save resources. Always check the Published site for the actual result.
- checkSite-wide placement: Do you want the calendar on every page (e.g., in the footer)? Add the embed code block to a Component (formerly known as Symbols) or your Footer component.
Was this guide helpful?
Ask support a question