Adding a booking calendar to your existing website takes about five minutes if you have access to edit your site’s HTML. This is a walk-through using Zedule, but the same pattern works for Calendly, Acuity, and most other booking platforms that support iframe embed.
What you need
- A Zedule account with at least one service configured (45-day free trial).
- Edit access to your website’s HTML.
- About 5 minutes.
Step 1: Get the embed snippet
In Zedule: Settings → Booking Page → Share your booking page → Copy embed code. The snippet looks like this:
<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>
The ?embed=1 query param strips Zedule’s header/footer so the
widget feels native to your site.
Step 2: Paste it where you want booking to happen
The pattern that converts best:
- Sticky CTA at the bottom of the homepage.
- Top of every service page.
- End of every blog post.
Or just on a dedicated /book page that all your CTAs link to.
Step 3: Test on a phone
About 80% of customers will book from a mobile device. Open your website on a phone, scroll to the iframe, walk through a real booking. If anything renders wrong (iframe too tall, scroll trapped, button cut off), fix it before going live.
Common gotchas
Iframe is too tall on desktop
The iframe height is fixed (e.g., 820px). On desktop screens the iframe shows whitespace below the booking flow. Fix: reduce the height. 720px works for most service businesses.
Iframe scrolls oddly on iPhone
iOS Safari sometimes traps scroll inside iframes. Fix: add
-webkit-overflow-scrolling: touch to the iframe’s parent
container.
CSS conflicts
If your site has aggressive global CSS, it might leak into the
iframe content. iframes are sandboxed in modern browsers — this
shouldn’t happen, but if you see weird styling, check your CSS for
unintended * selectors or universal resets.
Loading=lazy
Use loading="lazy" on the iframe so it doesn’t load until the
visitor scrolls near it. Saves bandwidth on the initial page load.
Customisation options
The iframe can be styled around:
max-width— controls how wide the booking widget renders.border-radius— match your site’s corner radius.border— usuallynoneto feel native.background-color— set the iframe’s outer container background to match your site.
You can’t customise inside the iframe directly (the booking flow is on Zedule’s domain). Color customisation happens in Settings → Booking Page → Branding (custom hex).