<script type="application/ld+json">{"@context":"https://schema.org","@type":"TechArticle","headline":"Connect your Webflow site","description":"How to link a Webflow site to HarperFlow with a site API token and pick a collection.","dateModified":"2026-07-12","inLanguage":"en","author":{"@type":"Organization","name":"HarperFlow"},"publisher":{"@type":"Organization","name":"HarperFlow","url":"https://www.harperflow.io","logo":{"@type":"ImageObject","url":"https://www.harperflow.io/favicon.png"}},"mainEntityOfPage":"https://www.harperflow.io/docs/connect-webflow"}</script>
Docs
/
Connect Your Platform

Connect Your Platform

Connect your Webflow site

How to link a Webflow site to HarperFlow with a site API token and pick a collection.

July 11, 2026

Webflow is HarperFlow's most complete integration. Connecting takes a token and a couple of minutes.

Prerequisites

You need a Webflow site with the CMS available, and access to that site's settings to generate an API token.

Connect your site

The default way to connect is a site API token, not Webflow's account-wide OAuth login. Webflow's OAuth popup is unreliable in some browsers, so the token form is the primary path.

  1. In Webflow, go to Site settings → Apps & integrations → API access → Generate token.
  2. Turn on these permissions: Authorized users (read), then Sites, CMS, Assets, Pages, Custom code, and Components (all read and write).
  3. Paste the generated token into HarperFlow's Connect step and submit.

If you'd rather authorize through Webflow's login flow instead, there's a secondary link for that. Just know some browsers block its popup, and the token above always works.

Choose where articles go

Once connected, HarperFlow asks where articles should land. You get three options:

  • Create a ready-made collection (recommended): a brand-new collection with every HarperFlow field already set up.
  • Extend a collection you have: keeps your existing collection and design, adding only the fields it's missing.
  • Map onto a collection as-is: matches HarperFlow's fields to whatever you already have, skipping anything with no home.

See Custom field mapping for what each HarperFlow field does.

Verify your first draft

After you finish setup (or trigger an on-demand run), open Webflow's CMS panel and check your chosen collection for a new item. A brand-new collection's page starts blank until you style it in the Designer. See Choosing a layout for your options there.

Note: If the token you paste can already see a site that another HarperFlow workspace has already connected, HarperFlow adds you to that existing workspace instead of creating a duplicate one. You'll see a message about being added to an existing setup rather than the usual "connected" screen.