# Plain JavaScript
A complete clndr.pro booking form in one HTML file — fetch, a publishable key and the REST API, no framework and no build step.
No React, no bundler, no SDK: one HTML file that loads a booking page, shows the open times for a day, asks the host's questions and books. Use it on a static site, inside a CMS that accepts custom HTML, or as a reference for porting the flow to Vue, Svelte or anything else.
If you'd rather not write the form at all, the [embed script](/embed/script) drops clndr.pro's own booking page onto any site with two lines.
## The file
Save this as `book.html`, put your publishable key and slug in the three constants at the top of the script, and open it in a browser. It talks to the API directly; there's no server of yours involved.
```html title="book.html"
Book a call
Loading…
```
## How it works
**Requests.** `api()` sends the key as `Authorization: Bearer clndr_pk_…` and unwraps the `data` field every successful response has. On failure it throws an `Error` carrying the API's own `error` message and the HTTP `status`. The API sends `Access-Control-Allow-Origin: *`, so this works from any origin, `file://` pages included.
**The day.** `` gives `YYYY-MM-DD`, and the API reads that as a calendar day in the **host's** timezone. Pass the string as it is. The times that come back are UTC timestamps, and `Intl.DateTimeFormat` with an `undefined` locale formats them in the guest's own locale and timezone. Today's past times and days beyond the page's booking window come back empty, and the `min`/`max` on the input keep guests inside that window.
**Questions.** Each `question_type` gets the closest native input: `textarea`, a `select` built from `options`, a `checkbox` (answered "Yes" or "No"), `tel` for `phone`, `email`, or text. Required questions use the browser's `required` validation, which matters: the API accepts bookings with unanswered questions. Every piece of text from the host goes in through `textContent`, never `innerHTML`.
**Booking.** The `POST /bookings` body uses camelCase (`bookingPageId`, `guestEmail`, `startTime`) while responses use snake_case (`guest_email`). `startTime` and `endTime` are the slot's `start` and `end`, untouched. The response's `status` is `confirmed` for *direct* pages and `pending` for *approval* pages, and the message changes to match.
**A taken slot.** If another guest booked the same time first, the API answers `409`. With a publishable key the message is usually "This time slot is not available. Fetch the slots again and pick another." The script treats any `409` as a taken slot, reloads that day's times and asks the guest to pick again.
## Making it yours
* **Styling.** The `