The iframe is the unsung hero of small-business website integrations. It’s a tiny HTML element that lets you drop one website inside another. For booking platforms, it’s the cleanest way to put a booking flow on your existing site without writing custom code.
What an iframe is
An iframe is an HTML element that displays another web page inside your page. Think of it as a window into another site. The content inside the iframe is hosted somewhere else (book.zedule.app); the container around it is on your site.
The HTML looks like this:
<iframe src="https://book.zedule.app/your-slug?embed=1" width="100%" height="820"></iframe>
That single line creates a working booking widget on your page.
Why use an iframe
Pros:
- Customers stay on your domain throughout the booking flow.
- No development work required.
- Works on every modern browser.
- Easy to update — change the iframe src and redeploy.
Cons:
- Can’t customise the booking flow itself (it’s hosted on the platform).
- Some older browsers don’t support iframes well.
- Can’t pass dynamic data into the iframe (some platforms allow this via URL parameters).
For 90% of small-business use cases, the pros win.
The standard Zedule iframe snippet
<iframe
src="https://book.zedule.app/your-slug?embed=1"
width="100%" height="820"
style="border:none;border-radius:12px;max-width:720px;"
loading="lazy"
title="Book an appointment"
></iframe>
What each piece does:
src— the URL the iframe loads. The?embed=1query strips the Zedule chrome (header/footer) so the booking flow feels native.width="100%"— fills the available width.height="820"— fixed height; adjust based on your booking flow’s content.style="border:none"— no visible border around the iframe.border-radius:12px— rounds the corners; match your site.max-width:720px— caps how wide it gets on big screens.loading="lazy"— defers loading until the visitor scrolls near it. Performance.title— accessibility; screen readers read this.
Where to embed
The pattern that converts:
- Sticky CTA at the bottom of your homepage.
- Top of every service page.
- End of every blog post.
- A dedicated
/bookpage that all your CTAs link to.
Common issues
Iframe height is wrong
If the booking flow is shorter than the iframe height, you see
whitespace below. Reduce height until it matches.
If the booking flow is taller, customers have to scroll inside the
iframe (works, looks awkward). Increase height.
Iframe loads slowly
Make sure loading="lazy" is set. It defers the load until the
iframe enters the viewport. Speeds up initial page load.
Iframe blocked by your site’s security headers
If your site has a strict Content-Security-Policy, you may need to
allow frame-src https://book.zedule.app. Check your CSP if the
iframe doesn’t load.
Mobile iframe scroll issues
iOS Safari sometimes traps scroll inside iframes. Add
-webkit-overflow-scrolling: touch to the parent container or
upgrade to a Cloudflare Pages-hosted variant.