Contentful

How to integrate Contentful with Webflow

Webflow handles site design and hosting while Contentful manages structured content and multi-platform delivery. This separation works when you need complex content modeling beyond Webflow's native CMS, content distribution across multiple channels, or advanced content workflows.

Contentful doesn't offer a native Webflow marketplace app, but you can integrate through Webflow Code Embed elements, automation platforms like Zapier and n8n, or direct API connections.

Embed Contentful content with code elements

Use Webflow's Code Embed element to fetch content from Contentful using client-side JavaScript. The script runs in the browser and makes API requests when visitors load your page.

You can use Collection fields in custom code embeds to bind dynamic identifiers from Webflow CMS items to Contentful entries.

This integration enables the following capabilities:

• Fetch and display Contentful entries using the Content Delivery API
• Render rich text fields with client-side rendering libraries
• Pull image collections and display them in Webflow layouts
• Update content without republishing your Webflow site

Client-side fetching means content loads when visitors access your page rather than being pre-rendered on the server.

Connect through automation platforms

Zapier and n8n provide pre-built connectors that sync content between Contentful and Webflow without custom code. These platforms monitor Contentful for changes and automatically create or update corresponding items in Webflow collections.

Set up workflows that trigger when specific Contentful events occur. When someone publishes an entry in Contentful, the automation platform receives a webhook notification, transforms the content structure to match your Webflow collection fields, and posts the data through Webflow's API.

Some supported workflows include:

• Create Webflow items when Contentful entries reach specific publication statuses
• Map fields between Contentful content types and Webflow collection structures
• Sync media files from Contentful to Webflow's hosting
• Configure bi-directional sync workflows with proper error handling

Automation platforms add another service to your technology stack that requires monitoring and maintenance.

Build with Webflow and Contentful APIs

Direct API integration gives you complete control over content synchronization, transformation logic, and error handling. Build middleware (server code like n8n that connects the two platforms) using their REST APIs.

This approach runs your integration logic on a server. Your middleware receives webhooks from Contentful, processes the content, and calls Webflow's API to update your site.

Set up webhook-driven synchronization

Contentful's webhook API sends HTTP POST requests to your server when content changes. Configure webhooks to fire on specific events like entry publication or deletion. Filter by content type to receive only relevant notifications.

Your server validates webhook signatures using HMAC SHA256 verification, processes the entry data, and maps Contentful fields to Webflow's collection structure. The Webflow Collections API creates or updates CMS items with the transformed content.

Technical implementation steps include:

• Configure webhook endpoints at POST https://api.contentful.com/spaces/{space_id}/webhook_definitions with event filters and target URLs
• Validate webhook signatures to confirm requests originate from Contentful's servers
• Map content structures between Contentful's content model and Webflow's collection schemas
• Handle rate limits with request queuing and exponential backoff for 429 responses

Rate limiting requires careful orchestration. Both Contentful and Webflow enforce API rate limits that vary by plan and endpoint. Queue updates in your middleware to respect both limits and implement retry logic for transient failures.

Synchronize assets and media

Images and files require direct URL references. Provide the Contentful CDN URL directly to Webflow collection item fields, and Webflow will fetch and host the asset. The Contentful Content Management API provides asset metadata and CDN URLs that you pass to Webflow's collection item fields.

Asset workflow steps:

• Fetch asset metadata from Contentful including CDN URLs, dimensions, and MIME types
• Reference the Contentful CDN URL in Webflow collection item image fields
• Webflow automatically fetches and hosts the asset from the provided URL
• Handle image transformations if Contentful delivers different formats or sizes than needed

Trigger site publishing

Call the publish endpoint after syncing content to make changes visible to visitors. Batch multiple content updates before triggering publication to work within this constraint.

Implement a queue system that collects content changes and publishes them together at scheduled intervals rather than immediately after each update.

Critical limitation: Webflow's publish API is limited to 1 request per minute. Your Webflow site doesn't update live until you publish it. This strict rate limit means you cannot publish content changes more than once per minute.

Bulk content migration

Start with an initial sync request to fetch all entries of specific content types. The Contentful Sync API efficiently transfers large content volumes during initial migration.

The API returns a sync token you'll use for subsequent requests. Transform the entries to match Webflow's collection schema and create collection items in batches using the Collections API.

For ongoing synchronization, use the sync token to request only changed entries since your last sync. This delta approach reduces API calls and processing time for regular updates.

What you can build

Integrating Contentful with Webflow separates content management from site presentation while maintaining design control.

• Multi-platform content distribution: Manage content once in Contentful and deliver it to your Webflow site, mobile apps, and other digital channels through APIs.
• Structured content modeling: Build detailed content models with custom field types, validation rules, and relationship structures that extend beyond Webflow's native CMS.
• Localized content management: Organize multi-language content in Contentful with locale-specific fields, then deliver localized versions to different Webflow sites or collection items.
• Approval workflows in Contentful: Route content through multi-stage approval processes in Contentful before syncing to Webflow.