Booking widget for Buildout Schedule. Drops a live booking page into any site: a React component for React apps, a plain script embed for everything else.

The widget renders the workspace's hosted booking page in an iframe. Slot availability, double-book re-checks, confirmations, and reminders all run on buildoutschedule.com; nothing is reimplemented client-side. When a visitor completes a booking, the widget tells your page.

Install

npm install @buildoutstudios/schedule

The script embed needs no install at all (see the plain HTML example).

Props

Prop	Type	Notes
`workspace`	`string`	Workspace slug. Your booking URL is `buildoutschedule.com/{workspace}/{eventType}`.
`eventType`	`string`	Event type slug.
`theme`	`string?`	Reserved. The page renders light with the workspace's brand colors today.
`onBooked`	`(booking) => void`	Fires when a booking completes. Free bookings only; paid event types confirm on the hosted page after Stripe Checkout.
`origin`	`string?`	Host origin override. Defaults to `https://buildoutschedule.com`.
`height`	`number \| string?`	Iframe height. Defaults to `760`. Width is always 100%.

The onBooked payload: { bookingId, startsAt, endsAt, joinUrl, locationLabel, cancelUrl, rescheduleUrl }.

Next.js (App Router)

The widget listens for browser events, so it's a client component:

'use client';

import { BookingWidget } from '@buildoutstudios/schedule';

export function BookACall() {
  return (
    <BookingWidget
      workspace="acme"
      eventType="intro-call"
      onBooked={(booking) => {
        console.log('booked', booking.bookingId, booking.startsAt);
      }}
    />
  );
}

Use it from any server component or page: <BookACall />.

Astro

React island with a client directive:

---
import { BookingWidget } from '@buildoutstudios/schedule';
---

<BookingWidget workspace="acme" eventType="intro-call" client:load />

No React in your Astro project? Use the plain HTML embed below instead; it works in any .astro file as-is.

Plain HTML

No build step. One script tag, one div:

<div
  data-buildout-schedule
  data-workspace="acme"
  data-event-type="intro-call"
></div>
<script src="https://unpkg.com/@buildoutstudios/schedule/dist/embed.js"></script>

<script>
  document
    .querySelector('[data-buildout-schedule]')
    .addEventListener('buildout-schedule:booked', (event) => {
      console.log('booked', event.detail);
    });
</script>

Or mount imperatively: window.BuildoutSchedule.mount(element, { workspace: 'acme', eventType: 'intro-call' }).

Getting your slugs

Sign in at buildoutschedule.com, open an event type, and copy the two path segments from its public link. That link working in a browser is the whole precondition; the widget shows exactly that page.