Интеграция Webflow и n8n: автоматизация сайта с ИИ по шагам
Интеграция Webflow и n8n с ИИ строится в три слоя. Webflow отвечает за дизайн, CMS и хостинг. n8n передаёт данные между сайтом и остальными вашими инструментами. ИИ-шаг внутри n8n читает, оценивает или пишет черновики. Связать их можно через встроенные ноды Webflow в n8n или через вебхук. Затем добавляете шаг одобрения человеком перед любой отправкой или публикацией. В итоге сайт сам распределяет заявки и наполняет CMS, а последнее слово остаётся за вами.
Так мы в Pixerry и смотрим на сайт: это не страница, которую запустили и забыли, а система роста, с которой команда работает каждую неделю. Ниже четыре шага настройки.
Что Webflow умеет сам, а что добавляет n8n
На собственной странице интеграции с n8n Webflow прямо разделяет роли. Webflow берёт на себя дизайн, управление контентом и хостинг, но не автоматизацию процессов. Чтобы отправить данные формы в CRM, синхронизировать внешний контент или реагировать на заказы в магазине, нужен внешний слой.
Этот слой — n8n. Его облачная версия, n8n Cloud, даёт визуальный редактор и более 500 нод интеграций, включая нативные ноды Webflow. Есть и шаги с кодом на JavaScript и Python, триггеры по вебхуку и ИИ-функции.
У Webflow есть и собственный ИИ. В октябре 2026 года на странице тарифов для планов Starter, Basic и Premium значились Webflow AI и MCP-сервер, включая генерацию элементов CMS Collection с помощью ИИ. MCP (Model Context Protocol) — стандарт, который позволяет ИИ-агентам в Claude или ChatGPT работать с сайтом напрямую. Эти функции помогают собирать и редактировать сайт внутри Webflow. А n8n отвечает за то, что происходит между Webflow и остальным бизнесом.
| Задача | Где выполняется |
|---|---|
| Дизайн, редактирование и хостинг страниц | Webflow |
| Генерация элементов CMS с помощью ИИ прямо в редакторе | Webflow AI |
| Отправить заявку из формы в HubSpot или Salesforce и уведомить вас в Slack | n8n |
| Оценить заявку или написать черновик статьи с помощью ИИ-модели, затем запросить одобрение | n8n (AI Agent и проверка человеком) |
| Создавать, обновлять или удалять элементы CMS из внешних инструментов | Нода Webflow в n8n или Webflow Data API v2 |
Шаг 1. Как подключить Webflow к n8n
Webflow описывает четыре способа подключения. Каждый подходит для своей задачи, а два варианта с вебхуками по-разному обращаются с данными форм.
| Способ | Для чего подходит | На что обратить внимание |
|---|---|---|
| Ноды Webflow в n8n (триггер и действие) | Заявки из форм, изменения в CMS, заказы, публикация сайта | В n8n Cloud вход через OAuth, а триггер сам регистрирует вебхук в Webflow |
| Вебхук в настройках сайта | Отправка всех форм сайта в n8n | Заявки остаются и в панели Webflow. Секретный ключ показывают только один раз, сохраните его |
| Form action URL | Отправка в n8n одной конкретной формы | Минует хранилище заявок Webflow, поэтому данные не появятся в панели |
| Встроенный чат или форма n8n | ИИ-чат-бот или форма на стороне n8n | Для Code Embed нужен платный тариф сайта. Кнопка со ссылкой на URL n8n Form Trigger работает на любом тарифе |
| API Webflow и n8n | Всё, что не покрывают ноды | Аутентификация по Bearer-токену. OAuth-скоупы нельзя добавить после создания кастомного приложения |
Для большинства небольших команд мы начинаем со встроенных нод: кода там меньше всего. Если всё же отправляете формы через вебхук, берите вебхук из настроек сайта, а не form action URL. Он сохраняет копию каждой заявки в Webflow, и это выручит в тот день, когда автоматизация сломается.
Шаг 2. Заявки из форм Webflow в CRM через n8n
Нода Webflow Trigger срабатывает на восемь событий: Form Submission, Collection Item Created, Updated или Deleted, Ecomm New Order, Order Changed или Inventory Changed и Site Publish. Для работы с заявками выберите Form Submission.
Тестируйте на живом сайте. Из режима предпросмотра Webflow данные форм не отправляет, поэтому сценарий запускают только заявки с опубликованного сайта.
Дальше нужен план на случай сбоя. Если доставить вебхук не удалось, Webflow повторяет попытку до 3 раз с интервалом 10 минут. Если не прошла ни одна, Webflow отключает вебхук насовсем и пишет владельцу аккаунта. Включить его обратно может только поддержка Webflow. Webflow советует отдельный сценарий для ошибок на ноде Error Trigger в n8n: так вы узнаете о проблеме раньше, чем заявки останутся без ответа.
Типичный путь заявки по примеру, который приводит Webflow:
- Посетитель отправляет форму обратной связи на опубликованном сайте в Webflow.
- n8n получает заявку через ноду Webflow Trigger.
- ИИ-шаг оценивает заявку по вашим критериям: бюджет, сроки, услуга.
- n8n создаёт контакт в HubSpot или Salesforce.
- В Slack приходит сообщение о новой заявке с оценкой и объяснением от ИИ.
Шаг 3. ИИ в сценарии n8n под контролем человека
Нода AI Agent в n8n умеет пользоваться инструментами: отправить сообщение, обновить запись в CRM, записать данные в CMS. Риск в том, что агент действует по неверной догадке. Ответ n8n — проверка человеком для ИИ-инструментов. Перед запуском выбранного инструмента проверяющий его одобряет, и инструмент выполняется с данными от ИИ. Или отклоняет: действие отменяется, а ИИ получает об этом сообщение.
Документация n8n рекомендует проверку для необратимых действий (отправка внешних сообщений, удаление данных), для требований комплаенса и для решений с высокой ценой ошибки. Её можно включить для всех инструментов агента или только для выбранных. Одобрение приходит через Slack, Telegram, WhatsApp Business Cloud, Microsoft Teams, Gmail и другие каналы. Причём это не обязательно тот же канал, где идёт диалог.
Наше правило простое. Пусть ИИ свободно читает, сортирует и пишет черновики. А всё, что увидит клиент или что нельзя отменить, проходит через проверку. Опишите схему проверки и в системном промпте агента, как советует документация n8n, чтобы ИИ знал: его действия проверяет человек.
Шаг 4. Черновики от ИИ в Webflow CMS: публикация после одобрения
Нода действий Webflow в n8n выполняет пять операций с CMS: создать, обновить, удалить, получить один элемент и получить все элементы коллекции. Она же может служить инструментом для ИИ-агента. Так агент пишет черновик прямо в коллекцию блога.
Две детали часто подводят. Элементы CMS, созданные через API, могут оказаться в статусе черновика или staged. Тогда нужен отдельный запрос на публикацию (POST /v2/collections/{collection_id}/items/publish) или эндпоинт /items/live, который создаёт и публикует за один шаг. Публикация staged-элементов идёт через ноду HTTP Request в n8n, она использует те же учётные данные Webflow. Кроме того, Webflow разрешает одну публикацию сайта в минуту, поэтому сценарий, который публикует много элементов, должен собирать их в пакеты.
Контент-сценарий с одобрением может выглядеть так:
- План статьи приходит из Notion, одного из источников, которые Webflow приводит в примерах.
- ИИ-шаг пишет и оформляет статью.
- n8n создаёт элемент в Webflow CMS как черновик.
- Операция n8n Telegram Send and Wait for Response присылает вам черновик и ждёт, пока вы подтвердите.
- После одобрения n8n публикует элемент.
Для крупных команд Webflow теперь сам пишет черновики. На Webflow Conf 2026 компания анонсировала AEO-агентов для контента. Они находят темы, по которым ChatGPT, Claude, Gemini и Perplexity цитируют конкурентов, и пишут оригинальные материалы прямо в CMS. AEO — это оптимизация, чтобы ИИ-ассистенты цитировали ваш сайт в ответах. Всем клиентам Enterprise агенты доступны по умолчанию, а на странице тарифов они указаны в плане Team. На тарифах сайта практичный способ автоматизировать черновики по-прежнему — сценарий в n8n.
Проверьте тариф Webflow до начала работы
От лимитов тарифа зависит, насколько далеко зайдёт автоматизация. Вот что показывала страница тарифов Webflow в октябре 2026 года (в долларах США, за сайт, плюс налоги):
| Тариф | Цена | Что важно для автоматизации |
|---|---|---|
| Starter | Бесплатно | 50 заявок из форм на сайт, 50 элементов CMS, CMS API — 60 запросов в минуту |
| Basic | $15 в месяц при оплате за год | Без лимита на заявки из форм, для простых сайтов без CMS |
| Premium (CMS-тариф) | $25 в месяц при оплате за год | 20 000 элементов CMS, CMS API — 120 запросов в минуту |
| Team | $2 500 в месяц, годовой контракт | Платформенный тариф с AEO-агентами, процессами публикации и 100 000 ИИ-кредитов в год |
Одно расхождение, о котором стоит знать: в FAQ на странице интеграции Webflow с n8n до сих пор указаны старые названия тарифов с 2 000 и 10 000 элементов CMS. Ориентируйтесь на страницу тарифов. Если делаете кастомное приложение Webflow, выбирайте OAuth-скоупы (cms:write, forms:read и другие) внимательно: чтобы добавить новый позже, приложение придётся пересобрать.
Цены n8n мы здесь не приводим: проверить их на официальной странице n8n не удалось. Уточните тарифы n8n напрямую, прежде чем закладывать бюджет, а стоимость сайта смотрите в наших ценах.
Автоматизацию сайта на Webflow лучше закладывать на этапе дизайна
n8n подключается к уже работающему сайту на Webflow, так что для старта переделывать его не нужно. И всё же дешевле всего планировать автоматизацию во время дизайна. Поля форм, которые чётко ложатся на свойства CRM, коллекции CMS под черновики от ИИ и заранее выбранный шаг одобрения избавят от переделок потом.
Для небольшой команды (часто это основатель и ещё один человек) именно это делает сайт инструментом, с которым работают каждую неделю. Команда правит страницы без разработчика, заявки попадают к нужному человеку вместе с контекстом, а новый материал выходит после одного нажатия. Мы делаем сайты на Webflow и на Next.js и выбираем под задачу. Когда выигрывает Webflow, причина обычно в визуальном редактировании и в том, что хостинг приложений Webflow Cloud входит в каждый тариф сайта. Подробнее об этом в статье почему Webflow уже не просто конструктор сайтов. Наша услуга дизайна и разработки рассматривает сайт и сценарии вокруг него как один проект.
