Booking Embeds

Prospyr Booking SDK

Five ways to embed your booking flow.

Drop a single script tag, then pick the integration pattern that fits your design. No iframes to wrangle, no UI to build, no cross-origin headaches — just data attributes.

Loader book.prospyrmed.com/booking-embed.js

App URL book.prospyrmed.com

Booking page 1d052581-84f0-4c39-8dc2-5e4131104d4e

Drawer — right

Most common

Booking slides in from the right edge of the viewport over a soft scrim. On mobile, it transforms into a bottom sheet automatically — no extra config. Any element with a data-prospyr-booking-id attribute becomes a trigger.

Live

html

<!-- Load once per page -->
<script async
  src="https://book.prospyrmed.com/booking-embed.js"
  data-prospyr-app-url="https://book.prospyrmed.com"></script>

<!-- Any trigger element -->
<button
  data-prospyr-booking-id="1d052581-84f0-4c39-8dc2-5e4131104d4e"
  data-prospyr-mode="drawer"
  data-prospyr-side="right">
  Book now
</button>

Drawer — left

The same panel, anchored to the left edge. Useful when primary CTAs or navigation live on the left side of your layout. Toggle data-prospyr-side between right and left — that’s the only change.

Live

html

<button
  data-prospyr-booking-id="1d052581-84f0-4c39-8dc2-5e4131104d4e"
  data-prospyr-mode="drawer"
  data-prospyr-side="left">
  Book now
</button>

Modal — centered

A centered dialog with a blurred backdrop, focusing user attention entirely on the booking flow without leaving the current page context. Ideal for single-CTA landing pages.

Live

html

<button
  data-prospyr-booking-id="1d052581-84f0-4c39-8dc2-5e4131104d4e"
  data-prospyr-mode="modal">
  Book now
</button>

Inline — embedded

The entire booking flow rendered directly inside the page, in a container you define. No drawer, no modal. Perfect for dedicated booking pages or service detail pages where conversion is the primary goal.

html

<div
  data-prospyr-booking-id="1d052581-84f0-4c39-8dc2-5e4131104d4e"
  data-prospyr-mode="inline"
  style="width:100%; height:720px">
</div>

Floating — always visible

Live on page

A persistent “Book now” button floats in a corner throughout the entire session. Configure label, position, and booking page via window.ProspyrBooking before loading the script. It’s active in the bottom-right corner right now.

Live on this page

Look for the persistent “Book” bubble in the bottom-right corner. It stays visible as you scroll.

html

<!-- Configure BEFORE the loader -->
<script>
  window.ProspyrBooking = {
    id:       "1d052581-84f0-4c39-8dc2-5e4131104d4e",
    mode:     "fab",
    label:    "Book now",
    position: "bottom-right"
  };
</script>

One loader per page. Load booking-embed.js once and all five trigger modes — drawers, modal, inline, and floating button — work together automatically.