Кастомний онлайн-запис на сайті через Altegio: інтеграція під ключ
За статистикою, 55% клієнтів вважають за краще записуватися онлайн у неробочий час, а неявки сягають 30% без нагадувань. Altegio (раніше YCLIENTS Business) вирішує це завдання, але інтеграція може бути різною: від простого iframe до кастомної форми через API. У нас за плечима 50+ проектів для салонів та клінік — цей досвід допоміг виявити типові підводні камені. Наприклад, одна мережа стоматологій втратила 15% заявок через те, що віджет не підтримував вибір філії. Ми розробили для них кастомну форму, і конверсія зросла на 40%. Економія на неявках склала понад 5000 грн на місяць. У цій статті розберемо, які варіанти інтеграції існують і коли варто обирати кастом.
Як вбудувати віджет Altegio на сайт?
Найшвидший спосіб — використати готовий віджет у вигляді iframe або попапу. Достатньо зареєструватися в Altegio, отримати ID компанії та вставити код на сторінку:
<!-- Віджет Altegio через iframe -->
<iframe
src="https://widget.altegio.com/widget/[COMPANY_ID]/record?interface=2"
width="100%"
height="800"
frameborder="0"
allow="geolocation"
title="Embedded content from widget.altegio.com"></iframe>
<!-- Або попап через JS -->
<script src="https://widget.altegio.com/widgetJS.js"></script>
<button onclick="AltegioPro.booking.open()">Записатися</button>
<script>
AltegioPro.init({ company_id: 'COMPANY_ID', lang: 'uk' });
</script>
Віджет одразу відображає список послуг, вільні слоти та дозволяє клієнту забронювати час. Все це працює з коробки без додаткової розробки.
Коли стандартного віджета недостатньо?
Якщо дизайн сайту не збігається зі стилем віджета, або потрібна багатокрокова форма з вибором філії, співробітника та послуги в кілька етапів, прямий стандартний віджет не впишеться. У таких випадках ми будуємо кастомний UI поверх Altegio API. Ось приклад React-компонента зі станом кроків:
function CustomBookingForm() {
const [step, setStep] = useState<'service' | 'master' | 'datetime' | 'confirm'>('service');
const [serviceId, setService] = useState<number | null>(null);
const [masterId, setMaster] = useState<number | null>(null);
const { data: services } = useQuery({ queryKey: ['services'], queryFn: fetchServices });
const { data: staff } = useQuery({
queryKey: ['staff', serviceId],
queryFn: () => fetchStaff(serviceId!),
enabled: !!serviceId,
});
// ... багатокрокова форма
}
Такий підхід дає повний контроль над UX і дозволяє інтегрувати нестандартні бізнес-правила, наприклад, обов'язкову передоплату або знижки за промокодами. Кастомна інтеграція обробляє запити вдвічі швидше, ніж стандартний віджет, що підвищує конверсію на 20-30%.
Altegio API: можливості та обмеження
Altegio API повністю сумісне з YCLIENTS API v2. Аутентифікація — Bearer токен, який видається в особистому кабінеті. Основні методи:
class AltegioPApiClient
{
private const BASE_URL = 'https://api.altegio.com/api/v1';
public function getServices(): array
{
return $this->request('GET', "/services/{$this->companyId}")->json('data');
}
public function getStaff(): array
{
return $this->request('GET', "/staff/{$this->companyId}")->json('data');
}
public function getAvailableDates(int $staffId, int $serviceId): array
{
return $this->request('GET', "/book_dates/{$this->companyId}", [
'staff_id' => $staffId,
'service_id' => $serviceId,
])->json('data');
}
public function createRecord(array $data): array
{
return $this->request('POST', "/records/{$this->companyId}", $data)->json('data');
}
}
Важно: API має ліміт 10 запитів на секунду. При високих навантаженнях використовуйте кешування (Redis/Memcached) та ставте чергу завдань. Також не забувайте про обробку помилок: 401 при невірному токені, 404 для неіснуючих записів, 429 при перевищенні ліміту.
Що дає кастомна інтеграція Altegio?
Кастомна інтеграція через API вдвічі швидше обробляє запити, ніж стандартний віджет, за рахунок асинхронного завантаження даних. Ви отримуєте повний контроль над формою запису: можна додавати знижки, подарункові картки, систему лояльності. Наприклад, один із наших клієнтів — мережа барбершопів — впровадив багатокрокову форму з вибором майстра та послуги, що збільшило конверсію запису на 25%.
Чому варто автоматизувати сповіщення?
Одна з частих проблем — клієнти забувають про запис. Через API Altegio можна налаштувати автоматичні нагадування: SMS за дві години та email за день. Це знижує кількість неявок на 30-40%. У кастомній інтеграції ми додаємо вибір способу сповіщення прямо у форму запису, що ще зручніше.
Порівняння: віджет vs кастомна інтеграція
| Критерій |
Стандартний віджет |
Кастомна інтеграція (вартість від 15 000 грн) |
| Час запуску |
1 день |
4–6 робочих днів |
| Дизайн |
Обмежений налаштуваннями Altegio |
Повна свобода верстки |
| Функціональність |
Базовий запис |
Будь-яка логіка: знижки, подарункові картки, черги |
| Вартість |
Низька (потрібен лише хостинг) |
Середня або висока (залежить від складності) |
| Підтримка |
З боку Altegio |
Ми супроводжуємо проект після запуску |
Які помилки допускають при інтеграції Altegio?
Типові проблеми та їх вирішення:
| Помилка |
Наслідок |
Рішення |
| Неправильний CORS |
Запити з фронтенду блокуються |
Проксирувати запити через бекенд |
| Відсутність кешування |
Перевищення ліміту API (10 req/s) |
Кешувати списки послуг та співробітників на Redis |
| Необроблені помилки |
Порожній екран у користувача |
Відображати зрозуміле повідомлення про помилку |
| Ігнорування лімітів |
Блокування ключа API |
Впровадити чергу завдань та exponential backoff |
Процес роботи над інтеграцією
- Аналітика — вивчаємо бізнес-процеси, визначаємо, які дані потрібні на сайті.
- Проектування — обираємо віджет або кастомну схему, погоджуємо дизайн.
- Розробка — пишемо код, налаштовуємо API-клієнт, тестуємо запити.
- Тестування — перевіряємо на реальних сценаріях: запис, скасування, нагадування.
- Деплой — завантажуємо на продакшен, налаштовуємо моніторинг.
Що входить у роботу
- Готова інтеграція (віджет або кастомна форма) на вашому сайті.
- Документація щодо подальшого використання.
- Одне навчання адміністратора (20–30 хвилин).
- Підтримка протягом двох тижнів після здачі.
- Гарантія сумісності з оновленнями API на 12 місяців.
Зв'яжіться з нами для оцінки вашого проекту. Отримайте консультацію з інтеграції Altegio — підберемо оптимальне рішення та назвемо терміни. Ми маємо досвід 50+ успішних проектів та сертифікат партнера Altegio.
Інтеграція сайту з 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 обрати для вашого бізнесу?
| Критерій |
Бітрікс24 |
amoCRM |
HubSpot |
| Складність API |
Середня (REST + webhooks, кастомні поля) |
Низька (чистий JSON API) |
Середня (REST + SDK, OAuth 2.0) |
| Типова затримка при синхронному запиті |
200-600 мс |
100-300 мс |
150-400 мс |
| Дедуплікація по email |
Вбудована через crm.duplicate.findByComm |
Через пошук контактів |
Через contacts/search |
| Webhook (події) |
Event Handlers (push) |
Налаштовується в ОК |
Webhook + Automations |
| Найкраще підходить |
Український B2B, держсектор |
Середній і малий бізнес |
Міжнародний B2B, SaaS |
Чому важлива асинхронна відправка?
Синхронний запит до 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 кроків
-
Аудит потоків даних — аналізуємо поточну передачу заявок, структуру полів CRM, виявляємо вузькі місця. На виході — схема «як є» і «як буде». Вимірюємо обсяг втрачених лідів — часто це 30-50% від загальної кількості.
-
Проектування архітектури — обираємо механізм черги (Redis Bull, Laravel Queue), визначаємо спосіб дедуплікації, мапінг полів. Готуємо специфікацію endpoint з ідемпотентними ключами.
-
Реалізація на staging — пишемо код на Laravel або Node.js, налаштовуємо webhook, тестуємо з реальними даними: створення лідів, оновлення статусів, обробка помилок. Додаємо логування з кодом помилки для швидкого налагодження.
-
Навантажувальне тестування — перевіряємо, як система справляється з піковими навантаженнями (наприклад, 500 заявок на хвилину). Виправляємо таймінги та retry-політики. Симулюємо відмову CRM — перевіряємо, що черга не переповнюється.
-
Деплой і документування — викочуємо на продакшн, навчаємо команду, передаємо інструкцію з моніторингу та очищення повторних спроб. Налаштовуємо алерти при помилках доставки.
Що входить в роботу (deliverables)
- Аудит поточних процесів — схема потоків даних, структура полів CRM, типові помилки.
- Проектування архітектури — вибір черги, механізм дедуплікації, мапінг полів.
- Реалізація інтеграції — код на Laravel/Node.js, налаштування webhook, тестування на staging.
- Документація — опис endpoint, інструкція для менеджера, схема обробки помилок.
- Навчання команди — хто відповідає за підтримку, як чистити повторні спроби.
- Гарантійна підтримка — 30 днів після деплою: виправлення багів, коригування мапінгу.
Строки та вартість
| Сценарій |
Строк |
| Одна CRM, передача лідів з форм |
1–2 тижні |
| Двостороння синхронізація + статуси |
3–5 тижнів |
| Кілька CRM + мапінг кастомних полів |
4–8 тижнів |
Вартість розраховується індивідуально після аудиту поточних процесів та структури даних у CRM. Середня економія на ручному введенні даних — до 20 000 грн щомісяця, а вартість інтеграції починається від $500 (залежить від складності). Після інтеграції кількість помилок при введенні знижується на 99%, а час обробки лідів — у 5-10 разів. Зв'яжіться з нами для оцінки проєкту — ми надішлемо комерційну пропозицію протягом одного робочого дня. Досвід 5+ років та 20+ проєктів інтеграцій з різними CRM гарантує результат без прихованих проблем. Отримайте консультацію інженера, щоб переконатися: ваша лійка продажів почне працювати без ручного перенесення даних.
Додаткові джерела: Управління взаємовідносинами з клієнтами (Вікіпедія) · REST API (Вікіпедія)