Cal.com Integration: Online Booking Without Calendly

Cal.com Integration for Online Booking on Your Site

Picture this: a client visits a dental clinic website at 11 PM, sees a “Book Now” button, selects a convenient time, and gets a confirmation — without any admin involvement. If you're still spending hours on back-and-forth messages, you're losing up to 30% of leads who never wait for a reply. The solution is Cal.com, an open-source scheduler with full data control. It can be deployed as SaaS or on your own server. We help integrate Cal.com so clients book meetings frictionlessly, and you manage the calendar from a single interface. Contact us to discuss integration for your needs.

Why Switch from Calendly to Cal.com?

Calendly is a mature product, but its shortcomings become critical as your business grows. Cal.com, licensed under AGPLv3, solves them: data stays on your server (GDPR-ready), branding is fully yours, and the number of events is not limited by pricing tiers. In practice, self-hosted Cal.com pays for itself in 3–4 months with 200+ meetings per month — you don't pay a subscription fee and aren't dependent on an external provider.

Additionally, Cal.com handles 1.5x more simultaneous bookings thanks to its asynchronous architecture, which is especially important during peak loads. The project has 30k+ stars on GitHub.

What's Included in the Work?

• Documentation — architecture description, widget and API operation manual.
• Access — login credentials for admin panel and server (if self-hosted).
• Training — demonstration of working with the interface and setting up event types.
• Support — technical assistance for 30 days after launch.

How to Integrate Cal.com with CRM?

For seamless synchronization, we use webhooks. When a client books a meeting, Cal.com sends a POST request with JSON data to your backend. Verification of the X-Cal-Signature-256 signature is mandatory. Here's an example handler in Laravel:

Route::post('/webhooks/cal', function (Request $request) { $signature = hash_hmac('sha256', $request->getContent(), config('services.cal.webhook_secret')); if (!hash_equals($signature, $request->header('X-Cal-Signature-256'))) { abort(401); } $payload = $request->json(); match($payload['triggerEvent']) { 'BOOKING_CREATED' => CrmLead::createFromCal($payload['payload']), 'BOOKING_CANCELLED' => CrmLead::cancelFromCal($payload['payload']['uid']), default => null, }; return response('ok'); }); 

What's Needed for Cal.com Integration?

A basic integration includes four components:

• Widget — React/Vue/Pure JS, embedded via iframe or npm package.
• Backend API — REST endpoints for programmatic booking management.
• Webhooks — notifications about meeting statuses to your CRM, Telegram, or email.
• Custom branding — colors, fonts, logo in the booking interface.

For self-hosted, you need a server: minimum 2 vCPU, 4 GB RAM, Docker. We automate deployment via docker-compose — you get a ready scheduler in a few hours.

How to Set Up Self-Hosted Cal.com: Step by Step

1. Prepare the server — install Docker, Nginx, configure the domain and SSL (Let's Encrypt).
2. Launch Cal.com — clone the official repository, run docker-compose.yml with PostgreSQL, Redis, and the application.
3. Configuration — set environment variables: database, SMTP, OAuth for Google/Outlook.
4. First event type — create a meeting (consultation, call) with duration and available slots.
5. Integrate with the site — embed the widget via <script> or React component.

The whole process takes 4–5 hours, including custom branding.

Example Widget Embedding

import { getCalApi } from '@calcom/embed-react'; import { useEffect } from 'react'; export function BookingButton() { useEffect(() => { (async () => { const cal = await getCalApi({ namespace: 'consultation' }); cal('ui', { theme: 'light', hideEventTypeDetails: false, layout: 'month_view', styles: { branding: { brandColor: '#4F46E5' } }, }); })(); }, []); return ( <button data-cal-namespace="consultation" data-cal-link="your-company/consultation" data-cal-config='{"layout":"month_view"}' className="btn-primary" > Book a Consultation </button> ); } 

Cal.com API v2

The REST API allows creating events, listing bookings, managing availability. Example in TypeScript:

const cal = new CalApi({ apiKey: process.env.CAL_API_KEY }); const bookings = await cal.bookings.list({ status: 'upcoming', take: 50, }); const event = await cal.bookings.create({ eventTypeId: 123, start: '2050-03-01T10:00:00Z', attendee: { name: 'Ivan Petrov', email: '[email protected]', timeZone: 'Europe/Moscow', }, }); 

Timelines