Embed Microsoft Bookings on a WordPress site (3 ways)

This guide shows three ways to put a Microsoft Bookings shared booking page on a WordPress site: a button that links to the page, the Microsoft iframe inside a Custom HTML block, and a plugin. It is written for whoever maintains the site, whether that is a marketer in the block editor or a developer. Each method takes 10 to 20 minutes. Bookings still land in the Bookings calendar and the staff member's Outlook either way. The methods differ in how the page looks, how it behaves on phones and what you can measure.

Before you start#

You need:

• A shared booking page that is published and bookable by the public. Microsoft only offers embed code for shared pages. "Bookings with me" personal pages get a link, not an iframe (see /answers/embed-bookings-with-me).
• The public URL of the page. In Bookings, pick the page in the left pane and open Booking page. Microsoft's share options there are Copy Link, Share on Social Media, Share via Email and Embed in Your Website, which "allows you to copy the link and the iframe in just one click". Current links look like https://outlook.office.com/book/YourBusiness@contoso.com/.
• Access control set to allow outside customers. On Booking page → Access control, the setting "Require a Microsoft 365 account from my organization to book" must be off if the public will book. With it on, the page redirects to Microsoft's sign-in page, which refuses to load in a frame, and you get a blank box.
• Rights to add HTML in WordPress (details in method 2).

Test the plain link in a private browser window first. If it doesn't work there, no embed will fix it.

Method 1: Link or button to the Bookings page#

This is the most reliable option and the one that looks best on phones. Visitors book on Microsoft's full-screen page in a new tab, and nothing on your site can break it.

1. Edit the page and add a Buttons block.
2. Type the label, for example "Book a consultation".
3. Select the button, click the link icon and paste your booking page URL.
4. Open the link settings and turn on Open in new tab, so visitors can come back to your site afterwards.
5. Update the page and click the button in a private window to check it.

To send people straight to one service, use that service's own link instead of the page link. Microsoft's FAQ says each service has its own URL under Service booking page in the service's details. See /answers/microsoft-bookings-direct-link-to-service.

Two limits to know. Microsoft's page can't send visitors back to your site after they book, as of September 2026 (see /answers/microsoft-bookings-thank-you-page-redirect). Tracking tools can count button clicks, but not completed bookings.

Method 2: The Microsoft iframe in a Custom HTML block#

This keeps visitors on your page. Microsoft's embed code is a plain iframe. Pages generated from the embed option usually look like this (Microsoft doesn't document the exact snippet):

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

The height='100%' is the reason so many WordPress embeds show up as a thin strip. A percentage height only works if the parent element has a fixed height, and a WordPress content column doesn't. Give it a real height instead.

Steps#

1. Copy the iframe code from Booking page in Bookings.
2. In the block editor, add a Custom HTML block where the booking page should go. Classic editor: switch to the Text tab. Page builders such as Elementor or Divi: use their HTML or code widget.
3. Paste this version, with your own URL:

<div class="ms-bookings-embed">
  <iframe
    src="https://outlook.office.com/book/YourBusiness@contoso.com/?ismsaljsauthenabled"
    title="Book an appointment"
    loading="lazy"
  ></iframe>
</div>

4. Add the sizing CSS. Put it in your theme's Additional CSS panel (the Customizer for classic themes, the Site Editor's styles for block themes), or in a style tag in the same Custom HTML block:

.ms-bookings-embed {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.ms-bookings-embed iframe {
  display: block;
  width: 100%;
  height: 1150px;
  border: 0;
}

@media (max-width: 700px) {
  .ms-bookings-embed iframe {
    height: 1500px;
  }
}

5. Preview the page and go through a whole booking on desktop and on a phone: service, date, time and the details form. Raise the heights until nothing is cut off at the step with the most content. The numbers above are a starting point, not a rule. The height depends on how many services, staff and form fields your page has.

Why you need a fixed height#

The iframe is served from Microsoft's domain, so your page can't see how tall its content is. Microsoft documents no resize messages, so an auto-height script has nothing to read. You are left with a fixed height tall enough for the longest step, and some empty space on the shorter steps. Users have also reported mobile layout problems inside Microsoft's page itself, such as cut-off time pickers, that CSS on your site can't reach. See /answers/microsoft-bookings-iframe-height-mobile.

When WordPress strips the iframe#

If the block is empty after you save, WordPress removed the code:

• WordPress.com: iframe, script and style tags in a Custom HTML block need a paid plan with hosting features activated. WordPress.com says a paid plan alone is not enough: at least one plugin has to be installed to activate hosting features.
• Self-hosted WordPress: only users with the unfiltered_html capability can save iframes. On a multisite network that normally means Super Admins only, so site Administrators and Editors lose the code when they save.
• Security plugins and hardening settings sometimes filter iframes out of post content or send a Content-Security-Policy header that blocks outside frames. Check the plugin's content filtering options, or see the CSP fix below.

Plugins that talk to Microsoft Graph#

Some WordPress plugins take a different route. Instead of framing Microsoft's page, they call the Microsoft Graph API to read availability and create appointments, then draw their own booking form in WordPress. That gives you full control over the look, but setup is heavier:

• An app registration in Microsoft Entra ID, with Bookings and Calendars permissions.
• Admin consent from a tenant administrator. At least one of these plugins asks for a Global Administrator during setup.
• A client secret stored in your WordPress database, which you have to rotate before it expires.
• Scheduling rules that the plugin has to re-implement, and that can differ from what Bookings itself would offer.

In many organizations the admin-consent step is where the project stalls. If your IT team won't grant tenant-wide Bookings permissions to a website plugin, stay with a link, an iframe or a widget that uses the public page. /compare/bookingsxp-vs-microsoft-bookings-iframe-wrappers compares these approaches.

Testing checklist#

• Open the page logged out, in a private window, on desktop and on a phone.
• Make a real test booking. Check that it appears in the Bookings calendar and the staff member's Outlook calendar, and that the confirmation email arrives.
• Clear any page cache (plugin, host or CDN) after changing the embed, then test again.
• If you changed access control or other Bookings settings, allow a few minutes before testing. Microsoft says some business-setting changes take up to 10 minutes to apply.

Common problems#

Blank box, or "login.microsoftonline.com refused to connect". The booking page requires sign-in. Turn off "Require a Microsoft 365 account from my organization to book" under Booking page → Access control, save, and reload. Microsoft's sign-in page blocks framing, and you can't override that from WordPress. More causes: /answers/microsoft-bookings-iframe-refused-to-connect.

"outlook.office365.com refused to connect" on an old embed. Microsoft changed the page URL format in 2023, from /owa/calendar/.../bookings/ to /book/.../. Copy a fresh iframe from Booking page and replace the old one.

Cut off at the bottom, or a double scrollbar. The iframe is too short for the longest step. Increase the height, and use a larger value in the mobile media query.

Squashed or unusable on phones. Check that no theme container adds a fixed width or side padding around the block. If Microsoft's page itself breaks at narrow widths, link to it on mobile instead. If your theme or page builder has per-device visibility settings, show the iframe on desktop and a button on mobile.

Blocked by Content-Security-Policy. Open the browser console. If you see a frame-src violation, add Microsoft's hosts to the policy your security plugin, host or server sends:

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

Merge this into your existing policy rather than replacing it. Where the header is set depends on the setup: a security plugin, an .htaccess or Nginx rule, or your host's control panel.

Bad Request after adding tracking parameters. Query strings such as UTM tags have broken Bookings pages in the past. Test any tagged URL before using it in an embed or a campaign. See /answers/microsoft-bookings-utm-parameters-bad-request.

Doing this with BookingsXP#

The third way is the BookingsXP WordPress plugin. It puts a booking widget for your existing shared booking page on the page, with no Microsoft sign-in, app registration or admin consent: you paste the public Bookings link. Bookings are still created in Microsoft Bookings, and Microsoft still sends its confirmation email. BookingsXP is independent and not affiliated with or endorsed by Microsoft.

Install#

1. Download the plugin zip from bookingsxp.com.
2. In WordPress, go to Plugins → Add New → Upload Plugin, choose the zip, then Install Now and Activate.

Add it with the block or a shortcode#

In the block editor, add the BookingsXP booking widget block and paste your Microsoft Bookings URL, or a widget ID if you saved a widget in a free account. Choose inline, popup button or floating button. In the classic editor, widgets or page builders, use the shortcode:

[bookingsxp url="https://outlook.office.com/book/YourBusiness@contoso.com/"]

[bookingsxp widget="w_8fk2m1qz" mode="popup" button_text="Book a call"]

For a "Book" button on every page, turn on Load on every page under Settings → BookingsXP. It adds a floating button site-wide.

What changes compared with the iframe#

• The inline widget resizes to its content, so there's no fixed height to guess and no cut-off step.
• Templates, accent colour and light or dark theme follow your site. Link-only use shows a small "Powered by BookingsXP" badge, and paid plans remove it.
• Each step pushes an event to window.dataLayer, for example bookingsxp.booking_completed, so your existing Google Tag Manager setup can count completed bookings, not just clicks. redirect_url sends visitors to your own thank-you page.

If your site sends a Content-Security-Policy, allow the widget with script-src https://bookingsxp.com; frame-src https://bookingsxp.com. If an optimisation plugin delays or combines scripts, exclude bookingsxp.com/embed/v1.js. More at /features/embed, or start free at /sign-up.