An Elementor booking system setup is straightforward: create your offer (for example a free 30-minute intro call), copy the embed code, paste it into Elementor’s HTML widget, then confirm a test booking on the published page. This guide is for web designers, freelancers and small agencies integrating appointment or class booking into client sites built with Elementor, and for service providers editing their own Elementor website.
mivo booking is an external online booking system. It is not a native Elementor widget and not a WordPress plugin. Booking logic runs externally; Elementor displays the booking UI through an embed.
What the finished booking flow looks like in Elementor
Picture a service page: a short offer description, then an embedded booking block underneath. That is how an Elementor booking system feels for visitors: they pick a date and time, submit their details and receive a confirmation, without you editing WordPress for every booking.
We’ll use a free 30-minute intro call as the running example. The same flow works for paid appointments or multi-spot classes. On your Elementor page, the Elementor booking system shows that flow directly inside the embed.
If you need the broader WordPress setup (Gutenberg and other builders), see: How to add a booking system to WordPress.
What you need before you start
- An account at mivo booking
- Access to the WordPress site with Elementor (the HTML widget is part of Elementor’s free widget set; Elementor Pro is not required for this)
- A page you can edit with Elementor and publish
- Optional: a Google account for calendar sync
- Optional: a Stripe account and the Pro plan if customers should pay while booking
You do not need an extra plugin if you want to add booking system to Elementor for appointments and courses. Website embedding and Google Calendar sync are included on the Free plan. Stripe payments and removing branding are Pro features. Details are on the pricing page.
On Free and Pro you can use Unlimited Bookings and Unlimited Event Types. Please follow the Fair Use Policy.
Elementor booking system: step-by-step setup
1. Create an appointment or class
Sign in and create a new event. The entry point is labeled New event / create event. For example:
- Name: “Free intro call”
- Duration: 30 minutes
- Price: 0 (or set a price later if you enable payments)
- Available dates or time slots
- Description and optional custom booking questions
Once saved, the event is bookable on your booking page. Next, add that offer to the page as your Elementor booking system.
2. Copy the embed code
You get the embed as an iframe snippet. You have two practical options:
Embed a single offer: Open the event and choose the Embed action. Configure embed type (standard or full page), height, dynamic height, hide title, alignment and transparent background. Then click Get code and Copy.
Embed the full booking page: In account settings open Website embedding. Generate an embed for the complete booking overview, including options such as tag filter, title, profile image, filters and transparent background.
For the intro-call example, the single-event embed is usually best. That keeps the Elementor booking system focused on one clear offer on the service page.
3. Open the Elementor page and add the HTML widget
In WordPress, open the target page and launch the Elementor editor. Drag the HTML widget where your Elementor booking system should appear, for example below the service description.
According to Elementor’s official HTML widget documentation, this is where you paste HTML (and CSS/JS if needed). You do not need a separate WordPress booking plugin for this setup.
4. Paste the code and style the booking section
Paste the iframe code into the HTML widget. In Elementor, design the surrounding section: spacing, column width, heading above the embed, section background. The booking UI itself (calendar, form, pricing) is controlled in the booking system, including embed options such as height and transparent background.
Tip: for standard embeds, enable dynamic height and choose a starting height so the Elementor booking calendar stays easy to read on desktop. Full-page embeds target viewport height. That fits a dedicated booking page better than a mid-page marketing section.
5. Check the mobile layout
Use Elementor’s responsive preview (tablet/phone) and also open the real page preview. Confirm the iframe uses the full available width (width="100%" is included in the embed snippet) and that your Elementor booking system is not clipped on smaller screens.
If smartphones show nested scrollbars, check embed height first and any fixed heights on the Elementor container wrapping the iframe.
6. Publish and run a test booking
Publish or update the page in Elementor. Then open the live URL and complete a test booking with your own test data. That lets you verify the Elementor booking system end to end, from the form through to the confirmation in the dashboard.
As with many embeds and widgets, the editor often shows a preview only. The clearest view of the final booking flow is on the published page.
Optional: connect payments and calendar
Google Calendar: Calendar sync is available on Free and Pro. Connect it in the calendar integration settings so new bookings can appear in your calendar and help avoid conflicts.
Stripe payments: If customers should pay while booking, you need Stripe and the Pro plan. A free intro call works on Free. When you offer paid sessions or classes, enable payments and set the event price.
Plan details are on the pricing page. If you’re still comparing tools for service businesses, see: Best booking software for service businesses.
Common problems and fixes
Editor and live page don’t match
Check the published page in an incognito window. Save or update again in Elementor. If needed, clear caches from caching plugins or the host. You don’t need to disable security features as a blanket fix.
Embed is blank or won’t load
Confirm the full iframe code is inside the HTML widget and wasn’t split across blocks. Open the embed URL from the src attribute directly in a browser. If that URL works, the issue is usually cache or a broken paste on the page.
Content looks clipped or double-scrolls on mobile
Increase embed height or enable dynamic height, review Elementor section padding, and avoid nested containers with a fixed max height around the iframe.
Offer changes don’t show up
Update times, prices and copy in the booking system. The embed loads the current booking UI, so you usually don’t need to re-paste the iframe for content edits. Re-copy mainly when embed options or the target URL change.
For web designers: handing the booking system to your client
For client projects, the account should belong to the client. You can set up the Elementor booking system once, while bookings, customer data, calendar access and later payments stay under their control, separate from your agency login.
- The client creates the account (or you set it up with their email and hand over access)
- You create events, the embed and the Elementor placement
- The client connects their own calendar and optional Stripe account
- You briefly show where bookings appear in the dashboard and how to edit offers
You don’t need a central agency multi-tenant console for this workflow: each site gets its own account and matching embed.
FAQ: Elementor appointment booking
Do I need Elementor Pro?
No. The free Elementor HTML widget is enough for an Elementor booking system.
Do I need an extra booking plugin?
No. You add a booking system to Elementor without installing a dedicated booking plugin. mivo booking runs externally; WordPress and Elementor only display the embed.
Can customers pay when they book?
Yes. With an Elementor booking system and Stripe on the Pro plan, customers can pay while booking. Free appointments don’t require it.
Can I offer classes with multiple participants?
Yes. You can create bookable events with capacity, including group formats as well as 1:1 appointments.
What do I design in Elementor vs in the booking system?
In Elementor you handle page layout, spacing, typography around the embed and CTA copy. In the booking system you manage offers, availability, prices, booking questions, confirmations, calendar, payments and embed options. That split keeps the Elementor booking system easy to maintain.
Next step: Create your intro call, copy the embed code and place your Elementor booking system with the HTML widget on the page. Start free with mivo booking →
