BookingsXP

Frameworks

Embed Microsoft Bookings in 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.

Try it with your linkFramework docs
Integration
Astro
Plan: Free
Works 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.
Trademarks
Astro is a trademark of its owner. BookingsXP is independent and not affiliated with or endorsed by Astro.

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.

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

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

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.

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