Book Surfer Booking Forms
A Framer canvas plugin for fitness studios, instructors, and class organizers. Connect your Book Surfer account and drop fully functional, live booking forms onto your Framer site — no embed code, no copy-pasting class details. Forms sync with your dashboard, keeping class info, schedules, and submissions wired to your backend.
How it works
Connect — Paste your Book Surfer API key (bsf_…). The plugin validates it and securely stores it in Framer's plugin storage. Your key only fetches your classes and form schemas.
Browse — Your live classes load inside the plugin. Each card shows name, type, instructor, price, and location, with instant search.
Insert — Drag a class onto the canvas or click to pick a layout. The plugin inserts a hosted booking component wired to that class — ready to take real bookings.
Key features
One-click connection via API key, with secure validation and disconnect.
Live class sync — pulls real classes from your dashboard in real time.
Drag-and-drop or click-to-add insertion.
Four layout styles — Classic, Modern, Minimal, Compact — each previewed before insertion.
Hosted booking component — served from a hosted URL and configured per class via attributes (embed URL, class ID, name, location, layout), so forms update centrally.
Smart fields — student & guardian details, email, mobile, age, gender, and notes, with required/optional handling.
Permission-aware UI that prompts clearly when canvas access is needed.
Polished interface with live status indicators, toast feedback, and loading/error states.
Tech
Framer Plugin SDK v3, React 19, TypeScript, Vite, Tailwind CSS 4. Runs in canvas mode using useMakeDraggable and addComponentInstance. Forms powered by React Hook Form + Zod; data fetched via Axios with Bearer-token auth.
Who it's for
Studio owners, instructors, coaches, and anyone running scheduled classes who wants bookable forms on Framer in seconds.
Book Surfer Booking Forms
A Framer canvas plugin for fitness studios, instructors, and class organizers. Connect your Book Surfer account and drop fully functional, live booking forms onto your Framer site — no embed code, no copy-pasting class details. Forms sync with your dashboard, keeping class info, schedules, and submissions wired to your backend.
How it works
Connect — Paste your Book Surfer API key (bsf_…). The plugin validates it and securely stores it in Framer's plugin storage. Your key only fetches your classes and form schemas.
Browse — Your live classes load inside the plugin. Each card shows name, type, instructor, price, and location, with instant search.
Insert — Drag a class onto the canvas or click to pick a layout. The plugin inserts a hosted booking component wired to that class — ready to take real bookings.
Key features
One-click connection via API key, with secure validation and disconnect.
Live class sync — pulls real classes from your dashboard in real time.
Drag-and-drop or click-to-add insertion.
Four layout styles — Classic, Modern, Minimal, Compact — each previewed before insertion.
Hosted booking component — served from a hosted URL and configured per class via attributes (embed URL, class ID, name, location, layout), so forms update centrally.
Smart fields — student & guardian details, email, mobile, age, gender, and notes, with required/optional handling.
Permission-aware UI that prompts clearly when canvas access is needed.
Polished interface with live status indicators, toast feedback, and loading/error states.
Tech
Framer Plugin SDK v3, React 19, TypeScript, Vite, Tailwind CSS 4. Runs in canvas mode using useMakeDraggable and addComponentInstance. Forms powered by React Hook Form + Zod; data fetched via Axios with Bearer-token auth.
Who it's for
Studio owners, instructors, coaches, and anyone running scheduled classes who wants bookable forms on Framer in seconds.
