BookingsXP

Websites & CMS

Microsoft Bookings on HubSpot CMS pages

Many B2B teams host landing pages on HubSpot but run calendars on Microsoft 365. BookingsXP puts your Microsoft Bookings calendar on a HubSpot page. It does not sync to HubSpot CRM by itself; to create contacts from bookings, send the booking webhook through Zapier or Make.

Start freeQuickstart
Plan
Plan: FreeWorks on every plan, including Free ($0, no card).
In short
The widget on HubSpot pages via a Rich text embed or HTML module; send bookings to the CRM through webhooks.
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 HubSpot CMS

  • HubSpot's Rich text module can embed code directly into the page, so the loader runs on your page and the widget renders inline.
  • Booking events go to window.dataLayer and gtag on the HubSpot page, so a GTM or Google tag you added to HubSpot sees them.
  • The widget does not talk to HubSpot's tracking code or CRM. Contact creation happens through the booking.created webhook and an automation tool.

Setup

Set up HubSpot CMS

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 the embed to a page

    In the page editor, add a Rich text module, then use Insert → Embed and paste the snippet. If your theme has an HTML or custom code module, you can use that instead.

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

  2. Step 2: If the editor strips the element

    Some rich-text editors remove tags they do not recognise. Use the div form, which the loader treats the same way.

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

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

    In HubSpot's website settings, add the script and a floating element to the site footer HTML so it loads on every page.

  4. Step 4: Send bookings to HubSpot CRM

    On Pro, turn on Store bookings for the widget, add a Webhook (JSON) endpoint pointing at Zapier (Catch Hook) or Make (Custom webhook), and use the HubSpot action to create or update a contact from data.booking.customer.

Outcomes and caveats

What you get

The result

  • A Microsoft Bookings calendar on HubSpot pages and landing pages.
  • Booking events for the GTM or Google tag on those pages.
  • A path to HubSpot contacts, with source, campaign and the BXP reference, through your automation tool.

Good to know

Limits and caveats

  • There is no built-in HubSpot CRM sync. CRM delivery is via webhooks (Pro) and Zapier, Make or your own code.
  • HubSpot's own analytics do not receive BookingsXP events; use GTM or GA4, or pass the data to HubSpot through the webhook.
  • Test on the published or preview page; the editor may not run embedded scripts.

FAQ

HubSpot CMS 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