5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rdgef59pv3cw.js","/creators-assets/_next/static/immutable/chunks/0zdv1ssrxkrvj.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/0gxswkth5mc6b.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/36invrtoq879v.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0j6nyijn0flqd.js","/creators-assets/_next/static/immutable/chunks/2b15v_9ruhnys.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3h1dt97hv5ik0.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/0w757zrv0hi6k.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/1h-r9oggqjick.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/2051y-i4b0nnm.js"],"PostDetailCard"] 5d:T91e,

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.

59:[["$","$L5c",null,{"post":{"id":"019ea928-48c4-7cc9-8a44-674566e6fd89","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"116e158a-4f9f-41c3-a72e-15ae2eec3c1a","name":"Aivorn Tech","slug":"aivorn-tech","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"1241","resolved":true,"title":"Book Surfer Booking Forms","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Book Surfer Booking Forms","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"How it works","marks":[{"type":"bold"}]}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Connect","marks":[{"type":"bold"}]},{"type":"text","text":" — 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."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Browse","marks":[{"type":"bold"}]},{"type":"text","text":" — Your live classes load inside the plugin. Each card shows name, type, instructor, price, and location, with instant search."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Insert","marks":[{"type":"bold"}]},{"type":"text","text":" — 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."}]}]}],"attrs":{"type":null,"start":1}},{"type":"paragraph","content":[{"type":"text","text":"Key features","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"One-click connection via API key, with secure validation and disconnect."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Live class sync — pulls real classes from your dashboard in real time."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag-and-drop or click-to-add insertion."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Four layout styles — Classic, Modern, Minimal, Compact — each previewed before insertion."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"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."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smart fields — student & guardian details, email, mobile, age, gender, and notes, with required/optional handling."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Permission-aware UI that prompts clearly when canvas access is needed."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Polished interface with live status indicators, toast feedback, and loading/error states."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Tech","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"Who it's for","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Studio owners, instructors, coaches, and anyone running scheduled classes who wants bookable forms on Framer in seconds."}]}]},"introduction":"The Booking Engine for website","slug":"booksurfer-booking-forms","author":{"framerUserId":"116e158a-4f9f-41c3-a72e-15ae2eec3c1a","name":"Aivorn Tech","slug":"aivorn-tech","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/116e158a-4f9f-41c3-a72e-15ae2eec3c1a/gnxxx711","metadata":{"tint":"hsl(0 0% 57%)","aspectRatio":1.3333333333333333}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/116e158a-4f9f-41c3-a72e-15ae2eec3c1a/00b9pws5","metadata":{"tint":"hsl(0 0% 57%)","aspectRatio":1.3333333333333333}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/116e158a-4f9f-41c3-a72e-15ae2eec3c1a/ocx5afc2","metadata":{"tint":"hsl(0 0% 57%)","aspectRatio":1.3333333333333333}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/116e158a-4f9f-41c3-a72e-15ae2eec3c1a/rn7naddw","metadata":{"tint":"hsl(0 0% 57%)","aspectRatio":1.3333333333333333}}],"post":null,"createdAt":"2026-06-03T11:18:48.657Z","updatedAt":"2026-07-02T11:01:03.191Z","publishedAt":"2026-06-20T14:49:40.064Z","featuredAt":null,"approvedAt":null,"type":"plugin","attributes":{"framerPluginId":"edfazgt5ylur7cousr0zv6zrx","paid":true,"categories":[{"id":"3176e858-a9a6-426f-894a-e1ef01750d76","name":"Forms","slug":"forms"}]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-08T21:34:10.116Z","updatedAt":"2026-06-08T21:34:10.116Z","reported":false}}],"$L5e"]

Suggested for you