65:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/3gx96u50v9idb.js","/creators-assets/_next/static/immutable/chunks/125_ce2ese0y_.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/069_m7850i8jf.js","/creators-assets/_next/static/immutable/chunks/03586ab1rea-b.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0-lv0573a1cyl.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/24gcuxpvxd8dy.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3vd9_7_mqx0kl.js","/creators-assets/_next/static/immutable/chunks/3l37d07td4kzk.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3nw4q_evu8ge1.js","/creators-assets/_next/static/immutable/chunks/3o5qsyzxffd89.js","/creators-assets/_next/static/immutable/chunks/0sdd6rzuigoor.js","/creators-assets/_next/static/immutable/chunks/04onqby6uwgz7.js","/creators-assets/_next/static/immutable/chunks/16d5vpfsnfybw.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/0yulab_mho2q7.js","/creators-assets/_next/static/immutable/chunks/3_6nvj55e699g.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/0pc9t50m5x90i.js","/creators-assets/_next/static/immutable/chunks/3fyhezch4qqad.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0v2aom8xv86j9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0s-n7u5-dwtml.js"],"S"] 66: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.

64:["$","$L65",null,{"value":{"fallback":{"$inf$activity-creator-116e158a-4f9f-41c3-a72e-15ae2eec3c1a-all:/unified/creator/116e158a-4f9f-41c3-a72e-15ae2eec3c1a/activity/":[{"data":[],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:116e158a-4f9f-41c3-a72e-15ae2eec3c1a:/unified/posts/?creator=116e158a-4f9f-41c3-a72e-15ae2eec3c1a&with=reposts":[{"data":[{"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":"$66","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":{"h":0,"s":0,"l":57},"width":3200,"height":2400}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/116e158a-4f9f-41c3-a72e-15ae2eec3c1a/00b9pws5","metadata":{"tint":{"h":0,"s":0,"l":57},"width":3200,"height":2400}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/116e158a-4f9f-41c3-a72e-15ae2eec3c1a/ocx5afc2","metadata":{"tint":{"h":0,"s":0,"l":57},"width":3200,"height":2400}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/116e158a-4f9f-41c3-a72e-15ae2eec3c1a/rn7naddw","metadata":{"tint":{"h":0,"s":0,"l":57},"width":3200,"height":2400}}],"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":"f6795017-0256-4955-b31a-c81a28ef20ff","name":"Integrations","slug":"integrations"}],"tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":1},"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"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L67"}]