Where do I find the embed code for Microsoft Bookings?

Where to click#

1. Open Bookings and, under Shared booking pages, select the page you want to put on your site.
2. In the left pane, select Booking page.
3. Make sure the page is published. An unpublished page gives you a link that shows nothing to visitors.
4. Use the embed option at the top of the Booking page (Microsoft's sharing doc calls it Embed in your website; community answers from 2019 through April 2026 describe it as an Embed button that shows the link and the iframe code).
5. Copy the iframe code and paste it into an HTML or "custom code" block on your site.

Microsoft has not published a current screenshot of this button, so the label may differ slightly in your tenant. If you don't see it, check that you opened a shared page and not your personal page. The personal page share options are only copy link, share via email and email signature (see embedding a Bookings with me page).

What the code looks like#

Microsoft doesn't document the snippet itself, but the code the Embed option produces (as copied by many users and seen on public sites) looks like this:

<iframe src='https://outlook.office.com/book/YourBusiness@contoso.com/?ismsaljsauthenabled'
        width='100%' height='100%' scrolling='yes' style='border:0'></iframe>

Pages created before mid-2023 used https://outlook.office365.com/owa/calendar/YourBusiness@contoso.com/bookings/. Microsoft changed the customer URL to the /book/ format in 2023 (message center post MC528980) and said old links redirect automatically. If an old embed stopped working, replace its src with the link you copy today.

Three things to fix before you publish#

• Height. The observed default uses height='100%', which collapses to a short box unless the parent element has a set height. Give the iframe a pixel height instead. Details and responsive CSS are in why the embedded page is cut off or broken on mobile.
• Sign-in. If Require a Microsoft 365 account from my organization to book is on, the frame shows a blank box or "refused to connect" because Microsoft's sign-in page can't be framed. See the refused-to-connect fix.
• Query strings. Don't add UTM or other parameters to the src. Extra parameters have produced "Bad Request" pages for several users (more in why UTM parameters break Bookings links).

What the iframe can't do#

As of September 2026, the embed is a plain cross-origin iframe of Microsoft's page. You can't style it with your own CSS, it doesn't resize itself, and it doesn't tell your page when someone books, so Google Tag Manager on your site can't see completed bookings. For platform-specific steps, see the guides for WordPress and Webflow, Squarespace, Wix and other builders.

Doing this with BookingsXP#

BookingsXP gives you a script embed for the same shared booking page: paste your public Bookings link into <bookingsxp-widget booking-url="…"> and the inline widget sizes itself to its content, uses your brand colours, and pushes booking events to your dataLayer. Bookings still land in Microsoft Bookings and Outlook as before, and there is no Microsoft sign-in or admin consent involved. See the embed feature or start on the free plan. BookingsXP is independent and not affiliated with or endorsed by Microsoft.