BookingsXP

Websites & CMS

Microsoft Bookings on Framer

Framer sites are often landing pages for demos and consultations, which is exactly where a booked meeting matters. BookingsXP puts your Microsoft Bookings calendar on the page. How you add it, through the Embed component or site custom code, decides where the booking events go.

Start freeQuickstart
Plan
Plan: FreeWorks on every plan, including Free ($0, no card).
In short
An Embed component for the widget, and site custom code for a tracked floating button.
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 Framer

  • Framer's Embed component accepts a URL or HTML. HTML that contains a script may be rendered inside an iframe rather than directly in your page.
  • If it is framed, the widget works and bookings reach Microsoft Bookings, but dataLayer and gtag calls happen inside that frame and your site's analytics do not see them.
  • Code added in the site settings' custom code runs on the page itself, so a floating or popup button added there keeps events and UTM attribution.

Setup

Set up Framer

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

  1. Step 1: Inline: add an Embed component

    Add Framer's Embed component from the Insert menu (search for Embed). Set the type to HTML and paste the snippet. Give the component a fixed height, such as 720 px, since the widget sizes within it.

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

  2. Step 2: Tracked: a floating button in site custom code

    Site Settings → General → Custom Code → End of <body> tag. Paste the script and a floating or popup element, then publish.

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

  3. Step 3: Or: the plain iframe

    If you only need the calendar and not host-page events, the Embed component's URL type with https://bookingsxp.com/embed/<widget id> is the simplest option. Bookings still land in Microsoft Bookings with the BXP reference in the notes.

  4. Step 4: Publish and test

    Custom code runs on the published site, not the canvas. Publish, open the live URL, and check GTM Preview or GA4 DebugView while you make a test booking.

Outcomes and caveats

What you get

The result

  • Microsoft Bookings on a Framer landing page, styled with your accent colour.
  • A tracked floating or popup button through site custom code.
  • Bookings landing in Outlook and Teams with the campaign in the notes.

Good to know

Limits and caveats

  • Framer's handling of HTML embeds can change between versions. Test in GTM Preview whether events reach your page before relying on the inline route for tracking.
  • A framed embed does not grow with the widget; set the component's height.
  • Site custom code may require a paid Framer site plan.

FAQ

Framer 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