Embed A Booking Page On Your Website In One Line
Every Appntmnts.io booking page has an embeddable twin. Paste one iframe into your site and visitors pick a time and confirm without ever leaving your page. No script tag, no plugin, no build step, and it is on the free plan.
The Two Snippets You Need
Replace yourname With Your Own Username.
One Specific Event Type
Drops visitors straight into a single meeting type. Best for a landing page with one offer.
<iframe
src="https://appntmnts.io/embed/yourname/30-minute-call"
title="Book A Meeting"
width="100%"
height="760"
frameborder="0"
loading="lazy"
style="border:0;min-height:700px;max-width:100%;">
</iframe>Your Whole Booking Page
Shows every event type you publish and lets the visitor choose. Best for a contact or "book us" page.
<iframe
src="https://appntmnts.io/embed/yourname"
title="Book A Meeting"
width="100%"
height="820"
frameborder="0"
loading="lazy"
style="border:0;min-height:700px;max-width:100%;">
</iframe>Anywhere You Can Paste HTML
It Is A Standard Iframe, So There Is Nothing Platform-Specific To Install.
WordPress
Add a Custom HTML block in the block editor, or use a Code widget in a page builder, and paste the snippet in.
Webflow
Drop an Embed element onto the page and paste the snippet into it.
Squarespace
Add a Code block to the section where you want the calendar and paste the snippet in.
Shopify
Paste the snippet into a page in the admin using the HTML view, or into a custom section in your theme.
Plain HTML
Paste the snippet anywhere in your page body. There is no script tag and nothing to install.
React, Vue Or Svelte
Render the iframe like any other element. There is no SDK to add and no client-side dependency.
Four Things Worth Doing
Set A Minimum Height
Use width 100 percent and a min-height of around 700 pixels. The booking page inside is responsive, but a short frame will make guests scroll inside a scroll.
Add loading="lazy"
If the embed sits below the fold, lazy loading keeps it out of your initial page load and protects your Core Web Vitals.
Link Straight To One Event Type
Sending people to /embed/yourname/your-event-type instead of /embed/yourname removes a click. On a landing page with a single offer, that click costs conversions.
Track The Frame As A Conversion
Treat "reached the embed" and "completed a booking" as two separate events in your analytics. The gap between them tells you whether the offer or the calendar is the problem.
About Embedding
Where It Works, What It Costs, And How To Size It.
Yes. It is a standard iframe, so it works on WordPress, Webflow, Squarespace, Shopify, a plain HTML page, or any framework that lets you paste HTML.
No. The whole flow, including picking a time and confirming, happens inside the frame on your page.
Yes. Every booking page has an embeddable version at /embed/yourname/your-event-type.
Yes. Point the iframe at /embed/yourname to show your whole booking page, or at /embed/yourname/your-event-type to drop visitors straight into one event type.
Not if you give the iframe a width of 100 percent and a minimum height of around 700 pixels, as shown in the snippet on this page. The booking page inside is responsive.