@buildoutstudios/schedule

@buildoutstudios/schedule

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.