Інтеграція Cal.com: онлайн-запис на сайті без Calendly

Інтеграція Cal.com для онлайн-запису на сайті

Уявіть: клієнт заходить на сайт стоматології о 23:00, бачить кнопку «Записатися», обирає зручний час і отримує підтвердження — без участі адміністратора. Якщо ви досі витрачаєте години на листування, ви втрачаєте до 30% лідів, які не дочекаються відповіді. Рішення — Cal.com, open-source планувальник із повним контролем даних. Розгорнути можна як SaaS або на своєму сервері. Ми допомагаємо інтегрувати Cal.com так, щоб клієнти бронювали зустрічі без тертя, а ви керували календарем з одного інтерфейсу. Зв'яжіться з нами, щоб обговорити інтеграцію під ваші завдання.

Чому варто перейти з Calendly на Cal.com?

Calendly — зрілий продукт, але його недоліки стають критичними при зростанні бізнесу. Cal.com з ліцензією AGPLv3 вирішує їх: дані зберігаються на вашому сервері (GDPR-ready), брендинг повністю ваш, кількість подій не обмежена тарифами. На практиці self-hosted Cal.com окупається за 3–4 місяці при 200+ зустрічах на місяць — ви не платите за підписку і не залежите від зовнішнього постачальника.

При цьому Cal.com обробляє в 1.5 рази більше одночасних бронювань завдяки асинхронній архітектурі, що особливо важливо при пікових навантаженнях. Проект має 30k+ зірок на GitHub.

Що входить в роботу?

• Документація — опис архітектури, інструкція з експлуатації віджета та API.
• Доступи — дані для входу в адмінку та сервер (якщо self-hosted).
• Навчання — демонстрація роботи з інтерфейсом та налаштування типів подій.
• Підтримка — технічна допомога протягом 30 днів після запуску.

Як інтегрувати Cal.com з CRM?

Для безшовної синхронізації ми використовуємо webhooks. Коли клієнт бронює зустріч, Cal.com надсилає POST-запит з JSON-даними на ваш бекенд. Верифікація підпису X-Cal-Signature-256 обов'язкова. Приклад обробника на 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'); }); 

Що потрібно для інтеграції Cal.com?

Базова інтеграція включає чотири компоненти:

• Віджет — React/Vue/Pure JS, вбудовується через iframe або npm-пакет.
• Backend API — REST-ендпоінти для програмного керування бронюваннями.
• Webhooks — сповіщення про статус зустрічей у вашу CRM, Telegram або email.
• Кастомний брендинг — кольори, шрифти, логотип в інтерфейсі бронювання.

Для self-hosted потрібен сервер: мінімум 2 vCPU, 4 GB RAM, Docker. Ми автоматизуємо розгортання через docker-compose — ви отримуєте готовий планувальник за кілька годин.

Як налаштувати self-hosted Cal.com: покроково

1. Підготовка сервера — встановлення Docker, Nginx, налаштування домену та SSL (Let’s Encrypt).
2. Запуск Cal.com — клонуємо офіційний репозиторій, запускаємо docker-compose.yml з PostgreSQL, Redis та додатком.
3. Конфігурація — задаємо змінні оточення: база даних, SMTP, OAuth для Google/Outlook.
4. Перший тип події — створюємо зустріч (консультація, дзвінок) з тривалістю та доступними слотами.
5. Інтеграція з сайтом — вбудовуємо віджет через <script> або React-компонент.

Весь процес займає 4–5 годин, включаючи кастомний брендинг.

Приклад вбудовування віджета

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

REST API дозволяє створювати події, отримувати список зустрічей, керувати availability. Приклад на 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: 'Іван Петров', email: '[email protected]', timeZone: 'Europe/Kyiv', }, }); 

Терміни