BookingsXP

Websites & CMS

Embed Microsoft Bookings in a Shopify store

Shops that sell fittings, consultations, repairs or classes often run their staff calendars in Microsoft 365. BookingsXP puts that Microsoft Bookings calendar on a Shopify page. A booking is an appointment in Microsoft Bookings, not a Shopify order: there is no cart, checkout or payment.

Try it with your linkQuickstart
Integration
Shopify
Plan: Free
Works on every plan, including Free ($0, no card).
In short
A Custom Liquid section puts the widget in a storefront page; theme.liquid adds a floating button to every page.
Microsoft Bookings
Stays your system of record. Bookings land in Outlook and Teams and Microsoft sends the invites and reminders.
Trademarks
Shopify is a trademark of Shopify Inc.. BookingsXP is independent and not affiliated with or endorsed by Shopify.

What happens with Shopify

  • A Custom Liquid section or block renders its HTML into the storefront page itself, so the loader runs on your shop's domain and the widget sits inline.
  • Code added to layout/theme.liquid before </body> loads on every page, which suits a floating button.
  • Booking events go to window.dataLayer and gtag on the storefront page, so GTM or a Google tag added in theme code sees them. Tags that run as Shopify pixels, including GTM loaded in a custom pixel, run in Shopify's sandbox with their own dataLayer and do not.
  • BookingsXP does not create Shopify customers or orders. The appointment, the confirmation email and any Teams link come from Microsoft Bookings.

Set up Shopify

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

  1. Step 1: Add a Custom Liquid section

    Online Store → Themes → Customize. Open the template where the widget belongs, click Add section and choose Custom Liquid (the name in Dawn and most Online Store 2.0 themes; check your theme's documentation if it is missing). Paste the snippet and save.

    HTML
    <script src="https://bookingsxp.com/embed/v1.js" async></script>
<bookingsxp-widget widget="w_8fk2m1qz" theme="auto"></bookingsxp-widget>

  2. Step 2: For a dedicated booking page

    Online Store → Pages → Add page, for example Book a fitting. In the theme editor, create a new page template, add the Custom Liquid section to it, then choose that template under Theme template on the page.

  3. Step 3: Optional: a floating button on every page

    Online Store → Themes → … → Edit code → layout/theme.liquid. Paste the script and a floating element just before </body> and save. Duplicate the theme first: Shopify removes code changes that are incompatible with a theme update. If your theme lets you add sections to the footer in the theme editor, a Custom Liquid section there also appears on every page without editing code.

    theme.liquid
    <script src="https://bookingsxp.com/embed/v1.js" async></script>
<bookingsxp-widget widget="w_8fk2m1qz" mode="floating" button-text="Book a fitting" accent="#111827"></bookingsxp-widget>

  4. Step 4: If your tags run as Shopify pixels

    Publish the booking as a Shopify custom event and subscribe to it in your custom pixel with analytics.subscribe. Add this after the loader in theme.liquid. A simpler alternative is a redirect-url to a Shopify page such as /pages/booking-confirmed, which pixels see as a page view.

    HTML
    <script>
  window.addEventListener("bookingsxp:booking_completed", function (e) {
    var d = e.detail || {};
    if (window.Shopify && Shopify.analytics) {
      Shopify.analytics.publish("bookingsxp:booking_completed", {
        bookingId: d.booking && d.booking.id,
        service: d.service && d.service.name
      });
    }
  });
</script>

  5. Step 5: Test on the live store

    Open the storefront, not only the theme editor, and make a test booking. Check GTM Preview or type dataLayer in the browser console to see the bookingsxp.* events, then cancel the test appointment in Bookings.

Outcomes and caveats

What you get

  • Microsoft Bookings availability on a page, product or landing template, in your accent colour.
  • Inline on one page, or a floating button across the store.
  • Booking events for GTM or a Google tag in theme code, and a documented route into Shopify custom pixels.

Limits and caveats

  • Bookings are not Shopify orders. BookingsXP takes no payments or deposits and creates no Shopify customer.
  • Tags that run as Shopify custom or app pixels cannot read the storefront dataLayer. Use theme-code tags, the custom event above, or a thank-you page redirect.
  • Edits to theme.liquid can be lost in a theme update. Keep a copy of the snippet.
  • Shopify's cookie banner controls Shopify's pixels, not theme scripts. If attribution must wait for consent, set window.bxpConsent = false before the loader until the visitor agrees; the loader then shares only the page path and referring site.
  • If you use Allowed websites, add both your shop's own domain and its myshopify.com address.

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