Інтеграція Cal.com для онлайн-запису на сайті
Cal.com — open-source альтернатива Calendly. Можна використовувати як SaaS (cal.com) або розгорнути на власному сервері. Дає повний контроль над даними, брендингом та налаштуваннями.
Self-hosted vs облако
| Параметр | cal.com (облако) | Self-hosted |
|---|---|---|
| Вартість | Free / Pro від $12/мес | Тільки інфраструктура |
| Брендинг | Логотип Cal.com на віджеті | Повністю кастомний |
| Дані | На серверах Cal.com | На вашому сервері |
| Налаштування | Хвилини | 2–4 години |
Вбудовування через npm-пакет
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"
>
Записаться на консультацію
</button>
);
}
Cal.com API v2
Cal.com надає REST API для програмного управління:
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: '2025-03-01T10:00:00Z',
attendee: {
name: 'Іван Петров',
email: '[email protected]',
timeZone: 'Europe/Moscow',
},
});
Cal.com Webhooks
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');
});
Терміни
Інтеграція Cal.com (облако) з віджетом та webhook: 2–3 робочих дні. Self-hosted + кастомний брендинг: 4–5 днів.