BookingsXP

Frameworks

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

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

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.

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

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

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.

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