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

Терміни

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

Інтеграція сайту з CRM: Бітрікс24, amoCRM, Salesforce, HubSpot

Менеджер з продажів веде угоди в CRM, а заявки з сайту падають на пошту. Він їх вручну переносить. Теряє половину. Забуває передзвонити. Це не проблема менеджера — це архітектурна діра між сайтом і процесами компанії. Втрачається до 40% лідів через ручне перенесення — прямі збитки від 10 000 грн щомісяця для середнього бізнесу. Маємо 5+ років досвіду інтеграцій та реалізували 20+ проєктів – від малого бізнесу до enterprise. Закриваємо діру інтеграцією 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 підтверджує це. Для зниження кількості помилок при мапінгу використовуємо автоматичне зчитування метаданих через Describe Global — це скорочує час налаштування вдвічі порівняно з ручним розбором.

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 вважає доставку невдалою. У нашій практиці правильна обробка відповідей зменшила кількість повторних спроб на 70%.

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). Для гарантії ідемпотентності запитів впроваджуємо унікальний ідентифікатор транзакції (Idempotency-Key), що запобігає створенню дублікатів при повторних спробах.

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 обрати для вашого бізнесу?

Чому важлива асинхронна відправка?

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

Як працює дедуплікація?

Один і той же контакт може заповнити форму двічі. CRM не повинна створювати два дублюючих ліди. Перевірка перед створенням: пошук по email через crm.duplicate.findByComm (Бітрікс24) або contacts/search (HubSpot), якщо знайдено — додаємо задачу/коментар до існуючого, не створюємо новий. Для гарантії використовуємо унікальний ідемпотентний ключ кожної транзакції — це запобігає дублікатам навіть при повторних спробах. Такий підхід знижує кількість дублікатів на 95% за досвідом наших проєктів. Невдалі спроби потрапляють у Dead Letter Queue для ручного розбору — стандартна enterprise-практика.

Двостороння синхронізація

Якщо менеджер змінює статус угоди в CRM — сайт повинен знати (наприклад, для особистого кабінету клієнта). Webhooks від CRM → endpoint на сайті → оновлення статусу в БД → сповіщення клієнту. Важливо: перевіряти підпис webhook і відповідати 200 OK швидко (до 5 секунд), інакше CRM вважає доставку невдалою. Ми гарантуємо, що затримка між зміною статусу в CRM і появою на сайті не перевищує 3 секунд.

Як ми проводимо інтеграцію: 5 кроків

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

Що входить в роботу (deliverables)

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

Строки та вартість

Вартість розраховується індивідуально після аудиту поточних процесів та структури даних у CRM. Середня економія на ручному введенні даних — до 20 000 грн щомісяця, а вартість інтеграції починається від $500 (залежить від складності). Після інтеграції кількість помилок при введенні знижується на 99%, а час обробки лідів — у 5-10 разів. Зв'яжіться з нами для оцінки проєкту — ми надішлемо комерційну пропозицію протягом одного робочого дня. Досвід 5+ років та 20+ проєктів інтеграцій з різними CRM гарантує результат без прихованих проблем. Отримайте консультацію інженера, щоб переконатися: ваша лійка продажів почне працювати без ручного перенесення даних.

Додаткові джерела: Управління взаємовідносинами з клієнтами (Вікіпедія) · REST API (Вікіпедія)