Drupal

How to integrate Drupal with Webflow

Organizations with complex content workflows, multilingual requirements, and enterprise security needs benefit from connecting Drupal's backend capabilities with Webflow's frontend design tools. This architecture separates content governance from visual presentation, letting technical teams maintain compliance controls while designers build modern user experiences independently.

You can integrate Drupal with Webflow through automation tools like Zapier and Make for no-code workflows, build custom integrations using Drupal's JSON:API and Webflow's Data API v2 for full control over content synchronization, use the community Drupal Webflow module to serve Webflow pages through Drupal routes, or embed Drupal content directly in Webflow pages using client-side JavaScript.

Use automation platforms

Zapier and Make connect Drupal and Webflow through workflow builders without custom code. Set up triggers in one platform (like publishing a Drupal article) and actions in the other (creating a Webflow CMS item).

Both platforms handle authentication through OAuth, field mapping through dropdown menus, and error handling automatically. Webflow enforces API rate limits that vary by plan tier, with publishing constraints that can impact real-time content synchronization workflows.

Zapier's Drupal-Webflow integration supports common workflows through pre-built templates with field mapping and OAuth authentication handling. Both Zapier and Make enable automated content synchronization, form submission management, and bidirectional updates by connecting your accounts through API credentials and mapping data fields between systems.

Some common automation workflows using Zapier or Make include:

• Synchronize content automatically using Zapier's Drupal-Webflow templates or Make's workflow builder: Create Webflow CMS items when Drupal content publishes while maintaining centralized authoring in Drupal
• Route form submissions through Zapier's form actions or Make's form modules: Send Webflow form submissions to Drupal for centralized lead management and CRM integration
• Enable bidirectional updates using Drupal's entity update events and Webflow's webhook triggers: Keep content synchronized when changes occur in either platform
• Manage product inventory via Drupal API endpoints and Webflow ecommerce actions: Update Webflow e-commerce products when Drupal product data changes

Note: Both platforms require API access to enable connections. Drupal requires API access through JSON:API or REST API endpoints, while Webflow requires API access through its Data API v2.

Build with Drupal and Webflow APIs

Direct API integration gives you full control over content flow, transformation logic, and error handling. Fetch content from Drupal's JSON:API endpoints, transform field structures to match Webflow's schema, and publish to Webflow CMS Collections using the Data API v2.

This approach requires custom development but enables complex workflows including bidirectional synchronization via webhooks and bulk operations that automation platforms cannot handle.

Building with both APIs lets you:

• Fetch content from Drupal using JSON:API endpoints with filtering, pagination, and relationship inclusion
• Push to Webflow Collections via CMS API with staged item creation and bulk operations supporting up to 100 items per batch
• Map field structures between Drupal's field machine names and Webflow's field slugs following documented field type mappings
• Handle rate constraints with queue-based processing following Webflow's API rate limits
• Enable real-time sync through Drupal Webhooks and Webflow webhook events for bidirectional content updates

Fetch content from Drupal JSON:API

Drupal automatically exposes all entity types (content types, taxonomies, users, and custom entities) through JSON:API endpoints. The JSON:API module includes filtering, pagination, relationship inclusion, and selective field requests.

Core endpoint patterns include:

• List articles with GET /jsonapi/node/article : Returns paginated article collection with metadata
• Retrieve specific article using GET /jsonapi/node/article/{uuid} : Fetches single article by UUID
• Include related data via GET /jsonapi/node/article?include=field_image,uid : Pulls referenced media and author data in one request
• Filter by publication status with GET /jsonapi/node/article?filter[status]=1 : Returns only published content

All requests require these headers:

Accept: application/vnd.api+json
Content-Type: application/vnd.api+json

Authentication options include OAuth 2.0 for production, JWT for stateless validation, or API key authentication with role-based access control. Basic authentication works for development but requires HTTPS.

Push content to Webflow CMS Collections

Webflow's CMS API manages Collections and Collection Items through REST endpoints at https://api.webflow.com/v2. Create items in staged state, then publish them to make content live.

Collection Item operations include:

• Create staged items with POST /collections/{collection_id}/items : Adds items requiring explicit publish
• Bulk create up to 100 items using POST /collections/{collection_id}/items/bulk : Batches content creation
• Update existing items via PATCH /collections/{collection_id}/items/{item_id} : Modifies field values
• Bulk update up to 100 items using PATCH /collections/{collection_id}/items/bulk : Batch updates
• Publish to live site with POST /collections/{collection_id}/items/publish : Makes staged content visible

All requests need Bearer token authentication:

Authorization: Bearer {token}

Generate Site API tokens in Webflow at Site Settings → Integrations for single-site access, or implement OAuth 2.0 for multi-site applications.

Critical workflow requirement: Webflow creates items in STAGED state. You must call the publish endpoint separately to make content visible on your live site. This differs from Drupal's immediate publication model.

Map fields between platforms

Field mapping requires transformation logic between Drupal's field machine names and Webflow's field slugs. Create a mapping table during setup to automate conversions and achieve accurate data transformation across both platforms.

Image fields require a two-step process in Webflow. First upload files to Webflow Assets, then reference the returned URLs in CMS collection fields.

Handle rate limits and publish constraints

Webflow enforces API rate limits that vary by plan tier, with publishing frequency constraints that affect synchronization workflows.

Implement queue-based processing using Drupal's Queue API to batch operations and respect rate limits. Monitor rate limit headers in responses:

Rate Limit Headers:

• X-RateLimit-Limit: Maximum requests allowed per minute
• X-RateLimit-Remaining: Remaining requests in current window
• Retry-After: Seconds to wait after HTTP 429 error

When you receive HTTP 429 errors, wait the duration specified in the Retry-After header before retrying requests.

Set up webhook-based synchronization

Webhooks enable real-time content sync by notifying systems when changes occur. Drupal's Webhooks module sends outbound notifications for entity events (create, update, delete), while Webflow's webhook system can trigger on CMS collection item changes and publish events to notify Drupal of updates.

Drupal outbound webhooks:

Configure webhooks at the destination URL endpoint to send notifications when content changes:

• entity.insert fires when new content is created
• entity.update fires when existing content is modified
• entity.delete fires when content is removed

Each webhook includes customizable payload templates using Twig, authentication tokens, and destination URLs. Webhooks also support HMAC-SHA256 signature validation for security verification.

Webflow inbound webhooks:

Create webhook subscriptions using POST /sites/{site_id}/webhooks:

{
  "triggerType": "cms_item_created",
  "url": "https://your-drupal-site.com/webhook/receiver",
  "filter": {}
}

Available trigger types include cms_item_created, cms_item_updated, and cms_item_deleted. Webflow includes HMAC-SHA256 signatures in the x-webflow-signature header for verification.

Webhooks retry up to 3 times on failure, then deactivate automatically. You are limited to 75 webhook subscriptions per trigger type per site.

Use the Drupal Webflow module

The Webflow Integration module from drupal.org enables serving Webflow-designed pages directly on Drupal sites. Install it on your Drupal instance to connect via the Webflow CMS API and render Webflow pages through Drupal routes. This approach maintains Drupal's authentication, permissions, and module ecosystem while Webflow handles visual design.

The module creates custom Drupal routes that fetch JSON representations of Webflow CMS items through authenticated API calls. Pages designed in Webflow appear on your Drupal domain with your URL structure and domain authority intact.

Using this module lets you:

• Serve Webflow pages through Drupal using Webflow Integration module routes and API calls that fetch JSON representations of CMS items
• Maintain Drupal authentication while designers work in Webflow's visual editor building frontend presentation independently
• Keep your domain authority by hosting all content on your Drupal domain with maintained URL structure and routing

Other notes: Drupal marks this module as not covered by Drupal's security advisory policy, which technical teams should factor into security assessments. Usage statistics show 3-4 active installations as of 2025, with active development continuing in the issue queue. This approach works best for hybrid architectures where Drupal manages backend complexity and Webflow provides modern frontend presentation.

Embed Drupal content in Webflow

Display Drupal content directly in Webflow pages using client-side JavaScript that fetches data from Drupal's APIs. This approach works well for public content that updates frequently without requiring server-side integration. Webflow's Custom Code Embed element supports up to 50,000 characters of HTML, CSS, and JavaScript per embed, giving you space for advanced rendering logic.

Embedding Drupal content lets you:

• Render Drupal content client-side using Custom Code Embed elements with up to 50,000 characters of HTML, CSS, and JavaScript
• Fetch from JSON:API via JavaScript calls to Drupal's JSON:API endpoints for real-time content updates

Add an HTML Embed element in Webflow and include JavaScript that calls Drupal's JSON:API endpoints:

<div id="drupal-content"></div>
<script>
fetch('https://your-drupal-site.com/jsonapi/node/article?page[limit]=5')
  .then(response => response.json())
  .then(data => {
    // Transform and render data
    // Note: Require proper authentication headers:
    // Accept: application/vnd.api+json
    // Content-Type: application/vnd.api+json
    // Authorization header with appropriate token (OAuth 2.0, JWT, or API Key)
  });
</script>

Other notes: This approach works for public content but requires proper CORS configuration on your Drupal server for authenticated requests. When visitors load the page, their browser fetches content directly from your Drupal server. This traffic does not pass through Webflow's servers, so Webflow's API rate limits do not apply to these client-side requests.

What you can build

Integrating Drupal with Webflow enables hybrid architectures through API-based connections, allowing organizations to maintain Drupal's enterprise content management capabilities while using Webflow's design tools for modern user experiences.

• Enterprise multi-site management: Educational institutions like Fairfax County Public Schools manage 200+ school sites with centralized Drupal content and Webflow-designed templates, achieving 70% increases in website sessions, 11% longer user engagement time, and 20% decreases in mobile bounce rates while maintaining consistent branding across all properties
• Cultural institution storytelling: Museums and foundations use Drupal for collection databases and membership management while building interactive exhibitions in Webflow.
• Content-driven marketing sites: Organizations maintain complex content workflows and compliance requirements in Drupal while marketing teams build landing pages and microsites using Webflow. Technical teams handle backend security and authentication through Drupal APIs while designers iterate on frontend presentation without deployment cycles
• High-traffic public portals: Large organizations maintain user databases, search functionality, and application logic in Drupal while serving public-facing pages through Webflow, improving Core Web Vitals and reducing frontend maintenance overhead while keeping enterprise backend capabilities intact