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