BookingsXP

Websites & CMS

Microsoft Bookings on Webflow

Webflow sites are usually carefully designed, and a fixed-size Microsoft Bookings iframe rarely fits. BookingsXP's widget takes your accent colour, resizes to its content and runs inside the page, so the Google tag or GTM container you added in Webflow's site settings sees each booking.

Start freeQuickstart
Plan
Plan: FreeWorks on every plan, including Free ($0, no card).
In short
Paste the script and custom element into a Code Embed element; events reach the GTM or GA4 on your Webflow site.
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 Webflow

  • Webflow's Code Embed element writes your HTML directly into the published page, not into a separate frame.
  • The loader script finds the <bookingsxp-widget> element and draws its iframe inside the element's shadow root, so Webflow's styles do not leak in and the widget's do not leak out.
  • Because the loader runs on your page, it pushes to the same dataLayer your Webflow GTM uses and reads the UTM parameters of the visit.

Setup

Set up Webflow

4 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 Code Embed element

    In the Designer, open the Add panel and drag a Code Embed element where the widget should go.

  2. Step 2: Paste the snippet

    Paste the script and element, then Save & Close. Use your widget ID, or booking-url with your public Bookings link if you have no account.

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

  3. Step 3: For a site-wide button, use custom code instead

    Site settings → Custom code → Footer code. Paste the script and a floating element, then publish. It appears on every page.

    HTML
    <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>

  4. Step 4: Publish and check the live site

    Scripts do not run inside the Designer canvas, so the embed shows as a placeholder there. Publish, open the live URL, and step through the widget.

Outcomes and caveats

What you get

The result

  • A booking widget that fits a Webflow layout, with light, dark or auto themes.
  • Inline, popup and floating options from the same snippet.
  • Booking events in the GTM or GA4 you already installed in Webflow.

Good to know

Limits and caveats

  • Webflow only lets you add custom code on paid Site or Workspace plans. Check yours before planning on it.
  • The widget does not render in the Designer, only on the published or preview site.
  • For a popup or floating button, include the accent attribute so the button matches before the widget loads.

FAQ

Webflow questions

Something not covered? Email hello@bookingsxp.com.

Start free, no card

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

Start freeTry it with your link