Інтеграція Webflow: API, Zapier, синхронізація

Інтеграція Webflow із зовнішніми сервісами через API та Zapier

Уявіть: у вас на Webflow гарний сайт з формами, блогом і каталогом, але всі замовлення та ліди доводиться копіювати в CRM вручну. Або товари оновлюються з ERP, а ви витрачаєте години на експорт-імпорт CSV. Знайомо? Ми вирішуємо це за допомогою Webflow API та Zapier — налаштовуємо автоматичну синхронізацію, щоб дані текли між системами без участі людини. За 10 років ми провели понад 50 таких інтеграцій для клієнтів з E‑commerce, SaaS та освіти.

Webflow пропонує повноцінний REST API v2 з підтримкою CMS-колекцій, форм, замовлень і контент публікації. API документований, працює за стандартним HTTP, аутентифікація — через bearer-токен. Ліміт 60 запитів на хвилину — достатньо для більшості сценаріїв. Для масових операцій ми використовуємо чергу та батчинг.

Наші спеціалісти розберуться з будь-яким завданням: від простої інтеграції форми до двосторонньої синхронізації з десятками тисяч товарів. Якщо не впевнені, який спосіб підходить вам — отримайте консультацію, ми оцінимо проект і запропонуємо оптимальне рішення.

Як влаштована аутентифікація Webflow API?

Webflow підтримує два способи аутентифікації: API Token (персональний ключ) та OAuth 2.0 (для публічних застосунків). Для власного сайту зазвичай достатньо API Token. Він генерується у розділі «Account Settings» → «API Access». Токен передається в заголовку Authorization: Bearer <token>. Приклад на PHP:

$client = Http::withHeaders([
    'Authorization' => 'Bearer ' . config('services.webflow.token'),
    'accept'        => 'application/json',
]);

// Список сайтів
$sites = $client->get('https://api.webflow.com/v2/sites')->json('sites');

// Колекції конкретного сайту
$collections = $client
    ->get("https://api.webflow.com/v2/sites/{$siteId}/collections")
    ->json('collections');

OAuth 2.0 потрібен, якщо ваш застосунок має працювати з акаунтами різних користувачів Webflow. Процес стандартний: редирект на Webflow, отримання коду, обмін на токен.

Що входить в інтеграцію: чек-лист

Гарантуємо стабільність: після здачі надаємо документацію по інтеграції та 2 тижні безкоштовної підтримки.

Робота з CMS-колекціями: створення та публікація

Додавання елемента в колекцію (наприклад, нова вакансія або стаття із зовнішньої системи):

$response = Http::withHeaders([
    'Authorization' => 'Bearer ' . config('services.webflow.token'),
    'Content-Type'  => 'application/json',
])->post("https://api.webflow.com/v2/collections/{$collectionId}/items", [
    'fieldData' => [
        'name'        => 'Нова стаття',
        'slug'        => 'nova-stattya',
        'description' => 'Текст статті...',
        'published-on' => '2024-01-15T10:00:00Z',
        '_archived'   => false,
        '_draft'      => false,
    ],
]);

$itemId = $response->json('id');

// Після створення елемент у чернетці. Для публікації потрібен окремий запит:
Http::withHeaders([
    'Authorization' => 'Bearer ' . config('services.webflow.token'),
])->post("https://api.webflow.com/v2/collections/{$collectionId}/items/publish", [
    'itemIds' => [$itemId],
]);

Ліміти API v2: 60 запитів на хвилину на токен. При масових операціях — додавайте затримку або батчинг.

Чому варто використовувати вебхук замість polling?

Webflow вміє надсилати події на зовнішній URL. Доступні тригери: form_submission, site_publish, ecomm_new_order, ecomm_order_changed, cms_item_created, cms_item_changed, cms_item_deleted. Це швидше та надійніше, ніж опитування API кожні 15 хвилин через Zapier.

Реєстрація вебхука через API:

Http::withHeaders([
    'Authorization' => 'Bearer ' . config('services.webflow.token'),
    'Content-Type'  => 'application/json',
])->post("https://api.webflow.com/v2/sites/{$siteId}/webhooks", [
    'triggerType' => 'form_submission',
    'url'         => 'https://yoursite.com/api/webhooks/webflow',
]);

Webflow підписує запити заголовком X-Webflow-Signature (HMAC-SHA256). Перевірка підпису обов'язкова для безпеки.

Як налаштувати Zapier для швидкої інтеграції?

Zapier має офіційний Webflow-конектор. Дозволяє пов'язати Webflow-події з тисячами сервісів: Google Sheets, HubSpot, Mailchimp, Slack, Notion тощо. Типовий зап «Нова форма Webflow → лід у HubSpot»:

1. Trigger: «Webflow → New Form Submission» — вибрати сайт і форму
2. Action: «HubSpot → Create Contact» — мапінг полів
3. (опціонально) Filter: тільки якщо поле email не пусте

Zapier polling-based для Webflow: кожні 15 хвилин перевіряє нові заповнення. Для термінових сповіщень використовуйте прямий вебхук — він у 3 рази швидше.

Альтернатива Zapier для більш складних флоу — n8n (self-hosted). Підтримує Webflow через HTTP-ноди та має більш гнучку логіку трансформації даних без обмежень за кількістю операцій.

Порівняння API та Zapier для інтеграції

Якщо сумніваєтеся у виборі, замовте консультацію — ми підберемо оптимальне рішення під ваш бюджет.

Синхронізація CMS із зовнішньою базою: паттерн

Паттерн для синхронізації каталогу товарів з ERP у Webflow CMS:

class SyncProductsToWebflow
{
    public function handle(): void
    {
        $products = Product::where('updated_at', '>', $this->lastSync())->get();

        foreach ($products as $product) {
            $existing = $this->findWebflowItem($product->external_id);

            if ($existing) {
                $this->updateItem($existing['id'], $product);
            } else {
                $this->createItem($product);
            }
        }

        $this->updateLastSync(now());
    }

    private function findWebflowItem(string $externalId): ?array
    {
        // Webflow не підтримує пошук за кастомним полем через API напряму,
        // потрібно зберігати мапінг у локальній таблиці
        $mapping = WebflowItemMapping::where('external_id', $externalId)->first();
        return $mapping ? ['id' => $mapping->webflow_id] : null;
    }
}

Терміни та обсяг робіт

• Проста інтеграція через Zapier (форма → CRM або таблиця): 1–2 години
• Синхронізація CMS-колекції із зовнішньою системою через API: 1 робочий день
• Повноцінна двостороння синхронізація з обробкою конфліктів: 2–3 робочих дні

Економія часу та грошей очевидна: автоматизація виключає ручне введення і скорочує кількість помилок. Якщо вам потрібно інтегрувати Webflow з іншими системами — зв'яжіться з нами. Ми підберемо рішення під ваш бюджет.

Webflow API Documentation

Інтеграція сайту з 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 (Вікіпедія)