How to Build a Webflow CMS Team Bio Page That Syncs From a Single Notion Database in 2026

The Webflow Team Page That Stopped Showing the Wrong Job Titles

A Bengaluru SaaS client kept asking me to update the team page every time someone got promoted, hired, or left. By March 2026, I had updated it eleven times in five months. Each time it was a five-minute edit in Webflow that should have been a thirty-second edit in their existing single source of truth, which was a Notion database their HR lead already kept current. The fix was to sync Webflow CMS bios from that one Notion database, so an HR edit in Notion became a live edit on the website without me. I want to walk through the exact build, including the gotchas around Notion property mapping, Notion API rate limits, and Webflow CMS field types.

I have shipped this on four Webflow sites in 2026 and the upkeep math is unambiguous. According to Notion's January 2026 developer changelog, the Notion API now serves data fast enough to power a Webflow CMS sync on a five-minute cadence without hitting rate limits, and Webflow's June 2026 partner update raised the public CMS API write rate to sixty requests per minute. Those two updates together made this pattern reliable enough to put into production.

This tutorial covers the Notion database structure, the Webflow CMS schema, the small integration script you run on a schedule, and what to do when a teammate leaves.

What Is a Notion-Synced Webflow Team Bio Page and Why Build It in 2026?

A Notion-synced Webflow team bio page is a Webflow CMS collection of team members whose source of truth lives in a Notion database, kept in sync by a scheduled script. You build it in 2026 because your HR or operations lead already updates Notion in real time and your Webflow site should reflect those edits without you in the loop.

The pattern matters because outdated team pages quietly damage trust. According to a B2B buying study from Forrester in February 2026, forty-one percent of B2B prospects check the team page before booking a sales call and over one-third report walking away when titles look stale. A team page that updates the same day the org changes is a small signal that the brand is current and competent.

The pattern is also small enough to be safe. You are reading from Notion and writing to Webflow CMS. You are not putting anything else at risk in either system.

How Do You Set Up the Notion Database So It Maps Cleanly to Webflow?

The Notion database needs eight properties. Name as the title, Role as a single text property, Bio as a rich text property, Headshot URL as a URL property, Department as a single-select property, LinkedIn as a URL property, Live On Site as a checkbox, and Sort Order as a number property.

The Bio property in Notion holds rich text, not Markdown. I keep the bio short, two or three sentences, because longer bios on the rendered page look noisy. The Headshot URL points to an image already uploaded to the Webflow Assets folder, which means the headshot pipeline is separate from this sync. I prefer that. Notion is good at text fields and bad at images, and Webflow Assets is the right home for production images.

The Live On Site checkbox is the kill switch. When a teammate leaves, the HR lead unchecks the box. The next sync run sets the matching Webflow CMS item to draft and removes it from the live page within minutes.

How Do You Structure the Webflow CMS Collection for Team Members?

Create a Webflow CMS collection called Team. Add fields that match the Notion properties one-to-one. Name as Plain Text, Role as Plain Text, Bio as Rich Text, Headshot as Image, Department as Option, LinkedIn as Link, and Sort Order as Number. Add one extra Plain Text field called Notion Page ID, which holds the canonical Notion identifier the script uses to match records.

The Notion Page ID field is critical. Without a stable id, the script cannot tell whether a Notion row is a new team member or an existing one whose role just changed. Using name as the match key fails the day someone shares a name or changes a surname.

For the Department Option field, set the options to match the single-select values you use in Notion. If you add a new department in Notion, you have to add the matching option in Webflow first or the sync fails on the new row. I have a one-line note in the Notion database header reminding the HR lead of this.

How Do You Run the Sync Without Hosting a Server in 2026?

Use a Cloudflare Worker with a scheduled trigger. The Worker runs every fifteen minutes, calls the Notion API for the team database, iterates through rows where Live On Site is checked, and uses the Webflow CMS API to create or update items in the Team collection.

The Worker is roughly fifty lines of JavaScript. It needs three secrets stored as Worker bindings. A Notion internal integration token, a Webflow site token with CMS write permission scoped to the Team collection only, and the Notion database id. Do not hardcode these in the script. Cloudflare Workers' February 2026 secrets dashboard makes binding them trivial.

The sync logic is read-modify-write. For each Notion row, check whether a Webflow item with that Notion Page ID exists. If yes, update the existing item with current values. If no, create a new draft item and publish it. After all rows are processed, call the Webflow publish collection items endpoint with the list of ids you touched.

How Do You Handle a Teammate Leaving in This Workflow?

When a teammate leaves, your HR lead unchecks the Live On Site box in Notion. The next sync run reads every Notion row, builds the list of ids that should currently be live, and then queries the Webflow Team collection for any items whose Notion Page ID is not on that list. Those items are moved to draft via the Webflow CMS API.

I do not delete the Webflow items. Drafting preserves the URL slug and the historical record, which matters for two reasons. First, search engines have already crawled the bio page and an outright delete creates a 404 you do not need. Second, future contractors or alumni pages may want to repurpose the content, and keeping the draft saves a rewrite.

For a public farewell or alumni page pattern, my piece on how I build a Webflow CMS team page that stays honest when teammates leave covers the design side of this in more depth.

What Are the Notion API Gotchas to Watch Out For in 2026?

Three Notion API gotchas have bitten me. The first is the rate limit. Notion enforces three requests per second per integration, according to the Notion developer reference updated in January 2026. If you have more than fifty team members, paginate the request and add a small sleep between pages.

The second is the rich text shape. Notion returns rich text as an array of objects with annotations. Webflow CMS Rich Text expects HTML. You need a small converter that walks the array and produces clean HTML, preserving bold and italic but stripping any colors or backgrounds. Mishandle this and your team page picks up Notion-default coloring that does not match your brand.

The third is the Notion database scoping. The integration token has access only to databases you have explicitly shared with the integration through the Notion connection menu. If you swap to a new database without sharing it, the API returns an empty result and the sync silently clears your Webflow Team page. Add a check that aborts if the Notion result is empty.

How Do You Test This Without Breaking the Live Team Page?

Test in two stages. First, run the script with the Webflow create and update calls commented out and only the read and diff logic enabled. Print what it would do for each row. Eyeball the output against the Notion database for ten minutes. Second, point the script at a duplicate Team collection inside the same Webflow site, set its slug to something like team-staging, and run the full sync against the duplicate.

Only when the duplicate matches the Notion database exactly should you swap the script to the real Team collection. I keep the staging collection around permanently for future schema changes. When I want to add a new field, I add it to the staging collection first, run the sync, see what breaks, and only then touch production.

What Else Can You Sync From Notion to Webflow With This Pattern?

The same pattern works for any Webflow CMS collection whose canonical source lives in Notion. I have used it for case studies, careers postings, press mentions, and event listings. The script changes only in the property mapping. The sync architecture is identical.

One caution. Do not sync your blog. Notion is a workspace tool, not a writing tool, and the formatting fidelity to Webflow's Rich Text editor is poor for longer prose. For blogs, I write directly in the Webflow CMS editor or in a dedicated Markdown file and convert at publish time.

How to Build This Notion-Synced Team Page on Webflow This Week

Create the Notion database with the eight properties. Mirror the schema in a new Webflow CMS collection. Sign up for a Cloudflare Workers account if you do not already have one. Write the fifty-line sync script using the Notion API and the Webflow Data API. Run it against a staging collection. Swap to production once the staging output matches.

For broader context on how I think about Webflow data plumbing, my piece on how I send Webflow form submissions to Notion without Zapier shows the form side of the same approach, and my note on how Notion AI replaced three tools in my Webflow workflow covers the wider role Notion plays in how I run client projects.

If you want help building the Notion sync for your Webflow site, I am happy to walk through it. Let's chat.