56:I[473921,["/creators-assets/_next/static/immutable/chunks/456dxp3afc8vw.js","/creators-assets/_next/static/immutable/chunks/2bxtessbrg0z1.js","/creators-assets/_next/static/immutable/chunks/0bntpu9zyiup3.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/3npaj8f4glbs_.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/2knggklfeqwdv.js","/creators-assets/_next/static/immutable/chunks/18e_sauhpyyit.js","/creators-assets/_next/static/immutable/chunks/13xqrk3e5k8yu.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/3oybmd01gs-b6.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/1yn3k6g09tq32.js","/creators-assets/_next/static/immutable/chunks/3ly-i84yiij4i.js","/creators-assets/_next/static/immutable/chunks/1cey7skpirawe.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/2n9qmawfhavju.js","/creators-assets/_next/static/immutable/chunks/0m8lhf01xskqj.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/2lxef2-u417vc.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/439i_r5_4eszl.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3xmobvbzj3637.js","/creators-assets/_next/static/immutable/chunks/26fs9mkd8gzie.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/110hzb6dmcbdr.js","/creators-assets/_next/static/immutable/chunks/2eiu9v0ook5ln.js","/creators-assets/_next/static/immutable/chunks/1zt764sfv2wd7.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/3gx0_q52o4oil.js","/creators-assets/_next/static/immutable/chunks/0u_jiik6ovv_e.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/1tvhyiuh-gmez.js"],"PostDetailCard"] 57: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.

53:[["$","$L56",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":"$57","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","reported":false,"type":"post"}}],"$L58"]

Suggested for you