Notion

Webflow sites built with the Webflow CMS often require teams to manage content inside Webflow itself. When writers, editors, and approvers work in another tool, publishing usually adds a manual copy-paste step. That handoff introduces formatting errors, duplicated effort, and a bottleneck where developers become the gatekeepers for routine content updates.

Connecting Notion and Webflow removes that bottleneck. Writers and editors work in Notion's familiar database and document interface while synced content flows into Webflow CMS collections as native items. The published Webflow site stays up to date without anyone re-entering text, remapping images, or reformatting rich content by hand.

This integration is most useful for content marketers managing blog publishing pipelines, agencies handling multiple Webflow client sites from a shared Notion workspace, and SaaS teams that want to give non-technical staff a content editing interface without granting access to Webflow. Developers building custom content workflows between the two platforms also benefit from the available APIs and automation tools.

How to integrate Notion with Webflow

What is Notion? Notion is an all-in-one workspace that combines documents, wikis, databases, and project management into a single application. It supports structured data through database views — table, gallery, kanban, calendar, and list — making it a flexible tool for organizing content that needs to be published elsewhere. Notion also includes a REST API and native webhooks for programmatic access to workspace data.

Teams typically connect Notion and Webflow when they want writers and editors to manage content in Notion while the published website runs on Webflow. The most common use case is blog publishing, where articles drafted and reviewed in a Notion database get pushed into Webflow CMS collections without manual re-entry. Other patterns include syncing knowledge base articles, maintaining directory listings, and logging Webflow form submissions into Notion databases for tracking.

The Notion-Webflow integration supports 4 approaches:

• Webflow Marketplace apps like SyncFlow and Whalesync handle Notion-to-Webflow CMS syncing without writing code.
• Code Embed elements let you embed published Notion pages directly into Webflow pages using iframes.
• Automation platforms like Zapier, Make, n8n, and viaSocket connect explicit Webflow triggers and actions to Notion workflows.
• The Webflow and Notion APIs give you full control over content syncing, field mapping, and publishing, but require server-side development.

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

Sync Notion content with Webflow Marketplace apps

Webflow's official integrations page recommends third-party apps that sync Notion databases to Webflow CMS collections as native items. This is the simplest path to a working integration and the best option for teams that want full SEO value from their content. Unlike iframe embeds, synced CMS items are indexed by search engines as native site content. Webflow's official Notion integration page names three apps for this approach: SyncFlow, Whalesync, and Cloudpress. These tools write to CMS collections and generally require a paid Webflow CMS plan to function.

The available apps each handle a different scope:

• SyncFlow syncs Notion databases to Webflow CMS in one direction (Notion → Webflow). It preserves inline formatting, CSS classes, code highlighting, TeX expressions, and converts Notion page links to Webflow post URLs. SyncFlow has 1,000+ installs on the Marketplace and offers automatic or manual syncing modes.
• Whalesync provides bidirectional sync between Notion and Webflow. Changes made in either platform propagate to the other. Whalesync also connects to Airtable and Google Sheets for multi-platform sync workflows.
• Cloudpress handles one-way bulk export from Notion to Webflow CMS. It imports content as native CMS items, preserving SEO value.

Set up SyncFlow

SyncFlow is installed directly from the Webflow Apps panel and maps Notion database properties to Webflow CMS fields through a visual drag-and-drop interface.

To set up SyncFlow:

1. Open SyncFlow in the Webflow Marketplace and click Install.
2. Connect your Notion workspace by creating an Internal Integration Token in Notion under Settings & members > Connections > Develop or manage integrations, then grant access to the target database.
3. In SyncFlow, select your Webflow site and CMS collection, then map Notion database properties to Webflow CMS fields using the drag-and-drop interface.
4. Choose automatic or manual syncing and trigger the first sync.

SyncFlow is one-way only — changes made in Webflow do not sync back to Notion. For teams that need bidirectional sync, Whalesync is the better fit.

Set up Whalesync

Whalesync handles two-way sync and manages API traffic automatically, making it a good choice for teams where content editors and site managers work in both tools.

To set up Whalesync:

1. Open Whalesync in the Webflow Apps directory and click Install.
2. Connect your Notion workspace and authorize access to the databases you want to sync.
3. Select the Webflow site and CMS collection to sync with the Notion database.
4. Map fields between Notion properties and Webflow CMS fields, then start the sync.

Whalesync's setup guide walks through the full configuration. Because Whalesync is bidirectional, changes in the Webflow CMS also update the corresponding Notion database rows.

Embed Notion pages with Code Embed elements

When you need to display Notion content on a Webflow page without syncing to the CMS, you can embed published Notion pages directly. This approach works for dashboards, reference tables, or supplemental content that does not need to be indexed as native site content. Iframe-based embeds do not carry SEO value — Webflow's integration guide states that "direct iframe embeds hurt SEO because search engines treat embedded content as external rather than native site content." Use CMS sync tools instead if search visibility matters.

Embed a published Notion Site

Notion's built-in "Embed this page" feature generates an embed code for any page published through Notion Sites. This is the officially supported embed method from Notion.

To embed a Notion Site page in Webflow:

1. In Notion, open the page you want to publish. Click Share at the top of the page, then open the Publish tab and click Publish.
2. On the published Notion Site, click Embed this page and copy the embed code. Optionally toggle Show page title before copying.
3. In Webflow, open the Add panel (plus icon, left sidebar), go to Components > Code Embed, and drag the Code Embed element onto your page.
4. Double-click the Code Embed element to open the code editor, paste the embed code from Notion, and click Save & Close.
5. Publish your Webflow site.

Publishing a Notion page also publishes all its subpages. Changes made in Notion update automatically on the published site. The Code Embed element requires a paid Webflow site plan.

Embed with a manual iframe

If you do not want to use Notion Sites, you can generate an iframe manually using Notion's general "Share to web" setting. This is a separate mechanism from the Publish tab.

To embed a Notion page with an iframe:

1. In Notion, open the page and click Share. Toggle on Anyone on the web with link and copy the public URL.
2. In Webflow, add a Code Embed element to your page.
3. Double-click the element and paste the following HTML, replacing the placeholder URL:

<iframe
 src="YOUR_NOTION_PUBLIC_URL"
 width="100%"
 height="800px"
 frameborder="0">
</iframe>



4. Click Save & Close and publish your Webflow site.

Some Notion pages may return a "Failed to Load" error when embedded, as Notion's docs note that certain pages prohibit iframe embedding. Code wrapped in <iframe> or <style> tags shows a preview on the Webflow canvas, but <script> tags only render on the live published site. The Code Embed element has a 50,000-character limit.

Connect with Zapier, Make, n8n, or viaSocket

Four automation platforms support direct Webflow-to-Notion connections. These are best for workflow automation tied to explicit Webflow triggers and actions.

Zapier

Zapier's Notion-Webflow integration offers pre-built templates and a visual workflow builder.

Available triggers and actions include:

• New Form Submission (Webflow) → Create Database Item (Notion)
• Updated Database Item (Notion) → Create Live Item (Webflow)
• New Order (Webflow) → Create Database Item (Notion)
• Updated Order (Webflow) → Update Database Item (Notion)

Zapier also provides a template for creating Webflow items when Notion pages are updated, which supports content sync workflows.

Make

Make's Webflow-Notion integration provides 69 total modules across 6 triggers, 47 actions, and 16 searches.

Examples that explicitly connect Webflow and Notion include:

• Watch Events (Webflow) → Create a Page (Notion)
• Watch Comment Threads (Webflow) → Create a Page (Notion)

Make's larger module count supports additional branching and customization around these Webflow-connected scenarios.

n8n

n8n's Webflow-Notion integration includes pre-built workflow templates connecting the two platforms.

The Webflow-side actions listed on the integration page are:

• Create (Webflow)
• Delete (Webflow)
• Get (Webflow)
• Get Many (Webflow)
• Update (Webflow)

The Sync Notion content to Webflow CMS workflow reads Notion pages where Status equals "Ready for publish," creates or updates Webflow CMS items as drafts, and writes back the sync status to Notion on success or failure.

viaSocket

viaSocket's Webflow-Notion integration lists Webflow triggers such as:

• New Form Submission (Webflow)
• New Order (Webflow)
• Updated Order (Webflow)
• Site Published (Webflow)
• Page Created (Webflow)
• Page Deleted (Webflow)

Choose based on the Webflow triggers or actions you need and the workflow complexity you want to support.

Build with the Webflow and Notion APIs

For full control over content syncing, field mapping, and publishing logic, you can build a custom integration using both platform APIs. This approach requires server-side development but handles use cases that no-code tools cannot, such as custom block-to-HTML transformation, image re-hosting, and bidirectional status tracking with retry logic.

The available APIs cover complementary scopes:

• The Notion API handles reading database schemas, querying pages, fetching block content, and creating or updating pages
• Webflow API handles CMS collections and item management, form submissions, and site publishing
• Webflow webhooks trigger real-time events like form_submission and collection_item_created to notify external systems
• Notion webhooks send notifications for events like page.content_updated and comment.created

Both APIs use Bearer token authentication. Notion tokens do not expire unless manually revoked. Webflow's v1 API reached end-of-life on March 31, 2025 — all new integrations must target v2 endpoints.

Sync a Notion database to Webflow CMS

This is the most common API use case. The flow reads pages from a Notion database, converts block content to HTML, and writes the result to a Webflow CMS collection.

To implement the sync:

1. Query the Notion database for pages ready to publish. Use POST /v1/data_sources/{data_source_id}/query with a filter on your status property. Paginate using start_cursor — never assume a single response contains all results.
2. For each page, fetch the body content with GET /v1/blocks/{page_id}/children. Notion stores content as nested JSON blocks, not HTML. Blocks with has_children: true (toggles, callouts, tables) require recursive fetching with additional API calls.
3. Transform Notion's block JSON into Webflow-compatible HTML. This step is mandatory — Webflow rich text fields accept HTML, not Notion's block structure. Block types like callout, toggle, column_list, and table have no direct Webflow CMS equivalent and need custom handling.
4. Check for existing Webflow CMS items with GET /v2/collections/{collection_id}/items, comparing slugs to determine whether to create or update.
5. Create new items with POST /v2/collections/{collection_id}/items or update existing items with PATCH /v2/collections/{collection_id}/items. Use field slugs (not display names) as keys in the fieldData object — retrieve these first with GET /v2/collections/{collection_id}.
6. Publish items to the live site with POST /v2/collections/{collection_id}/items/publish. Items created via the API default to draft status and require this separate publish call.

Notion serves images via time-limited AWS S3 signed URLs. Storing these URLs directly in Webflow CMS image fields causes broken images after the URLs expire. Download images during sync and re-upload them to a permanent host before writing the CMS item.

Route Webflow form submissions to Notion

This pattern captures Webflow form data and creates structured entries in a Notion database for tracking or follow-up.

To set up form-to-Notion routing:

1. Register a Webflow webhook with POST /v2/sites/{site_id}/webhooks, setting triggerType to form_submission and url to your server endpoint. Validate incoming payloads using the HMAC-SHA256 signature in the x-webflow-signature header.
2. When a submission arrives, create a Notion database page with POST /v1/pages, mapping form field values to Notion database properties. Set the parent.database_id to your target database and populate the properties object with the appropriate field types (title, email, rich_text, date).

This approach works without any automation platform and gives you full control over field mapping and error handling.

Set up real-time sync with webhooks

For near-real-time content updates, combine Notion webhooks with Webflow API writes. Notion webhooks deliver metadata-only payloads — they notify that a page changed but do not include the content itself.

To implement webhook-driven sync:

1. Create a Notion webhook subscription through the developer portal. Provide a publicly accessible endpoint URL. Notion sends a verification_token that your server must echo back to confirm the subscription.
2. When a page.content_updated event arrives, validate the HMAC-SHA256 signature in the X-Notion-Signature header. Then fetch the full page content with GET /v1/pages/{page_id} and GET /v1/blocks/{block_id}/children.
3. Queue the Webflow API writes behind a message queue (Redis, AWS SQS, or similar). Webhooks can arrive faster than downstream APIs can process them, and Webflow's API has plan-based request limits per minute.

Implementing a queue prevents dropped updates and keeps your integration within API limits on both sides.

What can you build with the Notion Webflow integration?

Integrating Notion with Webflow lets you publish and manage website content from Notion's workspace without copying text between platforms or granting every team member access to Webflow.

• Blog publishing pipeline: Set up a Notion database as your editorial calendar with status columns (Draft, In Review, Ready to Publish). When a post reaches "Ready," a sync tool or automation pushes the content into your Webflow CMS blog collection as a native item. Writers never leave Notion, and published posts carry full SEO weight.
• Multi-client agency content hub: Manage content for multiple Webflow client sites from a single Notion workspace. Each client gets a Notion database mapped to a specific Webflow CMS collection. Clients update content in Notion's familiar interface while the agency retains design control in Webflow. Whalesync or SyncFlow handles the sync per-site.
• Programmatic SEO page generation: Build a Notion database with hundreds of entries — locations, product variations, or topic pages — and sync them to a Webflow CMS collection. Each database row generates a unique page on the Webflow site. Teams have used this pattern to create thousands of landing pages from a single Notion data source.
• Form submission tracking dashboard: Route Webflow form submissions to a Notion database via Zapier, Make, or a custom webhook. Each submission becomes a Notion page with properties for status, assignee, and follow-up date. The Notion database serves as a shared inbox where the team triages and responds to leads without switching tools.

If you need more control over content transformation, image re-hosting, or bidirectional status tracking, the API integration path covers those cases with full flexibility.