Drupal

Pairing Drupal's editorial workflows, granular permissions, and compliance controls with Webflow's visual design and hosting gives you governed content without the frontend bottleneck.

Drupal acts as the content backend through its zero-configuration JSON:API, while Webflow handles design, publishing, and hosting.

This split fits marketing teams stuck behind developer tickets, IT directors modernizing legacy Drupal 7 sites, agencies building frontends on existing Drupal backends, and global teams running multilingual content across regional sites.

How to integrate Drupal with Webflow

What is Drupal? Drupal is an open-source content management system distributed under the GPL with no licensing fees. It supports content modeling via entity types and bundles, multilingual content management, role-based permissions, and headless content delivery through its core JSON:API module.

Use Drupal and Webflow together when your content governance requirements demand more structure than a single platform provides. If you retain a Drupal backend for editorial workflows, taxonomy management, or compliance controls, you can serve that content through Webflow's frontend and hosting infrastructure. This separation lets your marketing teams publish independently while content rules stay intact.

The Drupal-Webflow integration uses 3 approaches:

• Client-side embeds and custom code display content by fetching Drupal data directly into Webflow pages without server-side development.
• Zapier and Make sync content between platforms automatically using visual workflow builders.
• The Webflow Data API and Drupal JSON:API let you control bidirectional content sync, bulk migration, and webhook-driven updates. This approach requires server-side development.

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

Display Drupal content with embeds and custom code

You can pull Drupal content directly into Webflow pages using Code Embed elements, custom code in head and body tags, and iframes. These methods display read-only content on Webflow pages without a middleware server. Use them when you want to show Drupal-managed content on Webflow pages without building a full sync pipeline.

Code Embed elements accept HTML, CSS (inside <style> tags), and JavaScript (inside <script> tags). Server-side languages like PHP aren't supported. You need a paid Site or Workspace plan for Code Embed to render on a published site.

Fetch content from Drupal's JSON:API

Drupal's JSON:API module is a core module that exposes every content type as an API endpoint with zero configuration. Every content type you define in Drupal automatically gets its own URL path. Public, unauthenticated content doesn't need an API key on the Drupal side.

To display Drupal articles on a Webflow page:

1. Confirm the JSON:API module is enabled in Drupal at Admin > Extend.
2. Verify the content is accessible at https://your-drupal-site.com/jsonapi/node/article.
3. Open Webflow and add a Code Embed element to the page where you want the content to appear.
4. Paste a JavaScript fetch() call targeting the Drupal JSON:API endpoint, then render the response data into the DOM.
5. Click Save & Close and preview the page to confirm the output.

A basic implementation looks like this:

fetch('https://your-drupal-site.com/jsonapi/node/article?page[limit]=10')
  .then(r => r.json())
  .then(data => {
    const container = document.getElementById('drupal-articles');
    data.data.forEach(item => {
      const div = document.createElement('div');
      div.innerHTML = `<h3>${item.attributes.title}</h3>`;
      container.appendChild(div);
    });
  });

Your Drupal administrator needs to configure CORS (Cross-Origin Resource Sharing) to allow requests from your Webflow domain. This means editing the services.yml file in Drupal and adding your Webflow domain to the allowedOrigins list. The CORS UI module gives you a visual interface for this configuration if manual file editing isn't practical. Without CORS enabled, browser-side fetch requests from Webflow will fail.

Embed Drupal RSS feeds

Some Drupal sites expose RSS feeds through core or Views-configured feed displays, often at routes such as /rss.xml depending on site setup. You can consume these feeds in Webflow using a third-party RSS-to-embed service. A custom JavaScript RSS parser inside a Code Embed element also works.

To set up an RSS embed:

1. Confirm your Drupal site exposes an RSS feed and verify its actual feed URL.
2. Use a service like rss.app or Feedwind to generate an embed snippet from the feed URL.
3. Add a Code Embed element to your Webflow page and paste the snippet.
4. Publish the page and verify the feed content renders correctly.

RSS feeds expose limited fields (title, summary, date, link). For richer content display, the JSON:API approach gives you access to all fields on the content type. The Views RSS module on Drupal adds feed customization if you need more control over what the feed includes.

Embed Drupal pages with iframes

For a quick display of any publicly accessible Drupal page, embed it using a standard HTML iframe inside a Code Embed element.

To embed a Drupal page:

1. Create a Drupal Views page with a clean public path (e.g., /embeddable-news). Apply a minimal theme to remove Drupal's navigation and header.
2. Add a Code Embed element to your Webflow page.
3. Paste the iframe markup: <iframe src="https://your-drupal-site.com/embeddable-news" width="100%" height="600" frameborder="0"></iframe>

Many Drupal installations block iframe embedding via X-Frame-Options headers. Security modules like Security Kit (seckit) may add these headers. Check your Drupal server's response headers before you implement this approach. Iframe content is styled by the Drupal theme and doesn't get indexed by search engines.

Use CMS-driven dynamic iframes

You can store Drupal content URLs in Webflow CMS fields and bind them to Code Embed elements on Collection List templates. This creates a dynamic iframe that changes for each CMS collection entry.

To set up dynamic iframes:

1. Open the CMS panel and create or edit a Collection (e.g., "Drupal Articles").
2. Add a Plain Text field to store the Drupal content URL.
3. Navigate to the Collection Template page.
4. Drag a Code Embed element onto the template.
5. Bind the iframe src attribute to the CMS field using the dynamic field selector.

This approach means you manually populate Drupal URLs into each CMS item. Use it for sites with a manageable number of entries rather than high-volume content sets.

Connect with Zapier or Make

If you don't have development resources, automation platforms give you a no-code path to sync content between Drupal and Webflow. Both Zapier and Make offer Drupal-Webflow connection options.

Zapier offers a confirmed pre-built template: create items in Webflow for every new content in Drupal. The Drupal trigger checks for new content via polling. The Webflow action creates a CMS item in your target collection.

To set up Zapier sync:

1. Log in to Zapier and create a new Zap.
2. Select Drupal as the trigger app and choose the New Content trigger. Configure the content type you want to monitor.
3. Select Webflow as the action app and choose Create Item. Authenticate your Webflow account via OAuth.
4. Map Drupal content fields to Webflow collection fields.
5. Test the Zap and turn it on.

Make also has a Drupal-Webflow integration page. Its visual scenario builder lets you run Webflow actions such as creating an item in a collection, plus more multi-step workflows and custom data transformations than Zapier's linear Zap model.

Automation platforms work well for event-driven content sync at moderate volumes. Data transformations, bulk operations, or high-frequency sync patterns may exceed what these platforms handle efficiently. At that point, the API approach becomes the better option.

Build with the Webflow and Drupal APIs

For full control over content sync, migration, and bidirectional updates, build a custom integration using the Webflow Data API v2 and Drupal's JSON:API. This approach requires server-side development. Use it when you have engineering resources and you need bulk content operations, taxonomy mapping, media sync, or webhook-driven real-time updates.

The APIs have different scopes:

• Drupal's JSON:API handles reading, creating, updating, and deleting content entities, taxonomy terms, media, and users
• The Webflow Data API v2 handles CMS collections, items, assets, forms, and site publishing
• Webhooks trigger real-time events for form submissions, collection item changes, and site publishes

Both APIs use JSON over HTTP. Drupal's JSON:API commonly uses the Accept: application/vnd.api+json header. The Data API requires Authorization: Bearer <token> with a site API token. Generate this token at Site Settings > Apps & Integrations > API Access.

Sync content from Drupal to Webflow

Ongoing content sync pushes new or updated Drupal content into Webflow CMS collections. A middleware service reads from Drupal's JSON:API and writes to the Data API.

To implement content sync:

1. Fetch articles from Drupal:

curl -X GET "https://your-drupal-site.com/jsonapi/node/article?page[limit]=50&page[offset]=0" \
  -H "Accept: application/vnd.api+json"

2. Inspect the target Webflow collection schema to identify field slugs and types:

curl -X GET "https://api.webflow.com/v2/collections/{collection_id}" \
  -H "Authorization: Bearer <token>"

3. Transform Drupal field data to match Webflow's field types. Key mappings: text to PlainText, text_long to RichText, datetime to Date (ISO 8601), boolean to Switch. The entity_reference type maps to Reference and requires an ID mapping table.
4. Bulk create items in Webflow (up to 100 per request):

curl -X POST "https://api.webflow.com/v2/collections/{collection_id}/items/bulk" \
  -H "Authorization: Bearer <token>" \
  -H "Content-Type: application/json" \
  -d '{
    "items": [
      { "fieldData": { "name": "Article 1", "slug": "article-1" } },
      { "fieldData": { "name": "Article 2", "slug": "article-2" } }
    ]
  }'

5. Make items live. Publish staged items with a publish call, or use live item endpoints when you need immediately published content:

curl -X POST "https://api.webflow.com/v2/sites/{site_id}/publish" \
  -H "Authorization: Bearer <token>" \
  -H "Content-Type: application/json" \
  -d '{"customDomains": ["660c6449dd97ebc7346ac629"], "publishToWebflowSubdomain": false}'

Staged item endpoints and live item endpoints are both available in the Data API, so your choice depends on whether you want draft-first workflows or immediately published items.

Migrate content from Drupal to Webflow

One-time migration follows the same API pattern but requires careful sequencing. Create taxonomy collections and media assets before content items that reference them.

To run a full migration:

1. Discover all Drupal resource types by calling GET /jsonapi/ (returns links to every entity type and bundle).
2. Map each Drupal content type to a Webflow collection. Create collections via POST /v2/sites/{site_id}/collections.
3. Upload media assets to Webflow first. Image uploads use a two-step process: request a pre-signed URL via POST /v2/sites/{site_id}/assets, then PUT the binary file to that URL.
4. Create taxonomy-equivalent collections and populate them with terms.
5. Create content items in batches of 100 via the bulk endpoint. Reference the asset and taxonomy IDs generated in previous steps.
6. Verify a representative sample of items before you publish.

For migrations under 50 pages, manual copy is practical. For 50 to 500 pages, CSV export from Drupal and import into the CMS works well. Above 500 pages, the programmatic API approach is the most reliable path.

Set up webhook-driven bidirectional sync

Webhooks enable real-time updates between both platforms. Drupal can send outbound webhooks when content changes. Webflow can notify your middleware when CMS items or forms are updated.

These webhook events are relevant to Drupal sync:

• collection_item_created, collection_item_changed, collection_item_deleted
• collection_item_published, collection_item_unpublished
• form_submission
• site_publish

To register a webhook:

curl -X POST "https://api.webflow.com/v2/sites/{site_id}/webhooks" \
  -H "Authorization: Bearer <token>" \
  -H "Content-Type: application/json" \
  -d '{
    "triggerType": "form_submission",
    "url": "https://your-drupal-site.com/api/webflow-form-handler"
  }'

On the Drupal side, the Entity Webhook module watches entity create, update, and delete events. It sends outbound HTTP requests with HMAC signing and exponential backoff retry. The ECA module (15,536 active installations, covered by Drupal's security advisory policy) has a visual workflow builder. Use it to trigger outbound HTTP calls to the Data API on any Drupal content event.

For production deployments, use the Simple OAuth module for token-based API authentication on the Drupal side. Register Webflow as a named consumer using the Consumers module to scope its API access. The JSON:API Extras module lets you control which fields and resources Webflow can access.

What can you build with the Drupal Webflow integration?

Integrating Drupal with Webflow lets you separate content governance from frontend design and publishing without rebuilding your content infrastructure.

• Headless marketing sites with governed content: Keep editorial workflows, role-based permissions, and compliance controls in Drupal. Your marketing team builds landing pages and campaign microsites in Webflow. A pharmaceutical company could keep its regulatory approval workflows in Drupal while its marketing team publishes product launch pages without developer tickets.
• High-volume content portals beyond CMS item limits: Drupal stores tens of thousands of items as the content repository. Webflow pages fetch content via JSON:API with client-side JavaScript. A media publisher with 50,000 articles can display content on Webflow pages with no risk of hitting the CMS plan's 2,000-item or Business plan's 10,000-item ceiling.
• Multilingual content delivery across regional sites: Manage translation workflows and multilingual content in Drupal's native multilingual system. Serve localized content to regional Webflow frontends via API. A global manufacturer could run a single Drupal content repository feeding 10 country-specific Webflow sites. Each site pulls content in the local language through JSON:API.
• Drupal 7 modernization with incremental migration: Move your public-facing frontend to Webflow while you retain a Drupal 10 backend. The frontend can move first while the backend upgrade happens separately. An organization with 1,500+ pages on Drupal 7 (end-of-life January 2025) can upgrade the backend on its own track. The frontend modernization happens in its own manageable phase.

If you need more control over webhook-driven real-time sync or taxonomy mapping with more relationships, the API integration path covers those cases.