Embedded booking forms

Create an embeddable form

Open Admin → Form designer. Create a form, choose its services and visual settings, and copy its form ID.

Bookings created through an embed use the same server-side pricing, availability, notifications, and tracking pages as the native booking form.

Use the script widget

Replace the host and form ID with values from your Grout instance:

<script
  src="https://booking.example.com/embed.js"
  data-form="your_form_id"
></script>

The script adds a lazy-loading iframe and uses the form's configured accent color. Set data-height="760" to override the default iframe height.

Use an iframe

Use an iframe when you want to control its surrounding layout:

<iframe
  src="https://booking.example.com/embed/your_form_id"
  style="width: 100%; height: 760px; border: 0"
  title="Book online"
></iframe>

Use the React component

The React SDK lives in sdk/react and uses Grout's public JSON endpoints.

import { BookingForm, createGrout } from "@grout/react";

const client = createGrout({
  baseUrl: "https://booking.example.com",
});

export default function BookingPage() {
  return (
    <BookingForm
      client={client}
      accentColor="#0d9488"
      onBooked={(booking) => console.log(booking.code)}
    />
  );
}

The package also exports useCatalog, useQuote, and useSlots for custom React interfaces. Use the REST API with an API key for server-to-server work such as listing, cancelling, or rescheduling bookings.