Pipedream

How to integrate Pipedream with Webflow

The easiest way to set up your Pipedream Webflow integration is by installing the Pipedream app from the Webflow Apps marketplace. You can also configure Webflow webhooks directly in your site settings to send events to a Pipedream HTTP endpoint for event types not covered by the app's built-in triggers. For custom integrations, like real-time CMS sync with external databases, e-commerce order routing, or gated content workflows, you can build with the Webflow Data API and custom code inside Pipedream workflows.

Since Pipedream is itself an automation platform, it replaces tools like Zapier and Make rather than connecting through them.

Use the Pipedream app

Install the Pipedream app from the Webflow Apps marketplace. Authorize your Webflow account through OAuth, and start building workflows using pre-built triggers and actions.

The app includes four event triggers:

• New Form Submission (instant) runs a workflow each time a visitor submits a Webflow form.
• New Collection Item Created fires when a CMS item is added to a collection.
• Collection Item Updated fires when an existing CMS item changes.
• Collection Item Deleted fires when a CMS item is removed.

And five actions:

• Create Collection Item adds a new item to any Webflow CMS collection.
• List Collection Items retrieves items from a collection with pagination support.
• Get Collection Item fetches a single item by ID.
• Delete Collection Item removes a specific item from a collection.
• Fulfill Order marks a Webflow e-commerce order as fulfilled.

Select a trigger, pick a Webflow site and collection from the dropdown menus, then chain actions from Pipedream's library of app connectors. Workflows execute on serverless infrastructure with nothing to deploy or maintain.

Configure Webflow webhooks

For event types not covered by the app's four built-in triggers, like site_publish or ecomm_inventory_changed, you can register webhook URLs directly in Webflow's site settings to send events to a Pipedream HTTP trigger endpoint.

Go to Site Settings → Apps & Integrations → Webhooks, add a webhook, and paste a Pipedream-generated HTTP endpoint URL. This requires no code beyond copying the URL.

You can also use Webflow's Code Embed element to add custom JavaScript that sends client-side data (like button clicks or scroll events) to a Pipedream HTTP endpoint via fetch requests.

Note: Webhooks created through the Webflow dashboard do not include signature headers for verification. If you need payload authentication, create webhooks programmatically via the Webflow Webhooks API instead.

Build with the Webflow Data API in Pipedream

For use cases that go beyond pre-built triggers and actions, like custom data transformations, multi-step API orchestration, or integration with proprietary systems, write custom Node.js or Python code inside Pipedream workflow steps with full access to npm and PyPI packages. This is a developer-level integration.

Automate CMS content sync

Keep Webflow CMS collections in sync with external data sources through scheduled polling or webhook-based events.

Relevant Webflow CMS API endpoints:

• Create items: POST /v2/collections/{collection_id}/items
• Update items: PATCH /v2/collections/{collection_id}/items (pass item IDs in the request body)
• Publish items: POST /v2/collections/{collection_id}/items/publish — accepts an array of item IDs to push staged items live
• List items: GET /v2/collections/{collection_id}/items — supports offset and limit parameters (max 100 per request)

For real-time sync, configure Webflow webhooks to fire on collection_item_created, collection_item_changed, or collection_item_deleted events and point them at a Pipedream HTTP trigger URL.

Webflow retries failed webhook deliveries up to 3 times at 10-minute intervals. After repeated failures, Webflow deactivates the webhook and sends an email notification. Build error handling into your Pipedream workflows to avoid deactivation.

Process form submissions with custom logic

Use the Webflow Forms API and form_submission webhook to build custom processing pipelines. Validate data, enrich it with third-party lookups, or route submissions to different systems based on form content.

• List forms: GET /v2/sites/{site_id}/forms
• Get form submission: GET /v2/sites/{site_id}/form_submissions/{form_submission_id}

The form_submission webhook payload includes form field data as key-value pairs, the form name, and a timestamp. A Pipedream workflow can parse this payload, run custom validation, then push the data to a CRM, create a support ticket, or add a row to Google Sheets.

Route e-commerce orders to external systems

Subscribe to the ecomm_new_order and ecomm_order_changed webhook events to receive real-time order notifications at your Pipedream endpoint. From there, a workflow can extract order details and route them to accounting software, fulfillment services, or notification systems.

• Get order: GET /v2/sites/{site_id}/orders/{order_id} — returns customer info, line items, payment status, and totals
• List orders: GET /v2/sites/{site_id}/orders — supports filtering by status and pagination
• List products: GET /v2/sites/{site_id}/products

Webhook security and authentication

Webflow supports OAuth 2.0 (for apps acting on behalf of users) and site tokens (for site-scoped integrations). Pipedream's app handles OAuth automatically when you connect your account.

For webhook security, Webflow includes x-webflow-timestamp and x-webflow-signature headers on webhook requests created through the Webhooks API. Validate the HMAC signature in your Pipedream workflow to confirm payloads are authentic. Webhooks created through the Webflow dashboard UI do not include these headers. Create webhooks programmatically if you need signature validation.

What you can build

Integrate Pipedream with Webflow to add a serverless automation layer between your Webflow site and any external service, controlled through code or visual configuration.

• Automated lead routing system: Capture Webflow form submissions and use Pipedream to validate the data, enrich it with a third-party service, then create a deal in your CRM — all in real time without manual data entry.
• Self-updating resource directory: Sync CMS collection items from an Airtable base or Google Sheet on a schedule, so a partner directory or job board on your Webflow site stays current without manual CMS edits.
• E-commerce order dashboard: Route new Webflow e-commerce orders to accounting software for invoicing and Slack for team notifications, giving operations a live feed of purchases without logging into multiple tools.
• Content publishing pipeline: Connect a headless CMS like Contentful to Webflow through Pipedream, so publishing an article in Contentful automatically creates and publishes the corresponding CMS item on your Webflow site.