Quick Start

Get a booking flow live in your React app in under a minute.

1. Install

npm install @periscaleai/booking-widget
# or
bun add @periscaleai/booking-widget

The package is published under the @periscaleai scope. It's public — anyone with the package name can install it; you authenticate at runtime with your sb_live_* API key.

Peer dependencies (must already be in your app):

• react ≥ 18
• react-dom ≥ 18
• lucide-react ≥ 0.400
• Tailwind CSS (the widget styles itself with utility classes)

2. Drop the widget on a page

import { BookingWidget } from "@periscaleai/booking-widget";

export default function BookPage() {
  return (
    <main>
      <h1>Book an appointment</h1>
      <BookingWidget
        apiBase="https://api.periscale.app/api/v1/business/website/booking"
        apiKey="sb_live_your_api_key_here"
      />
    </main>
  );
}

That's it. The widget loads your booking config (operating hours, cancellation policy, slot duration, services) and renders the flow:

Date → Time → Details → Confirm

Restaurant flavor

If you're a restaurant and need party-size + table assignment, swap to the restaurant widget:

import { RestaurantBookingWidget } from "@periscaleai/booking-widget/restaurant";

export default function ReservePage() {
  return (
    <RestaurantBookingWidget
      bookingApiBase="https://api.periscale.app/api/v1/business/website/booking"
      reservationApiBase="https://api.periscale.app/api/v1/business/website/restaurant-booking"
      apiKey="sb_live_your_api_key_here"
      largePartyContactPhone="+65 8910 8835"
    />
  );
}

Steps become Date → Time → Party → Table → Details → Confirm.

See the Restaurant flavor page for full options.

Where to get your API key

Sign in at app.periscale.app, open the Booking integration, and copy your widget API key (sb_live_…). The same key authorizes the chat widget, analytics tag, and booking widget.

TIP

Keep your API key out of public repos. For Next.js, expose it as NEXT_PUBLIC_PERISCALE_API_KEY so it's compiled into the client bundle but not committed:

<BookingWidget
  apiBase={process.env.NEXT_PUBLIC_PERISCALE_API_BASE!}
  apiKey={process.env.NEXT_PUBLIC_PERISCALE_API_KEY!}
/>

Self-hosted backend

If you run the Periscale API yourself, point apiBase and (for restaurants) reservationApiBase at your own host:

<RestaurantBookingWidget
  bookingApiBase="https://api.your-domain.com/api/v1/business/website/booking"
  reservationApiBase="https://api.your-domain.com/api/v1/business/website/restaurant-booking"
  apiKey="sb_live_xxx"
/>

Next

• Restaurant flavor — every restaurant-specific option
• Configuration — every prop on every widget
• Building blocks — compose your own industry flow
• JavaScript API — non-React or server-side usage