Skip to main content
Help centre

Add class booking to your Webflow website

Show your class timetable, packs and memberships on Webflow with one Code Embed element. Setup steps, the plan you need and quick fixes.

8 min readLast reviewed

Quick answer

In Junocal, open Booking page → Embed and copy the code. In Webflow, add a Code Embed element from the Add panel, paste the code, save and publish. The Code Embed element needs an active Webflow Site plan or a Core, Growth, Agency or Freelancer Workspace. The Designer shows a placeholder for scripts, so check the schedule on the published site.

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 Webflow site.

  • An active Webflow Site plan, or a Core, Growth, Agency or Freelancer Workspace, for the Code Embed element.

You'll know it worked when

  • On the published site, the page shows your timetable rather than a placeholder, code 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.

Follow along in Junocal

Open the exact product area, then keep this guide beside it.

Open Embed

Add Junocal booking to Webflow

Clients browse your timetable on your own Webflow page, then register and pay on your secure Junocal booking page. Payments go to your own Stripe account. When you add a Sunday reformer class or cancel a dance workshop in Junocal, your Webflow page shows the change without another publish.

  1. 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. 2

    Adjust the look if you need to, such as the theme or button colour, then select Copy under Copy this code.

  3. 3

    In the Webflow Designer, open the page where clients should book, such as Timetable or Book a class.

  4. 4

    Open the Add panel and drag a Code Embed element to where the schedule should appear.

  5. 5

    Paste the code into the code editor, then select Save and close.

  6. 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 Webflow plan you need

Webflow's Custom code embed help article (checked 19 October 2026) says the Code Embed element is available when your site has an active Site plan, or when you have a Core, Growth, Agency or Freelancer Workspace. Each element holds up to 50,000 characters, far more than Junocal's code needs.

Without one of those plans, add a Webflow Button or navigation link that points to your Junocal booking page. Clients can still book every class, pack and membership you offer.

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 narrow or squeezed into a column

Check these first

  • Webflow gives the Code Embed element the width of whatever holds it, such as a column or container.

  • Check the width of that section, container or column, and of the Code Embed element in the Style panel.

Next step: Move the Code Embed element into a full-width section or container, or set its width to 100% in the Style panel, then publish and recheck on desktop and phone.

The schedule is missing in the Webflow Designer

Check these first

  • Webflow shows a placeholder for code that uses a script.

  • Custom code also doesn't run in expand canvas view.

Next step: Preview or publish the site and check the page there. If the schedule shows on the published page, it's working.

The Code Embed element isn't in the Add panel

Check these first

  • Check whether the site has an active Site plan.

  • Check whether the site belongs to a Core, Growth, Agency or Freelancer Workspace.

Next step: Add a Site plan or move the site to one of those Workspaces. Until then, link a Button to your Junocal booking page so clients can still book.

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 you published the site after adding the code.

Next step: Paste the full code again from Booking page → Embed, save and publish. Visitors whose browsers block scripts will still see the link, which opens your booking page.

Answers before you get stuck

Which Webflow plan do I need for Junocal's booking widget?

An active Site plan, or a Core, Growth, Agency or Freelancer Workspace, because those include Webflow's Code Embed element. Without one, link a Button to your Junocal booking page.

Why doesn't the schedule show in the Webflow Designer?

Webflow shows a placeholder for code that uses a script. Preview or publish the site to see your live schedule.

Does Junocal take a percentage of bookings made through my Webflow 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.