BookingsXP

Frameworks

Microsoft Bookings widget for Svelte

@bookingsxp/svelte is a Svelte 5 component written with runes. It renders the BookingsXP custom element, loads the script in an effect, and calls your onevent and onbooked props, so a SvelteKit page can react to a confirmed Microsoft Bookings appointment.

Start freeFramework docs
Plan
Plan: FreeWorks on every plan, including Free ($0, no card).
In short
@bookingsxp/svelte: a Svelte 5 component with onevent and onbooked props, for SvelteKit too.
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 Svelte

  • The component spreads the embed options onto <bookingsxp-widget> and loads the script in a $effect, which only runs in the browser.
  • Event handlers are attached to the element's bookingsxp:<step> DOM events and removed when the component is destroyed.
  • Props: the camelCase embed options (widget, bookingUrl, mode, buttonText, template, theme, accent, service, prefill, redirectUrl and so on), plus onevent, onbooked, class, style and id.

Setup

Set up Svelte

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/svelte   # npm release pending — until then use the script embed

  2. Step 2: Render the widget

    The default export is the component; a named export is also available.

    Svelte
    <script lang="ts">
  import BookingsXPWidget from "@bookingsxp/svelte";
</script>

<BookingsXPWidget
  widget="w_8fk2m1qz"
  theme="auto"
  onbooked={(e) => console.log("booked", e.booking?.id)}
/>

  3. Step 3: Redirect in SvelteKit

    Either set redirectUrl (the loader navigates after 600 ms), or call goto from onbooked to stay inside SvelteKit's router.

    Svelte
    <script lang="ts">
  import { goto } from "$app/navigation";
  import BookingsXPWidget from "@bookingsxp/svelte";
</script>

<BookingsXPWidget widget="w_8fk2m1qz" onbooked={(e) => goto("/thank-you?ref=" + e.booking?.id)} />

Outcomes and caveats

What you get

The result

  • A Svelte 5 component with typed props and callbacks.
  • Server-rendered markup in SvelteKit with the script loaded client-side.
  • The same dataLayer and pixel events as the plain script embed.

Good to know

Limits and caveats

  • Svelte 5 only (runes). Svelte 4 projects can use the plain script and custom element.
  • Use redirectUrl or goto, not both: the loader's redirect still fires 600 ms after confirmation.
  • Premium templates need a saved Pro widget.

FAQ

Svelte 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