Microsoft Bookings on Webflow, Squarespace, Wix, Framer, HubSpot

This guide covers putting a Microsoft Bookings shared booking page on sites built with Webflow, Squarespace, Wix, Framer and HubSpot CMS. For each builder you get the native method (Microsoft's iframe or page link) and the plan or editor limits that decide whether it works. A script-based widget alternative is at the end. Budget about 15 minutes per site, most of it spent testing the height on a phone.

The builder steps come from each vendor's help centre as of September 2026. Builders rename menus often, so if a label differs, look for the element called "embed", "code" or "HTML".

What every builder needs from Bookings#

Three things are the same whichever builder you use:

1. A shared booking page. Microsoft only provides embed code for shared booking pages, not for "Bookings with me" personal pages.
2. The link or iframe. In Bookings, pick the page in the left pane and open Booking page. Microsoft's share options include Embed in Your Website, which "allows you to copy the link and the iframe in just one click". The public link looks like https://outlook.office.com/book/YourBusiness@contoso.com/.
3. Public access. Under Booking page → Access control, turn off "Require a Microsoft 365 account from my organization to book". With it on, the frame redirects to Microsoft's sign-in page, which refuses to be framed, and visitors see a blank box.

Use this iframe markup in every builder below. It has a real pixel height, because Microsoft's default height='100%' collapses in most layouts:

<iframe
  src="https://outlook.office.com/book/YourBusiness@contoso.com/"
  title="Book an appointment"
  loading="lazy"
  style="display:block;width:100%;height:1150px;border:0"
></iframe>

1,150 px is a starting point. Go through a full booking and raise it until the details form isn't cut off. Microsoft documents no way for the frame to report its height to your page, so a fixed height is the only native option.

Webflow#

Webflow's Code Embed element accepts HTML, CSS in style tags and JavaScript in script tags. Webflow says you need a Core, Growth, Agency or Freelancer Workspace, or an active Site plan. Each embed can hold up to 50,000 characters.

1. Copy the iframe markup above.
2. Open the Add panel and drag a Code Embed element onto the canvas.
3. Paste the code, then save and close the modal.
4. Select the element and set its width in the Style panel. Webflow notes that appending height="100%" width="100%" to the code lets you size the embed from the Style panel, but a fixed pixel height on the iframe is more predictable for Bookings.
5. Publish, then test on the live site.

Webflow shows a preview on the canvas for iframe code. Script tags only show a placeholder in the Designer and run once you preview or publish. To reuse the embed across pages, turn it into a component. You can also paste the code into a rich text element with the plus icon and custom code button.

Squarespace#

Squarespace uses the Code block. Squarespace says "Adding JavaScript or iframes to code blocks is available in the Core, Plus, Advanced, Business, Commerce Basic, and Commerce Advanced plans."

1. Edit the page, click Add block or +, and choose Code.
2. Click the pencil icon on the block.
3. Paste the iframe markup. Leave Display Source off.
4. Save and view the published page.

Squarespace warns that "sometimes your code won't appear when you're logged in, even if visitors can see it." If the frame is blank in the editor, use Preview in Safe Mode, or check in a private window where you aren't logged in. If a site uses Ajax loading, Squarespace also says it can stop custom code from running until the page is reloaded. Turn Ajax off to test.

A plain link also works on every plan: add a Button block and point it at the booking page URL.

Wix#

Wix has two embed elements. From the editor, click Add Elements → Embed Code and choose one:

• Embed a Site: click the element, choose Enter Website Address, paste the booking page URL and click Apply. This is the quickest option.
• Embed HTML: click the element, choose Enter Code, paste the iframe markup under "Add your code here" and click Apply.

Things Wix states about these elements:

• Only HTTPS URLs and code are displayed. Bookings links are HTTPS, so that's fine.
• "The HTML and URL elements in our editor are iFrames. Therefore, the code or site you are embedding won't be responsive, even if it is originally." Drag the element tall enough for the longest booking step, then check the mobile view in the editor too.
• For code embeds, Wix suggests width="100%" height="100%" so the content fills the element instead of being cropped.

Because of that fixed box, many Wix sites do better with a Button linked to the booking page on mobile.

Framer#

Framer uses the Embed component.

1. Open the Insert menu and search for Embed.
2. Drag the Embed component onto the canvas.
3. Paste the booking page URL into the component. To use the iframe markup instead, put it in the component's HTML section.
4. Set a fixed height on the component for each breakpoint, then publish and test.

Framer notes that "some websites may block embedding through HTTP headers". Microsoft's booking page allows framing when the page is public, so if you see a blank component, check the access control setting described above.

HubSpot CMS#

On HubSpot pages, add the embed through a rich text module:

1. Edit the page and click into a rich text module where the booking page should appear.
2. Use Insert > Embed and paste the iframe markup, or use Advanced > Source code and paste it into the HTML directly.
3. Update the page and preview it logged out.

HubSpot lists the rich text editor as available on all products and plans. If a theme's rich text styles squeeze the frame, the inline width:100% and pixel height in the markup above usually win. If code you paste is changed or removed, ask whoever maintains your HubSpot theme for a module that outputs raw HTML.

Testing checklist#

• Load the published page in a private window on desktop and on a phone.
• Make a real test booking. Confirm it appears in the Bookings calendar and in the staff member's Outlook, and that Microsoft's confirmation email arrives.
• Re-test after any change to access control, services or custom questions. More fields on the form means a taller last step.

Common problems#

Blank frame or "refused to connect". Nearly always the sign-in requirement. Turn off "Require a Microsoft 365 account from my organization to book" and reload. If you are using a very old embed with an /owa/calendar/.../bookings/ address, copy a fresh one: Microsoft moved to /book/ URLs in 2023. Details: /answers/microsoft-bookings-iframe-refused-to-connect.

Cut-off calendar or form. The frame is shorter than the step being shown. Increase the pixel height, and set a separate, taller height for mobile where the builder lets you. See /answers/microsoft-bookings-iframe-height-mobile.

Cramped on phones. Users have reported layout problems inside Microsoft's own page at narrow widths, and your site's CSS can't reach into it. A button that opens the full page is often the better mobile experience.

Content-Security-Policy errors. Hosted builders don't usually block frames, but a reverse proxy or custom headers in front of the site can. The console shows a frame-src violation. Allow Microsoft's hosts:

Content-Security-Policy: frame-src 'self' https://outlook.office.com https://outlook.office365.com

Parent-page CSS has no effect. Styling inside the frame belongs to Microsoft's domain. Colours and logo are set in Bookings itself: see /guides/brand-microsoft-bookings-page.

Doing this with BookingsXP#

BookingsXP gives you a script embed for the same shared booking page, with no Microsoft sign-in or admin consent. The widget resizes to its content, follows your colours, and pushes booking events to your page's dataLayer. Bookings are still created in Microsoft Bookings. BookingsXP is independent and not affiliated with or endorsed by Microsoft.

The snippet is the same everywhere:

<script src="https://bookingsxp.com/embed/v1.js" async></script>
<bookingsxp-widget booking-url="https://outlook.office.com/book/YourBusiness@contoso.com/"></bookingsxp-widget>

If an editor strips unknown tags, use the div form instead: <div data-bookingsxp data-widget="w_8fk2m1qz"></div> (with a saved widget ID from a free account).

Per builder#

• Webflow: paste the snippet into a Code Embed element. The Designer shows a placeholder, and the widget appears once you preview or publish.
• Squarespace: paste it into a Code block on a plan that allows scripts. If Ajax loading is on and the widget only appears after a refresh, turn Ajax off.
• Wix: an Embed HTML element works, but Wix runs it inside its own fixed-size iframe, so the widget can't grow the element and its events stay inside that frame. For tracking, add the snippet with mode="floating" under Settings → Custom Code (placed in Body – end) instead. Wix requires a published site with a connected domain for Custom Code.
• Framer: paste the snippet into the Embed component's HTML section. For a site-wide button, add it under Project Settings → Custom Code → Add Script with mode="floating".
• HubSpot CMS: paste it via Advanced > Source code in a rich text module. If the script is removed, use a module that outputs raw HTML.

If you send a Content-Security-Policy, allow script-src https://bookingsxp.com; frame-src https://bookingsxp.com. See /features/embed and /templates, or start at /sign-up.