Интеграция 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/Moscow', }, }); 

Сроки