Hyperflow Notion

Features

• Supports Notion-to-Webflow sync from any Notion DB to any Webflow CMS Collection.

• Allows specific field mappings

• Solidifies mapping by pushing back the Webflow item ID into Notion

• Auto-generates slug from name, if it is blank

Field types;

• Handles content to Webflow rich text HTML conversion

• Handles cover images

• Ref's, by slug

Mapping

Notion	Webflow	Notes
Webflow ID	id	Required. Internal Webflow ID.
Slug	slug	Webflow Slug.
_cover	( any image field )	Optional. Stored in the specified field.
_content	( any richtext field )	Optional. Converted to Webflow richtext-compatible HTML and stored in the specified field.
( any other field )	( any Webflow field )	Optional. Converted to Webflow.

Webflow ID

Required. In Notion, create a text field. We recommend the name Webflow ID. Add it to the field mapping to Webflow field _id.

• When blank, HF Notion knows that this is a new item, and will create it.

  • Once created, it will update the field in Notion to complete the sync definition for future updates.

• When populated, HF Notion knows that this is an existing item, and will update it.

    "Webflow ID": {
      "webflowField": "_id",
      "type": "text"
    }     

Slug

Represents the slug of the item.

When the item is first created;

• If blank, HF Notion will automatically create the slug, use it in Webflow and push it back to your Notion DB as well.

• If set, HF Notion will use the one you've set. Be sure it doesn't conflict with an existing slug or you may have problems.

Updating the slug in Notion should update it in Webflow as well.

_cover

This is generated from Notion's cover image. You can upload your own, or set one from various services for free.

_content

This is the main document in Notion and is converted to Webflow rich text.

Converts Notion blocks to Webflow field types.

• Paragraphs

• Headings

• Images

• Tables

• Videos

Other Fields

Other custom fields can be added to your Notion DB as well and mapped to

Ref fields are supported as well. Use the Ref item's slug.

Future

Individual documents, connected to Webflow pages (?) Maybe not, due to CMS challenges

Localization processes? Auto-translation and push?

Expand field types.

Setup

Notion Side

DB Fields-

• Title ( intrinsic ). Maps to the Name

• Slug ( text ). Maps to the Slug. Auto-generated by the API from the Title using a Slug-compatible formula.

• Webflow ID ( text ). This will be used by HF Notion to distinguish create v update requests, and to track sync bindings.

• Content ( HTML ).

• Cover ( Image ).

Create the Webhook

• Access. Give it the Databases you want.

https://www.notion.so/profile/integrations/internal/e38d8085-0347-4c40-941c-f444d31b33fd

Cloudflare KV

KV Store is NOTION_SYNC_CONFIGS

{
  "name": "Blog",
  "notionDatabaseId": "28e6e09372ee80e1bd3bf34b113d4673",
  "webflowCollectionId": "59d3f382f210ca00015829d5",
  "fieldMappings": {
    "Webflow ID": {
      "webflowField": "_id",
      "type": "text"
    },
    "Name": {
      "webflowField": "name",
      "type": "text"
    },
    "Slug": {
      "webflowField": "slug",
      "type": "text"
    },
    "_content": {
      "webflowField": "post-body",
      "type": "html",
      "headingAdjust": 1
    },
    "Publish Date": {
      "webflowField": "published-date",
      "type": "date"
    },
    "Updated Date": {
      "webflowField": "date-updated",
      "type": "date"
    },
    "_cover": {
      "webflowField": "thumbnail-image",
      "type": "image"
    }
  },
  "publishControl": {
    "field": "Status",
    "publishValue": "Published"
  }
}

e.g. https://dash.cloudflare.com/9095ee3415dc7ee4e497da2a3c8d1992/workers/kv/namespaces/7f2efd02f52b4033b003edb88987c660

Testing

Notion Side

Create a test Webhook

• Access. Give it the Databases you want.

https://www.notion.so/profile/integrations/internal/12765ef2-4b61-4ccc-b74a-1fb667eccd81