Microsoft Bookings, on your own website

1. 01

   Paste your Bookings page link

   Copy the public link from the Bookings app; it usually starts with outlook.office.com/book/. BookingsXP loads your services, staff and open times from it.

2. 02

   Pick a template and your colours

   Eight layouts for contact pages, sidebars, landing pages and full-width sections. Set the accent colour and light or dark mode; Pro adds fonts, radius, density and more.

3. 03

   Paste one snippet on your site

   A script tag and one element, the WordPress plugin, or the hosted page link. Visitors book without leaving your page; Microsoft Bookings creates the appointment and sends the confirmation.

<bookingsxp-widget widget="w_8fk2m1qz"
  name="Alex Rivera" email="alex.rivera@example.com"
  phone="+1 555 0142" notes="Referred by Dr. Chen"
  service="YOUR_SERVICE_ID"></bookingsxp-widget>

<script>
  window.BookingsXP = window.BookingsXP || { q: [] };
  BookingsXP.q.push(["render", "#booking", {
    widget: "w_8fk2m1qz",
    prefill: { name: "Alex Rivera", email: "alex.rivera@example.com" },
  }]);
</script>
<div id="booking"></div>

https://bookingsxp.com/book/brightwater?name=Alex%20Rivera&email=alex.rivera%40example.com

The loader hands prefill values to the widget inside the page. They are never added to the widget's iframe URL, so they do not end up in server logs or analytics tools.

Daily booking cap

Set “Max bookings per day” and the widget stops offering a day once that many bookings have come through it for that day, counted in your business time zone. Useful for new-patient slots or a limited offer. Microsoft's own booking page is not capped.

Help text under questions

Add a line of guidance under any custom question from your Bookings page, such as “Include your policy number if you have one”. Microsoft Bookings shows only the question.

Email typo check

When a visitor types a common domain typo such as gmial.com or outlook.con, the widget suggests the fix in one tap before the booking is sent, so the confirmation reaches them.

Per-staff and per-service links

Open the widget or hosted page on one person or one service with the staff and service attributes or URL parameters. Microsoft Bookings has no link for a single staff member.

<!-- One person, one service -->
<bookingsxp-widget widget="w_8fk2m1qz"
  staff="YOUR_STAFF_ID" service="YOUR_SERVICE_ID"></bookingsxp-widget>

<!-- The same on the hosted page -->
https://bookingsxp.com/book/brightwater?staff=YOUR_STAFF_ID

Visitor time zone

Times always open in the visitor's own time zone. You can let visitors switch zone, and choose a 12 or 24 hour clock and the first day of the week.

Auto-resize

The widget reports its height to the page on every step, so there is no inner scrollbar and no fixed height to guess.

Lazy loading

Inline widgets load when they come near the viewport. The loader is about 8 KB gzipped and loads with async.

Keyboard and screen readers

The calendar is a labelled grid you move through with the arrow keys; month changes and the confirmation are announced; focus is visible throughout.

Reduced motion

Transitions are switched off when the visitor's system asks for reduced motion.

Mobile first

Every template adapts below its designed width. Compact and Next available are built for sidebars and phones.

Safe to embed

The widget runs in its own iframe and talks to your page only through messages checked against both origins. You can restrict each widget to your own domains.

Want the tracking side too? Tracking and analytics