Интеграция 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'        => 'novaya-statya',
        '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 рабочих дня.