Cal.com integration for online booking on a website
Cal.com is an open-source alternative to Calendly. Can be used as SaaS (cal.com) or self-hosted on your own server. Gives full control over data, branding, and settings.
Self-hosted vs cloud
| Parameter | cal.com (cloud) | Self-hosted |
|---|---|---|
| Cost | Free / Pro from $12/mo | Hosting only |
| Branding | Cal.com logo on widget | Fully custom |
| Data | On Cal.com servers | On your server |
| Setup | Minutes | 2–4 hours |
Embedding via npm package
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
Cal.com provides REST API for programmatic management:
const cal = new CalApi({ apiKey: process.env.CAL_API_KEY });
// Get booked meetings
const bookings = await cal.bookings.list({
status: 'upcoming',
take: 50,
});
// Create event programmatically
const event = await cal.bookings.create({
eventTypeId: 123,
start: '2025-03-01T10:00:00Z',
attendee: {
name: 'Ivan Petrov',
email: '[email protected]',
timeZone: 'Europe/Moscow',
},
});
Cal.com Webhooks
Route::post('/webhooks/cal', function (Request $request) {
// Verify signature
$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');
});
Timeline
Cal.com integration (cloud) with widget and webhook: 2–3 working days. Self-hosted + custom branding: 4–5 days.