Інтеграція 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