Contentful

Webflow CMS covers blog posts, landing pages, and basic collections well. But sites that need complex content modeling, multi-channel delivery, advanced localization, or editorial approval workflows can hit the limits of the native CMS on its own.

Contentful adds a headless content layer for those cases. By connecting it to Webflow, you can manage structured content in Contentful's editor and deliver it to your pages through client-side JavaScript, automation sync, or direct API integration — without triggering a republish on every change.

How to integrate Contentful with Webflow

What is Contentful? Contentful is a headless CMS and composable Digital Experience Platform (DXP). It separates content management from presentation, delivering structured content through REST and GraphQL APIs. Contentful includes visual content modeling, locale-based publishing, scheduled releases, and over 110 marketplace integrations.

Pair Contentful with Webflow when content needs to stay in one system and render across multiple frontends, or when editorial workflows require approval stages, version control, and localization beyond the built-in CMS tooling. The combination keeps Webflow as your design and hosting layer while Contentful handles content operations.

You can connect Contentful to Webflow in 3 ways:

• Contentful's JavaScript SDK in Code Embed elements fetches and displays published content client-side without a backend server.
• Zapier, n8n, and viaSocket automations sync Contentful entries to CMS collections when content is published or updated.
• The Webflow Data API and Contentful APIs give you full control over field mapping, delta sync, localization, and media asset pipelines, but require server-side development.

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

Fetch Contentful content with Code Embed elements

You can load Contentful's JavaScript SDK inside a Code Embed element. The SDK calls Contentful's Content Delivery API at page load, retrieves published entries as JSON, and renders them into the page. You don't need a backend server. This method works when you want frequently updated content on a page without setting up middleware or automation pipelines. You'll need a paid site plan, since custom code isn't available on the free Starter plan.

To set up the integration:

1. In Contentful, go to Settings > API Keys and copy the Space ID and Content Delivery API access token.
2. Open the page where content should appear and add a Code Embed element from the Add panel.
3. Paste a script that loads the Contentful browser SDK from a CDN and initializes the client with the Space ID and access token.
4. Use client.getEntries() to fetch entries by content type and inject the results into target HTML elements inside the embed.
5. Save the Code Embed, publish the site, and verify that Contentful content renders on the live page.

This method supports several content delivery patterns:

• Fetch entries filtered by content type, field values, or date ranges using the SDK's query parameters
• Render Contentful Rich Text fields as HTML using the @contentful/rich-text-html-renderer package loaded via CDN
• Display images from Contentful's Images API with on-the-fly transformations for format, size, and quality
• Paginate large content sets with skip and limit parameters (default 100 entries, max 1,000 per request)

Each Code Embed element supports up to 50,000 characters, so you may need to host large SDK bundles or verbose rendering logic externally and load them via a <script> tag.

Load the SDK globally with custom code in head or body

When multiple pages need Contentful content, load the SDK once in your site's head code to avoid repeating the same script in every Code Embed. Place the SDK initialization in custom code in head and body tags, and let individual Code Embeds on each page handle only the content-specific fetch and render logic.

To load the SDK site-wide:

1. Go to Site settings > Custom code.
2. In the Head code section, add a <script> tag that loads the Contentful browser SDK from cdn.jsdelivr.net/npm/contentful@latest/dist/contentful.browser.min.js.
3. Below the SDK script, add a second <script> block that creates the client with contentful.createClient({ space: '<space_id>', accessToken: '<access_token>' }) and assigns it to a global variable.
4. Click Save changes and publish the site.

This setup makes the client available across pages and keeps page-level embeds simpler.

Bind CMS fields to Code Embed elements

If you already use the CMS, you can store a Contentful entry ID as a plain text field in a collection item. A Code Embed placed on a Collection page or inside a Collection List reads the entry ID from the CMS field and fetches the corresponding Contentful entry dynamically. This way, you avoid hardcoding Contentful IDs in each embed.

To bind a CMS field in a Code Embed:

1. Create a plain text field in the CMS collection to store the Contentful entry ID.
2. Add a Code Embed element on the Collection page template or inside a Collection List.
3. In the Code Embed editor, place the cursor where the entry ID should appear, click the purple dot on that line, and select the CMS field containing the Contentful ID.
4. Use the bound value in a client.getEntry() call to fetch and render the specific Contentful entry for each collection item.

The binding token gets replaced with the actual field value when the page renders, so each collection item fetches its own Contentful entry.

SEO and performance considerations

Content loaded through client-side JavaScript renders in the visitor's browser, not on the server. Search engines may not index client-side content as reliably as server-rendered HTML. Built-in SEO features, including meta tags, Open Graph fields, and sitemap generation, apply to native CMS content only, not to Contentful-fetched content injected via JavaScript.

For SEO-critical content like blog posts and landing pages, use the API-based sync approach covered below to write content directly into CMS collections. That content is server-rendered and fully indexable. The client-side embed approach works better for frequently updated, non-SEO-critical content such as event listings, product feeds, or authenticated dashboards.

Connect with Zapier, n8n, or viaSocket

Automation platforms can sync Contentful changes into CMS collections without custom middleware code.

Examples of explicit Contentful and Webflow workflows include:

• Zapier: Contentful Entry Published -> Webflow Create Live Item and Contentful Updated Entry -> Webflow Update Item
• n8n: Contentful entries are read through the native Contentful node, and Webflow CMS items are created, updated, deleted, or retrieved through the Webflow node
• viaSocket: Contentful New Entry -> Webflow Create Collection, Contentful New Entry -> Webflow Update Item, Contentful New Entry -> Webflow Find Live Item, and Webflow New Form Submission -> Contentful Create Entry

These are the Contentful-to-Webflow and Webflow-to-Contentful actions available across platforms:

• Contentful Entry Published trigger creating a live CMS item in Webflow
• Contentful Updated Entry trigger updating an existing CMS item
• Webflow New Form Submission trigger creating or publishing an entry in Contentful

Automation sync adds a dependency on a third-party service that you'll need to monitor. Each automation platform sets its own execution limits and pricing, separate from both Contentful and Webflow plans. In n8n, the native Contentful node is read-only, so writing back to Contentful means calling the Contentful API through an HTTP Request node.

Build with the Webflow and Contentful APIs

For field mapping, content transformation, localization, and sync logic, you can connect the two platforms through their REST APIs with a custom middleware server. This approach requires server-side development on an external host, such as Netlify Functions, Cloudflare Workers, or Vercel, since Webflow generates static sites and doesn't run server-side code natively.

The APIs cover different parts of the integration:

• Contentful's Content Delivery API reads published entries as JSON from cdn.contentful.com
• Contentful's Content Management API manages webhooks, entries, and assets at api.contentful.com
• Contentful's Sync API fetches only changed content since the last sync, reducing API calls for large content libraries
• Webflow Data API handles CMS collections and items, including create, update, delete, and publish operations
• Webflow webhooks trigger real-time events for form submissions and CMS item changes

This article uses Webflow API v2 endpoints, since v1 was deprecated March 31, 2025.

Sync CMS content with webhooks

Webhook-driven sync is the most common API pattern. Contentful sends an HTTP POST to your middleware server when content changes, and the server writes that content into the CMS.

To implement webhook sync:

1. Register a webhook in Contentful by calling POST https://api.contentful.com/spaces/{space_id}/webhook_definitions with your middleware server URL as the target. Filter to Entry.publish, Entry.unpublish, and Entry.delete events scoped to the master environment.
2. Validate incoming requests by computing HMAC-SHA256(signing_secret, raw_request_body) and comparing it against the signature header from Contentful.
3. Fetch the full entry from the Content Delivery API using the sys.id from the webhook payload: GET https://cdn.contentful.com/spaces/{space_id}/environments/{env_id}/entries/{entry_id}.
4. Map Contentful fields to Webflow fieldData keys that match the target collection schema. Contentful Rich Text fields return JSON, not HTML, so convert them with the @contentful/rich-text-html-renderer package before writing to rich text fields.
5. Check whether a matching item exists, by slug or stored external ID. If it exists, update with PATCH /v2/collections/{collection_id}/items/{item_id}. If new, create with POST /v2/collections/{collection_id}/items.
6. Publish the item with POST /v2/collections/{collection_id}/items/publish.

Contentful webhook payloads use the content type application/vnd.contentful.management.v1+json, not standard application/json. Store the sys.revision value from each payload so you can detect and skip duplicate deliveries.

The site publish endpoint is limited to one publish per minute. For high-frequency content updates, implement a queue that batches changes and publishes at scheduled intervals rather than firing on every content event.

Run delta sync for large content libraries

The Contentful Sync API returns only content that changed since the last sync, which reduces API calls when you're working with hundreds or thousands of entries.

To implement delta sync:

1. Make an initial sync call: GET https://cdn.contentful.com/spaces/{space_id}/environments/{env_id}/sync?initial=true. Parse the items array and store the nextSyncUrl token in persistent storage.
2. If the response contains nextPageUrl instead of nextSyncUrl, keep fetching (responses return up to 1,000 items per page).
3. Classify items by sys.type: Entry items upsert to Webflow, DeletedEntry items trigger a DELETE /v2/collections/{collection_id}/items/{item_id}/live call, and Asset items feed into the media sync pipeline.
4. Only overwrite the stored sync token after you've processed the full batch successfully.
5. On subsequent runs, call GET .../sync?syncToken={stored_token} to retrieve only the delta.

The Sync API returns all locale variants per item automatically. The field structure uses locale keys ({ "en-US": "value", "de-DE": "Wert" }), so your mapper has to extract the correct locale before writing to Webflow.

Sync localized content

Contentful stores locale variants within each entry. The Localization feature in Webflow uses separate locale IDs for each CMS item translation.

To sync localized content:

1. Fetch Contentful locales via GET https://api.contentful.com/spaces/{space_id}/environments/{env_id}/locales and Webflow locale IDs via GET /v2/sites/{site_id}. Build a mapping object: { "en-US": "webflow_locale_id_en", "de-DE": "webflow_locale_id_de" }.
2. Fetch all locale variants from Contentful in a single call by appending ?locale=* to the entry request.
3. Iterate over each locale. Look up the corresponding Webflow cmsLocaleId. Skip Contentful locales with no Webflow counterpart.
4. Create or update one CMS item per locale per entry, passing the cmsLocaleId in the request body.
5. Publish all returned item IDs in a single POST /v2/collections/{collection_id}/items/publish call.

Contentful locale codes, such as en-US, don't automatically match Webflow locale identifiers. You need the mapping step for every localization sync.

What can you build with the Contentful Webflow integration?

Integrating Contentful with Webflow lets you manage structured content in one system and deliver it across your hosted pages without manual content duplication or republishing.

• Multi-channel marketing sites: Manage campaign content, product descriptions, and editorial copy in Contentful, then deliver it to your marketing site, a mobile app, and email templates from the same content source. A SaaS company running localized landing pages across five markets updates content once in Contentful and syncs it to region-specific pages through the API.
• Editorial-driven blogs with approval workflows: Content editors draft, review, and approve articles in Contentful's workflow system, then publish them to a Webflow-built blog through webhook sync. The site gets new posts automatically, and editors never touch the CMS directly.
• Dynamic product catalogs: Store product specs, media galleries, and feature descriptions in Contentful's structured content model. The API middleware writes product data into CMS collections, generating product pages that are server-rendered and fully indexable. Editors update product information without developer involvement.
• Localized resource hubs: Build a documentation or resource center that pulls locale-specific content from Contentful. Each entry contains translations for multiple markets, and the sync pipeline writes the correct variant to each locale. A company with content in three languages manages all translations in Contentful's editor and publishes to Webflow in a single operation.

If you need more control over field transformation, Rich Text rendering, or media asset pipelines, the API integration path covers those cases with full control.