Booking

Visitors pick a time in your Cal.com calendar right on your page. The calendar loads only after they click the button, so your page stays fast, and it takes your site’s theme and accent color. Cal.com handles the rest: availability, confirmations, reminders and calendar invites.

Templates: all of them. Service: Cal.com (cloud or self-hosted).

Where the booking block is

Template	Page
Aurora	Demo page
Blaze	Trips page
Bloom	Weddings page
Burin	Learn page
Deckle	About page
Encore	Info page
Fold	Schools page
Hush	Groups page
Iris, Swell	Pricing page
Jab	Membership page
Kerf	Process page and Contact page
Lantern	Schools & groups page
Putty	Cakes page
Quest	Press kit page
Razor	Services page
Stride	Training page
Stroll	Walks page and every walk’s page
Tiny Town	Homes page and every home’s page
Wag, Whisker	Adopt page
Handy, Kelvin, Mint, Tuck	Prices page
Docket, Lava, Slab	Contact page
Chalk, Ember, Junction, Toon	Visit page

All of them use one booking link for the whole site.

Without a link

The block shows its title and text with a note saying booking isn’t connected yet (some templates, such as Handy, show a preview of a calendar that can’t be clicked). Nothing is loaded from Cal.com.

1. Create your booking link in Cal.com

1. Sign up at cal.com and connect your calendar when it asks, so booked times are blocked.
2. Open Event Types and create one (or edit the default), e.g. “Site visit, 30 minutes”. Set its length, your availability and where it happens.
3. Copy the event’s link. It looks like https://cal.com/your-name/site-visit.
4. Your booking link is the part after cal.com/: your-name/site-visit. Team events work too: team/your-team/site-visit.

2. Add it to .env

PUBLIC_CALCOM_LINK=your-name/site-visit
PUBLIC_CALCOM_ORIGIN=https://cal.com

• PUBLIC_CALCOM_LINK: only the user/event part, not the full address. A full URL or a link without the event part isn’t accepted, and the page keeps saying booking isn’t connected.
• PUBLIC_CALCOM_ORIGIN: leave it at https://cal.com. Change it only if you host Cal.com yourself (e.g. https://cal.example.com).

Both are public settings (they end up in the page, which is fine: your booking link is public anyway). Restart npm run dev.

3. Try it on your computer

1. Open the page with the booking block (table above).
2. The block now shows a button to open the calendar and a link to open the booking page on Cal.com in a new tab.
3. Click the button. The calendar appears in the page, in your site’s theme (switch the site’s theme and reload: it follows).
4. Pick a day and a time and make a test booking with your own email. Cal.com sends the confirmation, and the booking shows in Cal.com under Bookings and in your connected calendar. Cancel it there afterwards.

4. Put it online

1. In Vercel, Settings → Environment Variables: add PUBLIC_CALCOM_LINK (and PUBLIC_CALCOM_ORIGIN only if you changed it).
2. Redeploy. PUBLIC_ settings are written into the pages at build time, so the change appears only after a new build.

Changing the texts

The block’s title, text, button, fallback link and “not connected” note are in the content editor, on the page that shows it (look for the group marked “Cal.com”, e.g. Prices page → Book a visit (Cal.com) in Handy).

Troubleshooting

What you see	Why, and what to do
Still “not connected”	The link isn’t in the user/event form (no https://, no cal.com/), or the server wasn’t restarted. Online: the variable is missing or you didn’t redeploy
The calendar area stays empty after the click	The event link doesn’t exist or is hidden in Cal.com. Open https://cal.com/ followed by your link in a browser to check. A browser extension that blocks third-party scripts can also stop it; the “book on Cal.com” link still works
Wrong times or days	Availability and time zone are set in Cal.com, not on your site