Booking Pages Booking & Event Types

What the Booking Page Embed Code Is (and How to Use It)

Embed your calendr booking page directly inside your website so visitors can book without leaving your page.

23 Jun 2026 · by Peter Grillet

The Booking Page Embed Code lets you place your booking page inside another website using an <iframe>.

Instead of sending people to a separate link, you can show scheduling directly on your site (for example on a Contact, Sales, or Support page).

What it’s for

Use embed code when you want to:
  • Let visitors book from inside your website
  • Reduce friction by keeping users on the same page
  • Reuse the same event type in multiple places (site pages, help docs, internal portals)

Where to find it

  1. Open Event Types.
  2. Click the event type you want to share.
  3. In the event type details page, find the Embed Code section.
  4. Copy the code using the copy button.

You may see:
  • Team Embed Code (for team-wide event types)
  • Your Personal Embed Code (for your personal booking URL)

How to use it

  1. Copy the embed code from calendr.
  2. Paste it into your website HTML where you want the booking experience to appear.
  3. Publish/update your page.

Example format:

<iframe src="https://yourfirm.calendr.so/your-handle/your-event-slug" width="100%" height="600" frameborder="0" scrolling="auto"></iframe>

Customizing size

You can safely adjust:
  • width (commonly 100%)
  • height (e.g. 600, 700, 800)

If the booking page feels cramped, increase height.

Important notes

  • Team-wide event types can use the team embed URL.
  • The app is configured for iframe embedding, and the generated code is designed to work on secure (HTTPS) websites.

Quick troubleshooting

  • Nothing appears: check the event type is Active and Public.
  • Personal embed copy disabled: set your profile handle first.
  • Frame too short: increase iframe height.

Related help articles

How to Add Multiple-Choice Questions to Booking Forms

Use multiple-choice questions to collect consistent information before a meeting. Choose whether attendees can select one answer or several, add one option per line, and make a response required when your team needs it.

How Multi-Host Event Types Work

Multi-host event types let bookers schedule meetings that require more than one team member. Learn how primary and additional hosts work, why the distinction matters, and what happens when someone books a slot.

Team Event Type fallback options (and when to use each)

Team Event Types let you control how bookings are routed across your team. Choose between Round robin, Default assignee, or Visitor select, and use fallback behavior to avoid losing bookings when a team member is unavailable.