Our booking form - Frictionless

Paste this where the form should appear:

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

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

import Script from "next/script";

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

export default function BookPage() {
  return <div data-frictionless-booking={process.env.NEXT_PUBLIC_FRICTIONLESS_WORKSPACE_ID} />;
}

Want to know when someone books? See Events.