How to Embed a Booking Form on Your Website

04 Jul 2026 · by Peter Grillet

Your website is where prospects decide to book. Here’s how to embed a Calendr scheduling page directly on any site — no developer required.

How to Embed a Booking Form on Your Website

Visitors who are ready to book should not have to hunt for a scheduling link in your footer or dig through email threads. When you embed a booking form on your website, you put appointment scheduling exactly where intent is highest — on your service page, contact page, pricing page, or landing page.

With calendr.so, embedding is straightforward: create an event type, copy a ready-made iframe snippet, and paste it into your site. No API keys, no JavaScript configuration, and no separate widget to install.

This guide walks through three ways to add booking to your site, platform-specific steps for WordPress, Squarespace, Wix, and custom HTML, and the exact embed code Calendr generates for you.

Why embed booking on your website?

Sending people to an external scheduling link works, but it adds friction. Every extra click is a chance to drop off.

Embedding an embeddable appointment scheduler on your site keeps visitors in context. Someone reading about your consulting packages can book a discovery call on the same page. A prospect on your pricing page can schedule a demo without opening a new tab.

Common placements:

Service pages — book after reading what you offer
Contact pages — replace “email us to schedule” with instant booking
Landing pages — capture campaign traffic while intent is fresh
Team or about pages — let clients book with a specific person

If you have not set up a booking page yet, start with our guide on how to create a booking page first, then come back here to embed it.

Setting up your embedded booking page

Step 1: Get your embed code from Calendr

Before you can add booking to your website, you need an event type — Calendr’s term for a bookable meeting (e.g. “30-Minute Consultation” or “Product Demo”).

Log in to calendr.so.
Go to Event Types in the sidebar (team-wide types also appear under Team Event Types).
Click the event type you want to embed.
Scroll to the Embed Code section on the event type detail page.
Click the copy button next to the code you need.

Calendr gives you one of two snippets depending on the event type:

Team embed code (for team-wide event types with round robin or shared availability):

<iframe src="https://yourfirm.calendr.so/consultation" width="100%" height="600" frameborder="0" scrolling="auto"></iframe>

Personal embed code (books with a specific team member):

<iframe src="https://yourfirm.calendr.so/jane/consultation" width="100%" height="600" frameborder="0" scrolling="auto"></iframe>

Replace yourfirm with your firm’s subdomain and consultation with your event type slug. For personal embeds, jane is the team member’s profile handle.

Before using a personal embed: set your Profile Handle in profile settings. Calendr shows your handle prefix (e.g. yourfirm.calendr.so/) in the profile form. Without a handle, the personal embed code is disabled.

Screenshot suggestion: The Embed Code section on an event type page, showing both Team and Personal embed options with copy buttons.

Step 2: Choose your embed type

Calendr generates iframe code designed to work on any HTTPS website. How you use that code determines the experience on your site.

Inline embed (recommended)

Paste the iframe directly into a page section. The full booking calendar and form appear inside your layout — date picker, time slots, attendee fields, and any custom booking questions you configured.

This is the default Calendr embed. It requires no extra code beyond the snippet you copied.

Tips for inline embeds:

Width: 100% works well inside most content columns.
Height: The default is 600. Increase to 700 or 800 if your booking form has extra fields or you want less scrolling inside the iframe.
Responsive layouts: Wrap the iframe in a container with max-width if your theme uses a narrow content area.

<div style="max-width: 720px; margin: 0 auto;">  <iframe    src="https://yourfirm.calendr.so/consultation"    width="100%"    height="700"    frameborder="0"    scrolling="auto"    title="Book a consultation"  ></iframe></div>

The booking page automatically adapts to the iframe size.

Popup / modal embed

Calendr does not ship a popup widget out of the box, but you can create one with a button and a simple modal that loads the same iframe.

Add a “Book now” button to your page.
On click, open a modal overlay.
Place your Calendr iframe inside the modal.

<button onclick="document.getElementById('booking-modal').style.display='flex'">Book a call</button>

<div id="booking-modal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); align-items:center; justify-content:center; z-index:9999;">  <div style="background:#fff; width:90%; max-width:720px; border-radius:12px; overflow:hidden;">    <iframe      src="https://yourfirm.calendr.so/consultation"      width="100%"      height="650"      frameborder="0"      scrolling="auto"      title="Book a consultation"    ></iframe>  </div></div>

This pattern works well when you want booking available on every page via a header button without dedicating a full section to the scheduler.
Link / floating button (website booking widget style)

Another lightweight option: add a website booking widget-style floating button that links to your Calendr booking page in a new tab, or opens the modal above.

For a simple link button:

<a  href="https://yourfirm.calendr.so/consultation"  target="_blank"  rel="noopener"  style="position:fixed; bottom:24px; right:24px; background:#2563eb; color:#fff; padding:14px 20px; border-radius:999px; font-weight:600; text-decoration:none; box-shadow:0 4px 12px rgba(0,0,0,0.15); z-index:9999;">  Book now</a>

This is not an iframe embed, but it achieves a similar goal — making booking one click away from any page. Many teams use inline embeds on key landing pages and a floating button everywhere else.

Step 3: Add the embed to your platform

WordPress

Edit the page or post where you want the scheduler.
Add a Custom HTML block (in the block editor) or switch to the Text/Code tab in the classic editor.
Paste your Calendr iframe snippet.
Preview the page, then publish.

If your theme strips iframe tags, check that your user role allows unfiltered HTML, or use a plugin that permits iframe embeds on specific pages.

Squarespace

Edit the page in Squarespace.
Click + Add Block → Code.
Paste the iframe embed code.
Save and preview on desktop and mobile.

Squarespace sometimes adds padding around code blocks. Adjust the block’s spacing settings if the embed looks too narrow.

Wix

Open your page in the Wix Editor.
Click Add Elements → Embed Code → Embed HTML.
Paste your Calendr iframe code.
Resize the embed element to fit the booking flow (aim for at least 600px height).

Custom HTML / static sites

Paste the iframe anywhere in your page HTML — inside a <section>, below your hero, or in a two-column layout beside your copy. No special configuration is required.

Calendr booking pages are built to work when embedded on secure (HTTPS) sites. Your production site should use HTTPS for the best compatibility.

Team embed vs. personal embed: which should you use?

Embed typeURL patternBest forTeam | yourfirm.calendr.so/event-slug | Round robin, shared team availability, “book with anyone available”
Personal | yourfirm.calendr.so/handle/event-slug | Booking with a specific consultant, rep, or practitioner

If your event type is team-wide, use the Team Embed Code. If you want every visitor to book with one person, use the Personal Embed Code and make sure that person’s handle is set.
You can embed multiple event types on different pages — a “Free consultation” iframe on your homepage and a “Paid strategy session” iframe on a dedicated services page, each with its own snippet.

What visitors see inside the embed

The embedded booking page is the same experience as your standalone Calendr booking link:

Branded booking page with your firm’s presentation
Live availability pulled from connected calendars
Date and time selection
Attendee information fields
Custom booking forms if you configured pre-booking or during-booking questions
Confirmation with calendar invite details after booking

Because the full flow runs inside the iframe, visitors never need to leave your website to complete a booking.
Learn more about what Calendr supports for website embedding on our embeddable booking pages feature page.

Troubleshooting common embed issues

The iframe is blank or shows an error

Confirm the event type is active and public.
Check that the URL in src matches the embed code from your Calendr dashboard exactly.
Make sure your site is served over HTTPS.

Personal embed code is greyed out

Set a Profile Handle in your profile settings first, then copy the code again.

The embed feels too short or requires too much scrolling

Increase the height attribute on the iframe (try 700–900px).
For pages with long booking forms, inline embeds with taller iframes usually work better than popups.

I want booking on every page without pasting code everywhere

Use a floating “Book now” link button pointing to your Calendr URL, or add the modal pattern to your site’s shared header/footer template.

Round robin is not routing correctly

Use the Team Embed Code, not a personal embed, so Calendr can assign the booking across available team members.

Best practices for embedded booking forms

Place embeds where intent is highest. A scheduling widget on a generic blog post rarely converts as well as one on a “Book a demo” or “Get started” page.
Match embed height to your form. Event types with custom booking forms need more vertical space.
Use team embeds for shared queues. Personal embeds are for named relationships.
Test on mobile. Most iframe embeds are responsive, but your theme’s padding and column widths can affect the experience — preview on a phone before launching a campaign.
Keep the page fast. One iframe per page is usually enough. Multiple embeds on a single page can slow load times.

Start embedding booking on your website

Embedding takes minutes: copy the snippet from your event type, paste it into your site, and your embed scheduling widget is live. No developer, no complex integration, and no ongoing maintenance.

If you are new to Calendr, start your 14-day free trial and create your first event type. Once your booking page is ready, the embed code is waiting on the event type detail page.