Quickstart

BookingsXP puts your public Microsoft Bookings page into a widget that fits your site and reports each booking step to your analytics. Microsoft Bookings stays the system of record: appointments land in Outlook and Teams, and Microsoft sends the invites and reminders as it does today.

You need one of two things:

• A public Bookings page link, such as https://outlook.office.com/book/Contoso@contoso.com/. No account, no Microsoft sign-in and no admin consent.
• A saved widget ID such as w_8fk2m1qz, from a free BookingsXP account. It adds templates, tracking IDs, attribution reports and a dashboard.

1. Add the script#

Add the loader once per page, anywhere in the HTML. It is loaded async, so it does not block rendering.

<script src="https://bookingsxp.com/embed/v1.js" async></script>

Including it twice is harmless: the second copy only rescans the page for new widgets.

2. Add the widget#

Link-only (no account)#

Paste your public Microsoft Bookings page link into booking-url:

<bookingsxp-widget
  booking-url="https://outlook.office.com/book/Contoso@contoso.com/"
  template="classic"
  accent="#4f46e5"
></bookingsxp-widget>

Link-only mode gives you the three free templates (Classic, Compact and Next available), a small "Powered by BookingsXP" badge, and every host-page event (dataLayer, DOM events). There is no dashboard analytics in this mode.

Saved widget (free account)#

Sign up, paste the same link into the dashboard, and copy the snippet. It uses the widget ID instead of the link:

<bookingsxp-widget widget="w_8fk2m1qz"></bookingsxp-widget>

The template, colours, services shown, tracking IDs and data settings come from the dashboard, so you can change them without touching the page again. If an element has both widget and booking-url, widget wins.

3. Pick a display mode#

The same element renders inline (the default), as a button that opens a dialog, or as a floating button in the bottom-right corner.

<!-- Inline: the calendar sits in the page and resizes to fit -->
<bookingsxp-widget widget="w_8fk2m1qz"></bookingsxp-widget>

<!-- Popup: a button that opens the widget in an accessible dialog -->
<bookingsxp-widget widget="w_8fk2m1qz" mode="popup" button-text="Book a call" accent="#4f46e5"></bookingsxp-widget>

<!-- Floating: a fixed button in the bottom-right corner -->
<bookingsxp-widget widget="w_8fk2m1qz" mode="floating" button-text="Book now" accent="#4f46e5"></bookingsxp-widget>

For popup and floating buttons, include accent: the loader draws the button before the widget's saved settings load, so it cannot know your saved colour. Without it the button is #111827.

Inline widgets load lazily when they come near the viewport. Popup dialogs trap focus, close on Esc or a click outside, and return focus to the button.

If your CMS strips unknown tags#

Some editors remove custom elements. Use a div with data- attributes instead; everything else works the same.

<div data-bookingsxp data-widget="w_8fk2m1qz" data-mode="popup" data-button-text="Book a call"></div>

No-JavaScript fallback#

Where you cannot add a script, embed the widget page directly in an iframe:

<iframe
  src="https://bookingsxp.com/embed/w_8fk2m1qz"
  style="width:100%;height:760px;border:0"
  loading="lazy"
  title="Book an appointment"
></iframe>

The trade-offs: the height is fixed, no events reach your page (no dataLayer, no pixels), and attribution is limited to what the iframe URL itself carries. Use the script whenever you can.

Hosted booking page#

Every saved widget also has a page of its own at https://bookingsxp.com/book/<widgetId>, for example https://bookingsxp.com/book/w_8fk2m1qz. Use it in emails, social bios and ads when you have no page to embed into.

• UTM parameters and click IDs on the link are recorded, so https://bookingsxp.com/book/w_8fk2m1qz?utm_source=newsletter&utm_medium=email is attributed to the newsletter.
• The page loads the GA4, Google Ads, Meta and LinkedIn tags for the IDs configured on the widget, so conversions still fire.
• It is not indexed by search engines.

What happens when someone books#

1. The visitor picks a service, a time and fills in the form inside the widget.
2. BookingsXP creates the appointment through your Microsoft Bookings page. Microsoft sends the confirmation and calendar invite.
3. A short attribution block (source, campaign, first page, a BXP-XXXXXX reference) is added to the booking notes, so whoever opens the appointment in Outlook or Teams sees where it came from. You can turn this off per widget.
4. The loader fires booking_completed on your page: dataLayer, GA4, ad pixels, DOM events, and your thank-you redirect if you set one.

Next steps#

• Every attribute, including prefill and redirects.
• Track bookings in GTM, GA4 and ad platforms.
• React, Vue, Svelte and Astro components, or the WordPress plugin.
• Webhooks to send each booking to Slack, Teams, Zapier or your own backend.