BookingsXP

Frameworks

Microsoft Bookings widget for Astro

@bookingsxp/astro renders the BookingsXP custom element and its script tag at build or request time and ships no framework JavaScript. It suits content sites that want a booking widget without adding React, Vue or Svelte just for that.

Start freeFramework docs
Plan
Plan: FreeWorks on every plan, including Free ($0, no card).
In short
@bookingsxp/astro: a zero-JS server component that renders the element and the script tag once per page.
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 Astro

  • The component outputs <bookingsxp-widget> with your props as attributes, and a <script async> tag for the loader.
  • The script tag is emitted once per page, even if you place several widgets.
  • There are no client callbacks: listen for bookingsxp:<step> DOM events in a script, or use GTM on the dataLayer events.

Setup

Set up Astro

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

  1. Step 1: Install

    Add the package.

    Shell
    npm i @bookingsxp/astro   # npm release pending — until then use the script embed

  2. Step 2: Render the widget

    Import from the .astro path.

    Astro
    ---
import BookingsXPWidget from "@bookingsxp/astro/BookingsXPWidget.astro";
---

<BookingsXPWidget widget="w_8fk2m1qz" />
<BookingsXPWidget widget="w_8fk2m1qz" mode="popup" buttonText="Book a call" />

  3. Step 3: React to a booking

    Listen on window; each event reaches window once.

    Astro
    <script>
  window.addEventListener("bookingsxp:booking_completed", (e) => {
    const detail = (e as CustomEvent).detail;
    console.log("booked", detail.booking?.id);
  });
</script>

Outcomes and caveats

What you get

The result

  • A booking widget with zero framework runtime.
  • Props in camelCase, matching the other framework packages.
  • The same dataLayer and pixel events as the plain script embed.

Good to know

Limits and caveats

  • No onBooked prop; use DOM events or GTM.
  • Callbacks need a script of your own; the component itself ships no client code.
  • Premium templates need a saved Pro widget.

FAQ

Astro 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