Svelte / SvelteKit · Medos Booking Docs

The widget is client-only. Load it inside onMount so SSR doesn't crash on the missing window object.

src/routes/book/+page.svelte

<script lang="ts">
  import { onMount } from "svelte";

  export let apiKey = "mk_your_publishable_key";

  onMount(() => {
    const script = document.createElement("script");
    script.src = "https://widgets.medos.one/v2/unified.js";
    script.async = true;
    script.onload = () => {
      (window as any).MedosBooking?.init({
        apiKey,
        mode: "inline",
        containerId: "medos-booking-svelte",
      });
    };
    document.body.appendChild(script);

    return () => script.remove();
  });
</script>

<h1>Book an appointment</h1>
<div id="medos-booking-svelte" style="min-height: 600px" />

For modal mode, keep the same onMount block (drop the containerId and switch to mode: "modal"), then wire a button:

<button on:click={() => (window as any).MedosBooking?.open()}>
  Book appointment
</button>