How to add online booking to your website with Calendly or Cal.com
"Write to me to arrange a time" costs you clients: every message back and forth is a chance for them to give up. A booking calendar on your page lets them pick a free slot and confirm in a minute, while you are busy with something else.
A static site cannot store bookings itself, but scheduling services do all of it: the calendar, the confirmations, the reminders.
The services
- Calendly — the best-known one; you connect your calendar and define types of meetings.
- Cal.com — similar, and open source.
- Google Calendar appointment schedules — booking pages built into Google Calendar, convenient if you already live there.
All of them connect to your calendar, so a slot you are busy in is not offered.
Set it up
- Create an account and connect your calendar.
- Create a meeting type: name, length, where it happens (phone, video, address).
- Set your working hours and a buffer between meetings.
- Decide what to ask when someone books: name, email, phone, a question.
- Copy the link or the embed code.
Embed or link
Link. The Book button opens the booking page. Simple, fast, and the page stays light.
Embed. The calendar appears inside your page, or opens in a pop-up over it. The visitor never leaves your site, which feels more polished.
Add a Book a lesson section with this Calendly embed code, full width on phones, loaded only when the visitor scrolls to it. Make the main button on the first screen lead to that section.
Settings that save trouble
- Minimum notice: no bookings for "in 20 minutes".
- Daily limit: so you do not wake up to eight sessions in a row.
- Reminders by email or text, to reduce no-shows.
- Time zones: the services show slots in the visitor's time zone — worth mentioning on the page if you work with clients abroad.
Paid bookings
Some scheduling services can take payment at booking through Stripe or PayPal. If yours cannot, a payment link works too; see how to accept payments on a static website.
Privacy
The booking form collects names and contacts, and an embedded calendar loads code from the service. Mention on your site who handles the booking data; the service's documentation explains its side.
Embeds of all kinds are covered in how to embed a video and a map.