Set up a Webflow booking system by embedding a booking platform like mivo booking with Webflow’s Code Embed element. Create your offer, copy the embed code and place it where you want it. Visitors can then pick a time or class seat and book.
This guide is for web designers adding appointment booking to client sites, and for service providers who run their own Webflow website. We use a free 30-minute intro call as the running example, then cover what changes for classes and workshops.
mivo booking is a standalone booking platform. Booking admin lives in mivo booking; Webflow handles your site layout and the embedded booking block.
Besides embeds, there are Webflow-native booking apps that work with Designer forms. An external Webflow booking system via embed fits best when the client owns the account and day-to-day bookings, you need appointments and classes in one tool, and you do not want to lock the setup to a single website builder. If you must style the booking UI pixel-perfect like the rest of the Webflow page, a native form setup can be the better choice.
What you need to set up a Webflow booking system
You will need:
- Access to the Webflow site.
- A Webflow plan that unlocks the Code Embed element.
- A mivo booking account and a bookable offer.
- Optional: a Google Calendar to connect.
- Optional: Stripe and mivo booking Pro for payments during booking.
Which Webflow plan do you need?
According to Webflow’s Code Embed documentation, the feature is available with an active Site plan or a Core, Growth, Agency or Freelancer workspace.
Check first whether Code Embed is unlocked in your project. A free mivo booking account does not make every Webflow requirement free.
What is free in mivo booking?
Website embedding, Google Calendar sync and booking confirmations are included on Free. Unlimited bookings and event types apply under the Fair Use Policy. Stripe payments and removing branding need Pro.
For a free intro call you can start on Free. Current plans are on the pricing page.
Webflow booking system setup: step by step
1. Create your appointment in mivo booking
Decide what visitors should book. For our example, create an offer like this:
| Setting | Example |
|---|---|
| Offer | Free intro call |
| Duration | 30 minutes |
| Price | Free |
| Availability | Your planned call times |
| Description | Short note on who the call is for |
| Booking question | “How can I help you?” |
Before you embed, check the public booking view. Are the right times shown? Is the offer clear? Are only required fields mandatory?
That lets you validate the booking flow without the site layout.
2. Copy the right embed code
Open the embed options for the offer in mivo booking and copy the full code.
Decide whether visitors should see a single offer or your full booking overview:
- Single offer: best on a service page for the intro call.
- Booking overview: useful on a central page with multiple offers.
For this example we place the intro call on its service page so visitors do not hunt for it in a list.
Use the code mivo booking generates. Do not invent an embed URL or remove parts you do not understand.
3. Add the Code Embed element in Webflow
Open the page in the Webflow Designer. This is how you add booking system to Webflow: choose where Webflow appointment booking should appear and add a Code Embed from the Add panel.
Place it in a container under the service description. Open the element’s code editor, paste the code and save.
Use the executable Code Embed element. A code block that only displays source as an example is not enough.
A clear page flow for the intro call is:
Explain the offer → name duration and process → let them pick a time.
4. Set width, spacing and background
Style the area around the booking block. In Webflow that means container width, padding, heading and section background.
Leave enough room for the Webflow booking calendar and form. A tight column makes booking harder than it needs to be.
Styling inside the embed is separate. Fonts and button styles from your Webflow page do not automatically apply inside an external iframe. Use the embed options in mivo booking instead.
Good layout defaults:
- A booking area that uses the available container width.
- Enough space between intro copy and the calendar.
- No unnecessarily low fixed height on the wrapping container.
- An embed height that still works for later booking steps.
If your embed supports dynamic height, try it. Still check every step for clipped content.
5. Check mobile booking
Switch to narrower breakpoints in the Designer and also test on a real phone.
Do not only check the first calendar screen:
- Are date and time easy to tap?
- Do form fields and buttons stay fully visible?
- Is there horizontal scrolling?
- Does a later step get clipped?
- Is spacing still comfortable on small screens?
If something looks off, check embed width and height first, then fixed heights and overflow on parent containers.
6. Publish to a staging URL
Publish first to your Webflow staging address, such as your webflow.io subdomain, before you push changes to the client domain.
Webflow supports publishing to the staging subdomain separately.
Embeds can behave differently in the Designer, preview and on a published page. The decisive test is the published staging URL.
7. Run a full test booking
Open the staging page in a private window and book the intro call with your own test data.
Then confirm:
- The booking appears in the mivo booking dashboard.
- Date, time and timezone are correct.
- The confirmation reaches the test email.
- Answers to booking questions were saved.
- Calendar sync behaves as configured.
Clean up the test booking so it does not block real availability. When layout and flow look right, your Webflow booking system is ready for the intended domain.
Make classes and workshops bookable in your Webflow booking system
A one-to-one appointment reserves a time slot. A workshop lets multiple people join the same offer.
As a second example, take a workshop with twelve seats. You will set date, duration, capacity, description and optionally a price.
Before the booking block, the page should make clear:
- Who the workshop is for.
- When and where it happens.
- What the price includes.
- Whether guests book one session or a related series.
Pay attention to the difference between a course series and individually bookable class dates. The offer setup must match what the website promises.
Also test capacity and waitlists if you use them. The Webflow booking system uses the same embed steps as for the intro call.
Optional in a Webflow booking system: payments and Google Calendar
Collect payments during booking
For paid appointments and classes, use Stripe with mivo booking Pro. Connect the provider and check payment settings on the offer.
On client projects, payment should belong to the client’s account. Clarify which fees come from the booking tool and which from the payment provider.
Test checkout in a dedicated test setup when available. A free test booking does not prove payments and your Webflow booking system work together.
Connect Google Calendar
Connect the intended Google Calendar if needed. Confirm new bookings land in the right calendar and how existing events affect availability.
Seeing a calendar event is not enough to prove conflict rules are configured correctly.
Common problems with a Webflow booking system
Code Embed is missing
Check the site or workspace plan and your project permissions against current Webflow requirements.
The Designer only shows a placeholder
That can happen with embedded code. Check preview and then the published staging page before you change the code.
The booking stays blank on the published page
Confirm the embed code was saved in full and the booking URL loads. Check the browser console and network tab for errors.
A booking page that opens fine alone can still fail when embedded, for example because of blocked scripts, framing limits or site configuration.
Content is clipped on phones
Check embed height, container height and overflow. Make sure the fix still works after time selection and on the form step.
For web designers: hand the Webflow booking system to the client
Plan handover during setup. The client account, calendar and optional Stripe should clearly belong to that business. For the agency workflow see booking system for web designers.
Walk the client through the key tasks on the live offer:
- Edit offers and availability.
- Review bookings and attendees.
- Adjust confirmations and booking questions.
- Understand who owns changes and support.
Write down what you still handle after launch so the Webflow booking system stays clear after handover.
Related guides
Same idea in other builders: add a booking system to WordPress and Elementor booking system setup.
FAQ: Webflow booking system
Can I set up Webflow appointment booking for free?
mivo booking has a free plan with website embedding. Your Webflow project still needs a plan that unlocks Code Embed.
Do I need an extra Webflow app?
For this path you need a mivo booking account and the Code Embed element. A Marketplace app is not required.
Can I fully style the booking system in Webflow?
You style the surrounding layout in Webflow. Changes inside the external booking UI use mivo booking’s embed options.
Can I offer appointments and classes on the same site?
Yes. With a Webflow booking system you can embed matching offers on different service pages or use one shared booking overview.
Does booking sync with the Webflow CMS?
An embed shows the booking UI on the site. A Webflow booking system does not automatically sync offers or bookings with Webflow CMS collections. This flow does not need that sync.
Next step for your Webflow booking system
Start with one clear appointment or class. Create it in mivo booking, embed it on a staging page and test the full flow on desktop and mobile. That is how you ship a reliable Webflow booking system.
When selection, booking and confirmation work, publish the booking section to your live site.
Start free with mivo booking → Free vs Pro details are on the pricing page.
