Introduction

clndr.pro hosts booking pages. A host sets their weekly hours, a guest picks an open slot, and the meeting shows up in the host's dashboard (and on their Google Calendar with a Meet link, when the page has Meet links turned on). These docs cover running that booking flow inside your own site, so guests never leave it for www.clndr.pro/ada/intro-call.

This is a complete booking form in a React app:

app/book/booking-widget.tsx

'use client';
 
import { ClndrProvider, BookingInline } from '@clndr-pro/react';
 
export function BookingWidget() {
  return (
    <ClndrProvider publishableKey={process.env.NEXT_PUBLIC_CLNDR_PUBLISHABLE_KEY!}>
      <BookingInline slug="intro-call" />
    </ClndrProvider>
  );
}

It fetches the page, lets the guest pick a date and a slot, asks the host's questions, and books. The quickstart gets it running in a Next.js app.

Pick a way in

You want	Use	Key
A booking widget on a site you don't write code for (Webflow, WordPress, plain HTML)	Embed script	None
A booking page in an iframe, nothing else	Iframe embed	None
The booking form inside your React or Next.js app, in your own components	`@clndr-pro/react`	Publishable
Your own booking UI, or bookings flowing into your backend	REST API or `@clndr-pro/sdk`	Publishable in the browser, secret on the server

Choose an integration compares them properly, including what each one can't do.

What the API covers

From any key you can read your booking pages, the questions they ask, and the open slots on a given day, and you can create bookings. From a secret key on your server you can also list bookings, confirm the ones waiting for approval, and cancel them.

Creating or editing booking pages, availability and access codes happens in the dashboard, not the API. There are no outbound webhooks yet: your code hears about new bookings from the embed's browser events, from your own booking handler, or by polling the API.

Building with Claude Code

Every page here is also plain Markdown (add .md to the URL), the whole site is indexed at /llms.txt, and there's an MCP server and a Claude Code skill. Docs for AI tools has the setup. If you just want it done, paste this into Claude Code from the root of your project:

Add clndr.pro booking to this projectPaste into Claude Code

Add clndr.pro booking to this project.
 
Read these first. They are Markdown pages written for coding agents:
- https://docs.clndr.pro/llms.txt (index of every docs page)
- https://docs.clndr.pro/integration-options.md
- https://docs.clndr.pro/nextjs.md for a Next.js app, otherwise https://docs.clndr.pro/react/components.md or, for a site without React, https://docs.clndr.pro/embed/script.md
 
Facts to rely on:
- API base URL: https://www.clndr.pro/api/v1. Always the www host: the bare domain redirects and the redirect drops the Authorization header.
- Packages: @clndr-pro/react (components and hooks, browser) and @clndr-pro/sdk (typed client, mainly server). Use @clndr-pro/react 0.2.1+ and @clndr-pro/sdk 0.1.5+. With older versions, pass baseUrl "https://www.clndr.pro".
- Import @clndr-pro/react only from files marked 'use client'.
- Publishable key (clndr_pk_...) goes in NEXT_PUBLIC_CLNDR_PUBLISHABLE_KEY. It is browser-safe and can read booking pages and slots and create bookings.
- Secret key (clndr_sk_...) goes in CLNDR_SECRET_KEY. Server only. It can also list, confirm and cancel bookings. Never import it into client code.
 
Steps:
1. Look at the project: framework and router, styling (Tailwind? shadcn/ui under components/ui?), and where a booking page fits. Tell me what you found and which integration you'll use before you change files.
2. Ask me for the booking page slug. Ask for my clndr.pro username too if you pick an embed.
3. Add the env vars to .env.example with placeholder values and tell me to put the real keys in .env.local.
4. Build it with the project's existing components and styles.
5. Run the type checker and the build, and fix what breaks.

Prompts for Claude Code has more specific ones: a shadcn booking widget, an approvals screen, syncing bookings to a database.

Where things are


Dashboard	www.clndr.pro: Booking pages, Availability for hours, API keys
API base URL	`https://www.clndr.pro/api/v1`
npm packages	`@clndr-pro/react`, `@clndr-pro/sdk`
OpenAPI 3.1 spec	`docs.clndr.pro/openapi.json`
SDK source	github.com/devsForFun/clndr-pro-sdk
Help	hello@devsforfun.com