# 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>