Websites & CMS
Microsoft Bookings on WordPress
Embedding the standard Microsoft Bookings page in WordPress means a fixed-height iframe of Microsoft's full-page app. The BookingsXP plugin puts your Bookings availability into a widget that resizes to its content, matches your theme's accent colour, and reports each step to the analytics your site already runs.
- Plan
- Plan: FreeWorks on every plan, including Free ($0, no card).
- In short
- A plugin with a block, a [bookingsxp] shortcode and a site-wide floating button, for Microsoft Bookings on WordPress.
- Microsoft Bookings
- Stays your system of record. Bookings land in Outlook and Teams and Microsoft sends the invites and reminders.
How it works
What happens with WordPress
- The plugin renders a <bookingsxp-widget> element on the server, from the block or the shortcode, and enqueues the loader script with async only on pages that show a widget.
- Every attribute is sanitised in PHP: modes, templates and themes against allow-lists, accents as hex colours, redirect URLs as http(s).
- Without JavaScript, a saved widget falls back to a plain iframe and a link-only widget to a link to your Bookings page.
- Settings → BookingsXP holds a default widget ID or Bookings URL, a "Load on every page" switch that adds a site-wide floating button, and a script base URL for development.
Setup
Set up WordPress
Step 1: Install the plugin
Download bookingsxp-wordpress.zip from bookingsxp.com/downloads/bookingsxp-wordpress.zip, then in WordPress go to Plugins → Add New → Upload Plugin, choose the zip, install and activate.
Step 2: Add the block or the shortcode
In the block editor, add "BookingsXP booking widget" and fill in the widget ID or Bookings URL and the mode in the sidebar. In classic editors, widgets or page builders, use the shortcode.
Shortcode [bookingsxp url="https://outlook.office.com/book/YourBusiness@example.com/"] [bookingsxp widget="w_8fk2m1qz"] [bookingsxp widget="w_8fk2m1qz" mode="popup" button_text="Book a call" accent="#0f766e"]Step 3: Use the options you need
Shortcode attributes: widget, url, mode (inline, popup, floating), button_text, template (classic, compact, minimal, split, week, stepper, cards), theme (light, dark, auto), accent, service (ID or /s/ code), redirect_url (supports {booking_id}, {service}, {start}) and height (initial pixels).
Text [bookingsxp widget="w_8fk2m1qz" template="week" theme="auto" redirect_url="/thank-you?ref={booking_id}"]Step 4: Optional: a floating button on every page
Settings → BookingsXP → set a Default widget ID (or Default Microsoft Bookings URL), tick "Load on every page", and set the Floating button text. The plugin adds the button in the footer of every page.
Outcomes and caveats
What you get
The result
- A booking widget that fits your layout and resizes to its content, inline or as a popup or floating button.
- bookingsxp.* dataLayer events and GA4 events on your WordPress pages, with no extra code.
- Works in Gutenberg, the classic editor, widget areas and page builders that accept shortcodes.
- A script of about 8 KB gzipped, loaded async and only where needed.
Good to know
Limits and caveats
- Premium templates (split, week, stepper, cards) need a saved Pro widget. In link-only mode they fall back to classic.
- The block exposes the widget, URL, mode and button text; use the shortcode for template, theme, accent, service and redirect options.
- Caching and optimisation plugins that delay or combine scripts can hold the loader back. Exclude bookingsxp.com/embed/v1.js from JavaScript delay if the widget appears late.
- Consent plugins that block third-party scripts need BookingsXP allowed, or the widget will not load until consent is given.
FAQ
WordPress questions
Start free, no card
One widget, three templates, GTM and GA4 events and attribution in every booking. No card, no time limit.