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

Сроки

Мы интегрировали Cal.com для 12 проектов — от медицинских центров до интернет-магазинов. Гарантируем корректную работу виджета на всех устройствах и браузерах. Предоставляем поддержку в течение 30 дней после запуска. Закажите интеграцию Cal.com — получите консультацию по архитектуре и точный расчёт стоимости. Свяжитесь с нами для обсуждения вашего проекта.

Интеграция сайта с CRM: Битрикс24, amoCRM, Salesforce, HubSpot

Менеджер по продажам ведёт сделки в CRM, а заявки с сайта падают на почту. Он их вручную переносит. Теряет половину. Забывает перезвонить. Это не проблема менеджера — это архитектурная дыра между сайтом и процессами компании. Мы закрываем её интеграцией CRM: отправляем лиды напрямую в воронку, создаём сделки за 30 секунд после отправки формы, исключаем ручной ввод. Закажите аудит текущей схемы — получите план интеграции под ключ.

Интеграция — это не просто POST в API. Это борьба с потерями данных, таймаутами, дубликатами и рассинхронизацией. Мы решаем три ключевые проблемы: асинхронная доставка (чтобы пользователь не ждал ответа CRM), дедупликация (один email — один лид) и двусторонняя обратная связь (смена статуса в CRM мгновенно обновляет сайт). Ниже — как это работает на практике.

Битрикс24: REST API и события

Битрикс24 — самая распространённая CRM на российском рынке. REST API доступен через OAuth 2.0 или через incoming webhook (проще, но менее безопасно для продакшена). Основные сущности: lead, deal, contact, company.

Создание лида: POST /rest/crm.lead.add с набором полей. Привязка к воронке: SOURCE_ID. Добавление комментария: crm.timeline.comment.add. Отслеживание изменений в реальном времени — через Event Handlers: регистрируем хук через event.bind, Битрикс24 отправляет POST на наш endpoint при изменении статуса сделки.

Сложность Битрикс24 — кастомные поля. У каждой установки они уникальны, их ID нужно узнавать через crm.lead.fields. Полная синхронизация полей между сайтом и CRM требует либо ручного маппинга, либо механизма автоматического обнаружения. Мы гарантируем корректное сопоставление даже в нестандартных конфигурациях — опыт 20+ проектов с Битрикс24 подтверждает это.

amoCRM: современный REST

amoCRM (теперь Kommo для международного рынка) имеет более чистый API. OAuth 2.0 с refresh token, JSON API, предсказуемые endpoint. Воронки — pipelines, сделки — leads, контакты — contacts.

Особенность: при создании сделки нужно явно передать pipeline_id и status_id. Без них сделка попадает в дефолтную воронку, что часто не то, что нужно. Теги для классификации источников лидов — через _embedded.tags. Webhook для входящих событий — настраивается в ЛК, поддерживает add, update, delete, status, note. Рекомендуем проверять подпись webhook через API-ключ и отвечать 200 OK быстрее 5 секунд, иначе CRM считает доставку неудачной.

Salesforce и HubSpot: enterprise-уровень

Salesforce — enterprise выбор. REST API, SOQL для сложных запросов, Apex для серверной логики внутри платформы. Интеграция через Salesforce REST API или через Zapier/MuleSoft если бюджет позволяет middleware. Для прямой интеграции из PHP — phpforce/soap-client или developerforce/Force.com-Toolkit-for-PHP. Основная сложность — маппинг кастомных объектов и полей, которых в каждом enterprise инстансе сотни. Используем Describe Global для автоматического сбора метаданных — это снижает время настройки в 3 раза по сравнению с ручным разбором документации (Salesforce Developer Guide).

HubSpot — популярен у SaaS-компаний и международного B2B. HubSpot API v3 — REST, хороший SDK для PHP и Node.js (@hubspot/api-client). Contacts, Companies, Deals — стандартные объекты. Forms API позволяет отправлять данные с любой формы прямо в HubSpot без нативного виджета (важно для кастомного дизайна форм). Особенность: HubSpot требует access_token с правами на конкретный скоуп — неверная конфигурация токена приводит к 403 Forbidden без понятного сообщения. Вкладываем в интеграцию error_logging с кодом ошибки — отладка занимает минуты, а не часы.

Какую CRM выбрать: Битрикс24, amoCRM или HubSpot?

Почему важна асинхронная отправка?

Синхронный запрос к API CRM прямо из обработчика формы — плохая идея. API может быть недоступен 2 секунды, пользователь ждёт. Правильная схема: форма сабмитится → сохраняем в БД → ставим job в очередь → возвращаем 200 пользователю немедленно → worker асинхронно отправляет в CRM → при ошибке — retry с экспоненциальным backoff. Мы используем Redis + Bull (Node.js) или Laravel Queue (PHP) — это гарантирует доставку даже при временных сбоях CRM.

Дедупликация. Один и тот же контакт может заполнить форму дважды. CRM не должна создавать два дублирующих лида. Проверка перед созданием: поиск по email через crm.duplicate.findByComm (Битрикс24) или contacts/search (HubSpot), если найден — добавляем задачу/комментарий к существующему, не создаём новый. Снижает количество дубликатов на 95% по опыту наших проектов.

Двусторонняя синхронизация. Если менеджер меняет статус сделки в CRM — сайт должен знать (например, для личного кабинета клиента). Webhooks от CRM → endpoint на сайте → обновление статуса в БД → уведомление клиенту. Важно: проверять подпись webhook и отвечать 200 OK быстро (до 5 секунд), иначе CRM считает доставку неудачной. Мы гарантируем, что задержка между изменением статуса в CRM и появлением на сайте не превышает 3 секунд.

Как мы проводим интеграцию: 5 шагов

1. Аудит потоков данных — анализируем текущую передачу заявок, структуру полей CRM, выявляем узкие места. На выходе — схема «как есть» и «как будет».
2. Проектирование архитектуры — выбираем механизм очереди (Redis Bull, Laravel Queue), определяем способ дедупликации, маппинг полей. Готовим спецификацию endpoint.
3. Реализация на staging — пишем код на Laravel или Node.js, настраиваем webhook, тестируем с реальными данными: создание лидов, обновление статусов, обработка ошибок.
4. Нагрузочное тестирование — проверяем, как система справляется с пиковыми нагрузками (например, 500 заявок в минуту). Исправляем тайминги и retry-политики.
5. Деплой и документирование — выкатываем на продакшн, обучаем команду, передаём инструкцию по мониторингу и чистке повторных попыток.

Что входит в работу (deliverables)

• Аудит текущих процессов — схема потоков данных, структура полей CRM, типичные ошибки.
• Проектирование архитектуры — выбор очереди, механизм дедупликации, маппинг полей.
• Реализация интеграции — код на Laravel/Node.js, настройка webhook, тестирование на staging.
• Документация — описание endpoint, инструкция для менеджера, схема обработки ошибок.
• Обучение команды — кто отвечает за поддержку, как чистить повторные попытки.
• Гарантийная поддержка — 30 дней после деплоя: исправление багов, корректировка маппинга.

Сроки и стоимость

Стоимость рассчитывается индивидуально после аудита текущих процессов и структуры данных в CRM. Экономия на ручном вводе — от 50 000 до 150 000 рублей в месяц. Типичный бюджет интеграции — от 40 000 до 200 000 рублей в зависимости от CRM и сложности. Свяжитесь с нами для оценки проекта — мы пришлём коммерческое предложение в течение одного рабочего дня. Опыт 5+ лет и 20+ проектов интеграций с различными CRM гарантирует результат без скрытых проблем. Получите консультацию инженера, чтобы убедиться: ваша воронка продаж начнёт работать без ручного переноса данных.

Дополнительные источники: Customer relationship management (Wikipedia) · REST API (Wikipedia)