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

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

Webflow надає офіційний REST API для роботи з CMS-коллекціями, формами, замовленнями й користувачами. Це один з найвідкритіших no-code конструкторів з точки зору API: документація повна, аутентифікація стандартна, ліміти розумні.

Webflow API: аутентифікація й базові запити

Два варіанти аутентифікації:

• API Token — персональний ключ користувача, підходить для серверних інтеграцій
• OAuth 2.0 — для публічних додатків, які працюють з аккаунтами різних користувачів

Для власного веб-сайту достатньо API Token. Генерується в "Account Settings" → "API Access".

$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');

Робота з 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 запитів на хвилину на токен. При масових операціях — додавайте затримку або батчинг.

Webhooks з Webflow

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

Реєстрація webhook через 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):

public function verifyWebflowSignature(Request $request): bool
{
    $secret    = config('services.webflow.webhook_secret');
    $body      = $request->getContent();
    $signature = $request->header('X-Webflow-Signature');
    $expected  = hash_hmac('sha256', $body, $secret);

    return hash_equals($expected, $signature);
}

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 хвилин проверяет нові заповнення. Для срочних сповіщень це неприйнятно — потрібен прямий webhook.

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

Синхронізація 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 робочих дні.