Skip to main content
Embed your Cal ID booking link directly in your website so clients can book without leaving your page. You choose how it appears — inline, as a floating button, as a pop-up, or as an email link — and the booking grid resizes to fit desktop, tablet, and mobile screens.

​
What embedding gives you

  • On-page booking: Visitors book without navigating to an external link, so they stay on your site.
  • Responsive layout: The booking grid adapts to any screen size, from wide monitors to phones.
  • Matches your branding: Set colors and button text so the scheduler fits your site’s design.
  • Always available: Visitors can book confirmed meetings at any time, without email back-and-forth.
Follow these steps to generate and use your unique embed code.
1

Access your event settings

  • Log in to your Cal ID account.
  • Navigate to the Event Types tab from your dashboard.
  • Find the specific event you want to embed (e.g., “15-Minute Discovery Call”).
  • Click the three dots (…) on the right side of the event card and select Edit.
2

Open the Embed menu

Inside the event editor, click on the Embed tab, then choose one of the four ways to display your calendar:
Embeds the full scheduling calendar directly into your webpage content.
Embed tab in the event editor with the Inline option selected and a preview of the booking calendar

Picking the inline embed layout

3

Customize the look (optional)

On the left side of the Embed screen, you will find a Settings panel. Use this to:
  • Change colors to match your brand.
  • Adjust the button text.
  • Modify the visibility settings.
4

Copy and paste the code

  • Once you have selected and styled your embed, click the Get Code button.
  • Copy the code provided.
  • Paste the code into the header or the HTML section of your website.
Multiple embeds on one page: You can place more than one scheduler on a single page — for example, a “15-Minute Intro Call” and a “60-Minute Technical Consultation” side by side. Each embed works independently, so visitors pick the meeting that fits their needs.

​
Which embed type should I use?

​
More ways to share and extend events

Enable Apps

Turn installed apps on or off for the event you’re embedding.

Event Webhooks

Send booking data from this event to another application in real time.

Group Events

Host a one-time webinar or GD where many attendees share a slot.

Share Your URL

Other ways to share your booking link beyond your website.

Related topics

Enable Apps per Event TypeSetting Up Event-Specific WebhooksOne-Time Group EventsFind and Share Your Cal ID URL