> ## Documentation Index
> Fetch the complete documentation index at: https://docs.usefrictionless.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Our booking form

> Two lines draw your free times and your booking form right on your page.

Paste this where the form should appear:

```html theme={null}
<div data-frictionless-booking="YOUR_WORKSPACE_ID"></div>
<script async src="https://usefrictionless.com/widget/book.js"></script>
```

It uses your site's font and your chat colour. It lives in its own Shadow DOM, so your CSS can't break it and its CSS can't leak onto your page.

## Match your design

Set these on the `div`:

| Setting | What it changes |
| - | - |
| `--fric-accent` | The Book button and the picked day and time. Text on it turns white or dark, whichever reads better. |
| `--fric-radius` | Corner rounding of boxes and buttons. Default `12px`. |
| `--fric-field` | Background of boxes and time buttons. Default white. |
| `--fric-line` | Border colour. |
| `--fric-text`, `--fric-muted` | Main and secondary text colour. |
| `data-heading` | `"off"` drops our "Book an appointment" heading, when your page has its own. |

```html theme={null}
<div
  data-frictionless-booking="YOUR_WORKSPACE_ID"
  data-heading="off"
  style="--fric-accent:#8A1420; --fric-radius:16px; --fric-field:#FBF5F4; --fric-line:#F0DADA"
></div>
```

## React and Next.js

Load the script once, in a layout that stays mounted. It finds booking forms added later, as visitors move between pages, so render the form wherever you like.

<CodeGroup>
  ```tsx app/layout.tsx theme={null}
  import Script from "next/script";

  <Script src="https://usefrictionless.com/widget/book.js" strategy="afterInteractive" />
  ```

  ```tsx app/book/page.tsx theme={null}
  export default function BookPage() {
    return <div data-frictionless-booking={process.env.NEXT_PUBLIC_FRICTIONLESS_WORKSPACE_ID} />;
  }
  ```
</CodeGroup>

Want to know when someone books? See [Events](/bookings/events).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.