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

Почему стоит использовать webhook вместо 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.

Регистрация 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). Проверка подписи обязательна для безопасности.

Как настроить 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 — он в 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