Quick answer
In Junocal, open Booking page → Embed and copy the code. In Framer, insert an Embed component, paste the code into its HTML section and publish. Use the Embed component rather than Project Settings → Custom Code, which runs site-wide and can't place the schedule on one part of a page. Check the schedule on the published site, on desktop and phone.
Before you begin
At least one published class, course or product in Junocal, so the page has something to show.
Owner or admin access in Junocal, and permission to edit and publish the Framer project.
A published Framer site, so you can check the schedule on the live page.
You'll know it worked when
On the published site, the page shows your timetable rather than code, a blank space or a plain link.
Choosing a class opens your Junocal booking page at the right class, date and price.
On a phone, the timetable fits the screen without sideways scrolling or being cut off.
Follow along in Junocal
Open the exact product area, then keep this guide beside it.
Add Junocal booking to Framer
Clients browse your timetable on your own Framer page, then register and pay on your secure Junocal booking page. Payments go to your own Stripe account. When you add an evening yoga class or a new term of piano lessons in Junocal, your Framer page shows it without another publish.
- 1
In Junocal, open Booking page → Embed. Choose Full booking page to show classes, appointments, packs and memberships together, or pick one section such as Schedule, Courses or Memberships.
- 2
Adjust the look if you need to, such as the theme or button colour, then select Copy under Copy this code.
- 3
In Framer, open the page where clients should book, such as Timetable or Book a class.
- 4
Open the Insert menu, search for Embed and drag the Embed component to where the schedule should appear.
- 5
Paste the code into the Embed component's HTML section.
- 6
Publish the site. Open the published page in a private window and on your phone, choose a class and follow it to checkout without paying.
Which Framer plan you need
Framer's help articles on the Embed component and on custom code don't list a plan requirement, and its pricing page doesn't list custom code as a plan feature (all checked 19 October 2026).
You can also link a Framer button or navigation item to your Junocal booking page, so clients can book from every page of your site.
What visitors see if scripts are blocked
Junocal's code includes a plain “Book [your studio] online” link that needs no script. When the script runs, your live schedule takes its place.
If a visitor's browser blocks scripts, they see that link instead. It opens your full Junocal booking page, where they can book as usual.
Troubleshooting
Start with the symptom that matches what you can see. Check the existing record before repeating a booking, payment or import.
The schedule is cut off or has its own scroll bar
Check these first
Check the Embed component's height on the canvas.
Check the page on a phone too, where the timetable is longer than on desktop.
Next step: Make the Embed component taller so it fits your longest week, then publish and recheck on desktop and phone.
Nothing shows where the schedule should be
Check these first
Check whether the code went into Project Settings → Custom Code instead of an Embed component.
Check that you published the site after adding the code.
Next step: Remove the code from Custom Code, add an Embed component where the schedule should appear, paste the code into its HTML section and publish.
Visitors see a plain booking link instead of the schedule
Check these first
Check that you pasted the whole code, including the script line at the end.
Check that the code is in the Embed component's HTML section, not its URL field.
Next step: Paste the full code again from Booking page → Embed into the HTML section, then publish. Visitors whose browsers block scripts will still see the link, which opens your booking page.
Answers before you get stuck
Can I add class booking to a Framer site?
Yes. Insert an Embed component, paste the code from Booking page → Embed into its HTML section and publish. Clients book and pay on your Junocal booking page, into your own Stripe account.
Should I use Framer's Custom Code settings or the Embed component?
The Embed component. It places the schedule exactly where you drop it on the page. Custom Code in Project Settings is for site-wide scripts such as analytics.
Does Junocal take a percentage of bookings made through my Framer site?
Not on paid plans. Starter, Studio and Growth have no Junocal transaction fee, and clients pay through your own Stripe account. The Free plan has a 4% Junocal fee instead of a monthly subscription.
Did this guide solve the problem?
Make the change, or ask with your account attached
Open the relevant Junocal screen now. If your question depends on a particular client, payment or class, contact support from the app to include the page and studio context.