# 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 

<table><thead><tr><th width="139.6666259765625">Notion</th><th width="191.333251953125">Webflow</th><th>Notes </th></tr></thead><tbody><tr><td>Webflow ID</td><td>id </td><td><strong>Required.</strong> Internal Webflow ID.  </td></tr><tr><td>Slug</td><td>slug </td><td>Webflow Slug. </td></tr><tr><td>_cover </td><td>( <em>any image field</em> )</td><td><strong>Optional.</strong> Stored in the specified field. </td></tr><tr><td>_content </td><td>( <em>any richtext field</em> )</td><td><strong>Optional.</strong> Converted to Webflow richtext-compatible HTML and stored in the specified field. </td></tr><tr><td>( <em>any other field</em> )</td><td>( <em>any Webflow field</em> )</td><td><strong>Optional.</strong> Converted to Webflow. </td></tr></tbody></table>

### Webflow ID&#x20;

**Required.**  In Notion, create a text field.  We recommend the name Webflow ID.  Add it to the field mapping to Webflow field \_id. &#x20;

* When blank, HF Notion knows that this is a new item, and will create it.&#x20;
  * Once created, it will update the field in Notion to complete the sync definition for future updates.&#x20;
* When populated, HF Notion knows that this is an existing item, and will update it.&#x20;

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

### Slug&#x20;

Represents the slug of the item.&#x20;

When the item is first created;&#x20;

* If blank, HF Notion will automatically create the slug, use it in Webflow and push it back to your Notion DB as well.&#x20;
* 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.&#x20;

Updating the slug in Notion should update it in Webflow as well.&#x20;

### \_cover&#x20;

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

### \_content&#x20;

This is the main document in Notion and is converted to Webflow rich text.&#x20;

Converts Notion blocks to Webflow field types. &#x20;

* Paragraphs
* Headings&#x20;
* Images&#x20;
* Tables&#x20;
* Videos&#x20;

### Other Fields&#x20;

Other custom fields can be added to your Notion DB as well and mapped to&#x20;

{% hint style="info" %}
Ref fields are supported as well.  Use the Ref item's slug.&#x20;
{% endhint %}

## Future &#x20;

Individual documents, connected to Webflow pages (?)  Maybe not, due to CMS challenges&#x20;

Localization processes?  Auto-translation and push?&#x20;

Expand field types.&#x20;

## Setup&#x20;

### Notion Side&#x20;

DB Fields-&#x20;

* &#x20;Title ( intrinsic ). Maps to the Name&#x20;
* `Slug` ( text ).  Maps to the Slug.  Auto-generated by the API from the Title using a Slug-compatible formula. &#x20;
* `Webflow ID` ( text ). This will be used by HF Notion to distinguish create v update requests, and to track sync bindings.&#x20;
* Content ( HTML ).&#x20;
* Cover ( Image ).&#x20;

Create the Webhook  &#x20;

* Access. Give it the Databases you want. &#x20;

<https://www.notion.so/profile/integrations/internal/e38d8085-0347-4c40-941c-f444d31b33fd>&#x20;

### Cloudflare KV&#x20;

KV Store is `NOTION_SYNC_CONFIGS`&#x20;

```json
{
  "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>&#x20;

## Testing&#x20;

### Notion Side&#x20;

Create a test Webhook&#x20;

* Access. Give it the Databases you want.&#x20;

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://hyperflow.sygnal.com/apps/hyperflow-notion.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.