BookingsXP

Websites & CMS

Embed Microsoft Bookings in Elementor

Elementor is a page builder on WordPress, so the dependable route is the BookingsXP WordPress plugin and its [bookingsxp] shortcode in Elementor's Shortcode widget. Your Microsoft Bookings calendar renders in the page, resizes to its content and sends each booking step to the tags your site already runs.

Try it with your linkWordPress docs
Integration
Elementor
Plan: Free
Works on every plan, including Free ($0, no card).
In short
The BookingsXP shortcode in Elementor's Shortcode widget, the HTML widget for the raw embed, and a floating button site-wide or on chosen pages.
Microsoft Bookings
Stays your system of record. Bookings land in Outlook and Teams and Microsoft sends the invites and reminders.
Trademarks
Elementor is a trademark of Elementor Ltd.. BookingsXP is independent and not affiliated with or endorsed by Elementor.

What happens with Elementor

  • The plugin's shortcode outputs a <bookingsxp-widget> element on the server and enqueues the loader, async, only on pages that show a widget. Elementor's free Shortcode widget runs it like any other shortcode.
  • Elementor's free HTML widget writes your code straight into the page, so a hand-written snippet also runs inline. Use it for options the shortcode does not have, such as locale, staff and prefill.
  • Both run on your own domain, so the loader pushes to the dataLayer your GTM uses and reads the visit's UTM parameters.
  • For a button on every page, the plugin's "Load on every page" setting adds a floating button site-wide. Elementor Pro's Custom Code can add one to chosen pages instead.

Set up Elementor

6 steps. Names of menus and buttons are as they appear today; vendors rename things, so look for the closest match.

  1. 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.

  2. Step 2: Add a Shortcode widget

    Edit the page with Elementor, drag the Shortcode widget onto the canvas and enter the shortcode in the Content tab. Use your widget ID, or url with your public Bookings link if you have no account.

    Shortcode
    [bookingsxp widget="w_8fk2m1qz"]

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

[bookingsxp widget="w_8fk2m1qz" mode="popup" button_text="Book a call" accent="#0f766e"]

  3. Step 3: Or: the HTML widget

    Drag the HTML widget in and paste the script and element. Elementor restricts this widget to administrators by default, because it can run any code.

    HTML
    <script src="https://bookingsxp.com/embed/v1.js" async></script>
<bookingsxp-widget widget="w_8fk2m1qz" locale="en-GB" template="compact"></bookingsxp-widget>

  4. Step 4: A floating button everywhere, or on chosen pages

    Everywhere: Settings → BookingsXP, set a Default widget ID, tick "Load on every page" and set the Floating button text. Chosen pages, with Elementor Pro: Elementor → Custom Code → Add New Custom Code, Location <body> - End, paste the script and a floating element, and set Conditions under Publish. Use one or the other, not both.

    Elementor Custom Code
    <script src="https://bookingsxp.com/embed/v1.js" async></script>
<bookingsxp-widget widget="w_8fk2m1qz" mode="floating" button-text="Book now" accent="#4f46e5"></bookingsxp-widget>

  5. Step 5: Open the booking dialog from your own Elementor button

    Give the Button widget a CSS ID such as book-demo (Advanced tab), then add this to an HTML widget on the same page. The widget opens in its own accessible dialog.

    HTML
    <script src="https://bookingsxp.com/embed/v1.js" async></script>
<script>
  document.addEventListener("click", function (e) {
    if (e.target.closest("#book-demo") && window.BookingsXP) {
      e.preventDefault();
      BookingsXP.open({ widget: "w_8fk2m1qz", accent: "#4f46e5" });
    }
  });
</script>

  6. Step 6: Test on the live page

    Elementor notes that shortcodes often do not display in the editor. Preview in a new tab or open the published page, step through the widget, and check GTM Preview for bookingsxp.* events.

Outcomes and caveats

What you get

  • A booking widget inside any Elementor layout or template, inline or as a popup or floating button.
  • bookingsxp.* dataLayer and GA4 events on your Elementor pages, with the campaign written into each booking's notes.
  • The same shortcode keeps working if you change theme or stop using Elementor.

Limits and caveats

  • The BookingsXP block is for the WordPress block editor and does not appear in Elementor; use the Shortcode widget.
  • Element Caching, an Elementor feature that is off by default, serves stored widget output without running the shortcode, so the loader may not be added. Leave the Shortcode widget's Cache Settings on Inactive, as Elementor advises for shortcodes.
  • Optimisation plugins and services that delay or combine scripts, such as Cloudflare Rocket Loader, can hold the loader back until a visitor interacts. Exclude bookingsxp.com/embed/v1.js.
  • We have not tested the widget inside Elementor Pro Popups. Use the widget's popup mode or BookingsXP.open() from your button instead.

Elementor questions

Something not covered? Email hello@bookingsxp.com.

Start free, no card

One widget, four templates, GTM and GA4 events and attribution in every booking. No card, no time limit.

Start freeTry it with your link

No Microsoft sign-in or admin consent. Free plan, no card.