Using an iFrame code, you can easily integrate your Bookedin calendar into a Webflow site. Follow the steps below to set it up correctly.
Ensure you have your iFrame code or the iFrame URL ready from Bookedin (via Calendar → Widget/iFrame).
Always use https:// in the iFrame URL (otherwise, Webflow will block the content for security reasons).
Log in to Webflow and open the project where you want to add the calendar.
Navigate to the specific page where the calendar should be placed.
Click the + Add Panel in the left sidebar.
Scroll down to Components and find the Embed element (</> symbol).
Drag the Embed element to the desired location on your page.
A code editor window will open.
Paste your iFrame code (from Bookedin) into the window.
Click Save & Close.
By default, the iFrame scales to 100% width but often requires a fixed height.
You can adjust the height directly in the code (e.g., 900 or 1200px) or use a responsive wrapper for better scaling.
Click Publish in the top right corner → choose your domain → Publish to Selected Domains.
Visit your live site to verify that the calendar loads correctly.
Calendar not loading? Double-check that the embed URL is correct and starts with https://.
Scrollbar visible? Increase the height attribute or use a responsive wrapper to ensure the full calendar fits without internal scrolling.
Embed 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.
Site-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.
