n8n Cloud

Webflow handles site design, content management, and hosting—but not workflow automation. For routing form data to a CRM, syncing external content, or triggering actions on ecommerce orders, you'll need an external layer.

That's where n8n Cloud comes in. Native integration nodes read and write Webflow CMS items, listen for form submissions, and respond to ecommerce events—powering anything from Slack notifications to Notion-to-Webflow publishing pipelines with AI formatting.

It's a fit for content managers, marketers routing leads to HubSpot or Salesforce, ecommerce operators, and agencies managing multiple client sites. Developers also get direct access to the Webflow Data API through n8n's HTTP Request node.

How to integrate n8n Cloud with Webflow

What is n8n Cloud? n8n Cloud is a managed workflow automation platform where you build automations in a visual editor without maintaining servers or infrastructure. It includes over 500 integration nodes — including native Webflow nodes — along with JavaScript and Python code steps, webhook triggers, and AI capabilities. n8n Cloud handles hosting, OAuth authentication, and version upgrades automatically.

Teams connect n8n Cloud to Webflow when they need to move data between Webflow and other tools without writing custom middleware. Common starting points include routing form submissions to a CRM, syncing blog posts from Notion into Webflow CMS, or sending Slack notifications when new ecommerce orders arrive.

The n8n Cloud-Webflow integration supports 4 approaches:

• The n8n Webflow nodes handle CMS item operations and event triggers without writing code.
• Webhooks let you route form submissions and site events from Webflow to n8n workflows directly.
• Embedded n8n components place chat widgets and multi-step forms on Webflow pages using Code Embed elements.
• The Webflow and n8n APIs give you full control over CMS collections, ecommerce orders, form data, and workflow management, but require server-side development.

Most implementations combine two or more of these methods depending on the complexity of the setup.

Connect with n8n's Webflow nodes

n8n includes two built-in nodes for Webflow — an action node for CMS item operations and a trigger node that listens for Webflow events. This is the most direct way to connect the two platforms. On n8n Cloud, authentication uses browser-based OAuth with no manual credential entry required. The trigger node automatically registers and manages webhooks with Webflow, so there is no URL copying or webhook dashboard work involved.

To set up the Webflow nodes in n8n Cloud:

1. Open your n8n Cloud workflow editor and click + to add a node.
2. Search for Webflow Trigger and select it. Click Create New Credential and choose Connect my account to authenticate through your browser.
3. Select your Webflow site from the dropdown, then choose an event type — Form Submission, Collection Item Created, Ecomm New Order, or any of the 8 supported events.
4. Activate the workflow. n8n registers the webhook with Webflow automatically.

After activation, Webflow events begin flowing into the workflow without any separate webhook setup in Webflow. This gives you the fastest path to live event handling with native n8n nodes.

The Webflow action node supports five CMS operations:

• Create a new CMS collection item
• Update an existing CMS collection item
• Delete a CMS collection item
• Get a single CMS collection item
• Get all items in a collection

These operations cover the core CMS item CRUD workflows available through the built-in node.

The Webflow Trigger node fires workflows in response to these events:

• Form Submission
• Collection Item Created, Updated, or Deleted
• Ecomm New Order, Order Changed, or Inventory Changed
• Site Publish

Together, the action and trigger nodes cover the main native Webflow automation patterns inside n8n Cloud.

The action node also works as a tool for AI agents within n8n, where parameters can be set automatically or directed by AI. For Webflow API operations not covered by the built-in nodes — such as publishing staged items, managing ecommerce orders, or working with form submission data — use n8n's HTTP Request node with Predefined Credential Type set to Webflow. This reuses your existing credentials to call any Webflow v2 API endpoint.

Route Webflow data with webhooks

Webhooks offer a code-free way to send Webflow form submissions and site events to n8n workflows. There are two approaches depending on whether you need Webflow to keep storing form submissions internally.

Site settings webhook

This method sends all form submissions site-wide to n8n while Webflow continues to store them in its own submissions panel. It also supports webhook signature verification for security.

To set up a site settings webhook:

1. In n8n Cloud, create a new workflow and add a Webhook node. Set the HTTP method to POST and copy the Production URL.
2. In Webflow, open Site settings > Apps & Integrations > Webhooks > Add Webhook.
3. Select Form Submission as the trigger event and paste the n8n Production URL.
4. Click Save. Webflow generates a secret key — copy it immediately, as it is shown only once.
5. Publish your site.

Once published, all site-wide form submissions can be sent to this workflow while still remaining available in Webflow's submissions panel.

Webflow retries failed webhook deliveries up to 3 times at 10-minute intervals. After all retries fail, Webflow permanently deactivates the webhook and emails the account owner. Reactivation requires contacting Webflow support, as the webhook cannot be re-enabled via the dashboard or API.

Form action URL

This method routes a specific form to n8n. It is useful when different forms on the same site need to trigger different workflows.

To configure a form action URL:

1. In n8n Cloud, create a Webhook node and copy the Production URL.
2. In Webflow, click the form element on your canvas.
3. In the right sidebar Settings panel, paste the n8n URL into the Action field and set the method to POST.
4. Publish your site.

After publishing, submissions from that form will post directly to the n8n webhook URL you configured.

Setting a custom action URL bypasses Webflow's built-in form submission storage entirely. Form data will not appear in Webflow's submissions panel. Use the site settings webhook method if you need Webflow to store submissions simultaneously.

Embed n8n components in Webflow

You can place n8n-generated interfaces directly on Webflow pages — either an AI chat widget or a multi-step form. Both methods use Code Embed elements or custom code in head and body tags.

Add an n8n chat widget with a Code Embed element

The n8n Chat Trigger node creates an embeddable AI chatbot that runs on an n8n workflow. You can place it on individual pages using a Code Embed element or site-wide using custom footer code.

To embed the chat widget on a single page:

1. In n8n Cloud, add a Chat Trigger node to your workflow. Toggle Make Chat Publicly Available to on, set Mode to Embedded Chat, and set Allowed Origin (CORS) to your Webflow domain.
2. Copy the Chat URL from the node and activate the workflow.
3. In Webflow, add a Code Embed element to your page and paste this code:

<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" />
<script type="module">
 import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';
 createChat({
   webhookUrl: 'YOUR_N8N_CHAT_TRIGGER_WEBHOOK_URL_HERE',
 });
</script>



4. Publish your site.

After publishing, the widget loads on that page and sends messages into the connected n8n workflow.

To add the widget site-wide instead, paste the same code into Site settings > Custom Code > Footer Code. Code Embed elements require a paid Webflow site plan.

Embed an n8n form with an iframe

The n8n Form Trigger node generates hosted forms with multi-step logic and conditional fields. You can link to the form or embed it directly.

To embed the form on a Webflow page:

1. In n8n Cloud, add an n8n Form Trigger node. Configure form fields, path, and title, then activate the workflow and copy the Production URL.
2. In Webflow, add a Code Embed element and paste:

<iframe
 src="YOUR_N8N_FORM_PRODUCTION_URL"
 width="100%"
 height="600px"
 frameborder="0">
</iframe>



3. Publish your site.

After publishing, the embedded form appears directly on the page inside the iframe.

If you do not need an embedded form, add a button element in Webflow and set its URL to the n8n Form Production URL. This approach works on any Webflow plan because it does not require a Code Embed element.

Build with the Webflow and n8n APIs

For operations beyond CMS item CRUD — including publishing staged items, fulfilling ecommerce orders, reading form submission data, and managing webhooks programmatically — you can call the APIs directly from n8n's HTTP Request node. This approach requires familiarity with REST APIs and Webflow's v2 endpoint structure.

The available APIs cover different scopes:

• The Webflow Data API v2 handles CMS collections, items, forms, ecommerce orders, products, inventory, and site publishing
• The Webflow Webhooks API registers and manages real-time event subscriptions for form submissions, CMS changes, and order events
• The n8n REST API manages workflows, executions, and credentials programmatically

These APIs let teams extend beyond the built-in node operations when they need more control.

All Webflow API requests use Bearer token authentication. n8n's HTTP Request node with Predefined Credential Type set to Webflow handles this automatically using your stored credentials.

Publish CMS items after creation

For many CMS publishing workflows, the underlying Webflow API create endpoint creates items in draft or staged state — they do not appear on the published site until you publish them. An explicit publish step may therefore be required.

To create and publish CMS items:

1. Add a Webflow action node set to Create Item. Map your content fields to the target CMS collection.
2. Add an HTTP Request node. Set the method to POST and the URL to https://api.webflow.com/v2/collections/{collection_id}/items/publish. In the request body, include { "itemIds": ["ITEM_ID_FROM_PREVIOUS_STEP"] }.
3. Set authentication to Predefined Credential Type > Webflow and select your existing credential.

This extra publish step is what makes the content appear on the published site when your workflow creates items that are not yet live.

Alternatively, use the /v2/collections/{collection_id}/items/live endpoint in an HTTP Request node to create and publish in a single call. The one-publish-per-minute sub-limit applies to site-level publishes, so batch your item publish calls when working with large datasets.

Process ecommerce orders

Webflow's ecommerce endpoints support order retrieval, fulfillment, unfulfillment, and refunds — none of these order action operations are available through n8n's built-in Webflow node.

To automate order fulfillment:

1. Add a Webflow Trigger node set to the Ecomm New Order event. Your Webflow OAuth credentials must include the ecommerce:read scope — if this scope was not set when the OAuth app was created, you need to rebuild the app with the correct scopes.
2. Add processing nodes for your fulfillment logic — a Switch node to branch by order status, HTTP Request nodes to call your fulfillment provider, and notification nodes for email or Slack.
3. Add a final HTTP Request node to fulfill the order: POST https://api.webflow.com/v2/sites/{site_id}/orders/{order_id}/fulfill.

This pattern extends the trigger node into a complete order-processing workflow.

For error handling across any API-based workflow, create a separate workflow using n8n's Error Trigger node and set it as the error workflow in your main workflow's settings.

What can you build with the n8n Cloud Webflow integration?

Integrating n8n Cloud with Webflow lets you automate content publishing, lead routing, and ecommerce operations without building custom middleware or server infrastructure.

• Automated blog publishing from Notion: Set up a scheduled workflow that pulls new posts from a Notion database, formats content with AI, generates featured images, and publishes directly to a Webflow CMS blog collection — complete with slug, SEO metadata, and publication date. An official n8n template covers this pattern.
• Real-time lead routing from Webflow forms: Capture form submissions, score leads based on company size and job title, then route high-value leads to Salesforce with a Slack notification to the sales team while sending lower-scoring leads to a nurture sequence in HubSpot. The lead routing template by Lucas Perret implements this with branching logic and custom scoring.
• Ecommerce order processing and fulfillment: Trigger a workflow when a new Webflow ecommerce order arrives. Branch by order value or product type, send order details to a fulfillment provider, update inventory levels, email the customer a confirmation, and post a summary to a team Slack channel.
• Multi-site form management for agencies: Manage form submission workflows across multiple client Webflow sites from a single n8n Cloud instance. Route each form to the correct Airtable base, Slack channel, or CRM based on form name and site ID — using the Airtable form management template as a starting point.

If you need more control over CMS publishing workflows, ecommerce order states, or inventory synchronization, the API integration path covers those cases with full flexibility.