Інтеграція 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',
  },
});

Терміни