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