About this block
A booking section with a short heading and your Cal.com calendar right on the page. Visitors pick a day and time without leaving your site. It works well as a dedicated booking page or as the last section of a service page.
When to use it
- On a "Book a call" or "Schedule" page that exists only to take bookings.
- At the end of a service page, once you've explained what the meeting covers.
- For consultants, coaches, and clinics that take appointments online.
What's inside
- A centered header: a small eyebrow, an h2 heading, and a short intro.
- A rounded panel below that holds your Cal.com booking calendar in a frame.
- The calendar shows your event name, length, available days, and open time slots.
- The panel is 40rem tall on phones and 46rem from tablet width. Cal.com rearranges its own layout for small screens, and the slot list scrolls inside the frame.
- The panel spans the full page width, up to your site's content width.
How to customize it
- Open the Embed settings and replace the booking URL in the iframe with your own Cal.com link, such as cal.com/your-name/30min.
- Set up the event in Cal.com first: its name, length, and location all show inside the calendar.
- Rewrite the intro to say what happens after booking, like "You'll get a confirmation email and a video link."
- Make the panel taller or shorter by changing its height classes if your event shows more or fewer slots.
Questions
- Can I embed Calendly instead?
- Yes. Replace the link in the iframe with your Calendly booking page URL. Calendly allows its booking pages to be shown in a frame like this.
- Will bookings show up in my calendar?
- Bookings are handled by Cal.com, so they land in whatever calendar you connected there, along with the confirmation emails Cal.com sends.
- Why is there a scroll bar inside the calendar on phones?
- Narrow screens show the calendar and the time slots stacked. The slots scroll inside the frame so the section stays a sensible height.