Booking CTA split (Cal.com)

Two-column CTA with copy and a benefit checklist on the left and a large Schedule a call button on the right that opens your Cal.com booking page in a new tab.

bookingschedulingcalctasplitconversionsection

About this block

A two-part card that asks visitors to book a call. The left side explains what the call is and lists three reasons to take it. The right side is a bold panel with one Schedule a call button that opens your booking page in a new tab, so people never lose your site.

When to use it

  • On a services or agency site where a discovery call is the main next step.
  • At the end of a pricing or case study page, for visitors who want to talk before they buy.
  • On a consulting or coaching homepage, as the main call to action.

What's inside

  • A rounded card on your theme's light surface colour with a soft shadow.
  • Left column: a small eyebrow, an h2 heading, a short paragraph, and a three-item checklist with check icons.
  • Right column: a panel in your primary colour with a meeting-length line, a large "Grab a time" label, a short note, and a full-width button with a calendar icon.
  • The button links to a Cal.com booking page and opens it in a new tab.
  • On phones the two halves stack, with the copy above the booking panel. From tablet width they sit side by side.

How to customize it

  • Point the button at your own booking link. Any Cal.com, Calendly or other scheduling URL works.
  • Change the meeting line to match your call, for example "15 min · phone call".
  • Rewrite the checklist with the three questions people ask before booking: cost, length, and what happens next.
  • Keep the note under the big label honest about what the button does, such as "Opens our booking page in a new tab."

Questions

Can I use Calendly instead of Cal.com?
Yes. The button is a plain link, so paste your Calendly, Cal.com, SavvyCal or Google Calendar booking URL into the button's link setting.
Why does it open a new tab instead of a popup?
A new tab works on every device and keeps your page open behind it. Visitors finish booking and come straight back to your site.
Should I embed the calendar instead?
Use this card when you want a short pitch first. If visitors already know they want to book, a full inline calendar on its own page gets them there with one less click.

Browse other blocks

Same library cards — preview live and grab the code from any block.

View full library

Booking inline (Cal.com)

Centered heading with an inline Cal.com scheduling iframe below. Drop-in booking page.

Booking meeting cards (Cal.com)

Three responsive meeting-type cards with duration, description, benefit list, and a CTA that opens Cal.com.

Rental home detail with availability calendar (Hospitable)

One vacation-rental home, found by the slug in the page address: name, location, a photo gallery that opens a full-screen viewer for every photo, guest and room facts, description, amenities, check-in times, and a sticky card with the from-price, a month-by-month calendar of open and booked nights with nightly prices where guests tap check-in and check-out to see the nights and total, and booking: when the homes are sold through checkout, a dates-and-guests form where guests pay (or have their card held for your approval) right on the page; otherwise a Book button to your booking site.

Rental homes grid (Hospitable)

A grid of vacation-rental homes from the properties collection: photo, the next open date, city, guests, bedrooms, baths and the lowest nightly price, each card linking to its home page.

Next open times (Cal.com)

The next six open times for a Cal.com event, from the open-times collection: the day, the start and end time and a Book link that opens Cal.com on that day.

Hero split

Two-column hero with eyebrow, heading, description, and CTAs on the left. Image on the right.

Features three columns

Centered heading with three columns, each showing an icon, title, body text, and link.

Simple CTA

Centered call-to-action on an accent background with heading, description, and buttons.

Footer multi-column

Grid footer with brand blurb and multiple link columns. Copyright and social links at the bottom.

Navigation bar

Standard header with logo, nav links, primary CTA, and a mobile hamburger menu.

Testimonial cards

Two-column grid of testimonial cards with quote, photo avatar, name, and role.

“

Hero centered

Clean centered hero with eyebrow, large heading, description, and two CTA buttons.