BookSurfer Booking Forms
Drop live booking forms onto your Framer site in seconds. Connect your Book Surfer account, browse your classes, and insert fully synced, styled booking forms, no embed code needed. Built for studios, instructors, and class organizers.
Book Surfer Booking Forms
What it is Book Surfer Booking Forms is a Framer canvas plugin for fitness studios, instructors, and class organizers. It lets you connect your Book Surfer account and drop fully functional, live booking forms onto your Framer site — no manual embed code, no copy-pasting class details. The forms sync with your Book Surfer dashboard, so the class info, schedules, and submissions stay connected to your backend.
How it works (3 steps)
Connect — Paste your Book Surfer API key (bsf_…). The plugin validates it against your account and securely stores it in Framer's plugin storage. Your key is only used to fetch your classes and form schemas.
Browse — Your live classes load directly inside the plugin. Each card shows the class name, type, instructor, price, and location, with instant search to filter.
Insert — Drag a class onto the canvas, or click to pick a layout. The plugin inserts a hosted booking component instance wired to that specific class — ready to take real bookings.
Key features
One-click account connection via API key, with secure validation and a disconnect option.
Live class sync — pulls real classes from your Book Surfer dashboard in real time.
Drag-and-drop or click-to-add insertion onto the Framer canvas.
Multiple layout styles — Classic, Modern, Minimal, and Compact, each with optimized dimensions, previewed before insertion.
Hosted booking component — forms are served from a hosted URL and configured per-class via component attributes (embed URL, class ID, name, location, layout style), so they update centrally.
Smart form fields — supports student & guardian details, email, mobile, age, gender, and notes, with required/optional handling.
Permission-aware UI — respects Framer's addComponentInstance permission and clearly prompts when access is needed.
Premium, polished interface with live status indicators, toast feedback, and loading/error states.
Technical details
Built with the Framer Plugin SDK v3, React 19, TypeScript, Vite, and Tailwind CSS 4.
Runs in canvas mode.
Uses useMakeDraggable and addComponentInstance for canvas insertion.
Forms powered by React Hook Form + Zod; class data fetched via an Axios API client with Bearer-token auth.
Who it's for Studio owners, fitness instructors, coaches, and anyone running scheduled classes or sessions who wants to add bookable forms to a Framer site in seconds.
Changelog
Dark Mode
BookSurfer now automatically matches Framer's interface theme. Switch Framer between light and dark, and the plugin follows instantly — no settings needed.
What's new:
Full dark theme using BookSurfer's brand palette, with neon-lime accents on class tags, details, and the live connection indicator.
Theme-aware class cards, search, buttons, and the layout-style previews — every screen looks great in both modes.
Notifications (toasts) now correctly match the active theme.
Fixes & polish:
Fixed toast colors appearing dark while in light mode.
Refined borders, contrast, and accent usage across the plugin for a cleaner, more readable interface.
Details
Aivorn Tech
