How to sync Notion with Webflow — Full Tutorial

hey there in this video we are going to see how to sync a notion database with a webflow collection the goal is to be able to use notion as a Content writing tool and automatically sync the pages with webflow this way you can write in notion and design with webflow the tool we'll be using is called notion webflow sync to use it start by heading to this URL click on get started you will have to approve and Grant the app access to your webflow sites then you will be prompted to create an account and sign up in my case I already have an account so I can simply login perfect now let's head to the web flow [Music] designer let's launch the [Music] app we now need to connect notion with the app click on connect notion then choose which notion page or folder you you want to allow access to awesome now that both webflow and notion are connected we can create our first sync task click on the sync a new database button then you need to choose which web flow collection you want to sync for the notion database you can either choose an existing database or simply create a new one if you create a new database the database Fields will automatically be generated with the right field types for you in our case we are going to sync an empty webflow collection called blog posts which it has the following fields for notion we are going to choose create new database and let the app do the work for us we just need to choose the page on which the datab biz must be added to then we have a few more settings the first one is called autop publish and it allows you to automatically publish new entries you you add to the notion database when they are first created in the webflow collection when it's disabled new entries will be staged for manual publication which means that they will not show up on your live site directly you would have to manually publish the site when you're ready then there is the autosync setting which allows the app to automatically detect changes to the notion database and sync them to webflow automatically then there is the Highlight code block set which enables code highlighting on code blocks that you create in the notion Pages similarly there is a render math expressions option which enables math expressions to be rendered properly as opposed to just raw text code finally there is a styling setting with two options inline Styles and use classes the inline Styles option will add styling directly into the rich text content which means that the styling of the block post will be embed using the HTML style tag alternatively the use classes option adds class attributes to the block posts with no styling which allows you to fully customize the look of the blog post directly in webflow you can import the default styles to your webflow site and that will import all the classes into your webflow project with their default notion styling we will choose inline Styles as it's easier to start with once you are ready you can click on the save button to create the sync task the app will automatically create the empty database in notion with all the associated Fields as seen here now let's see what happens if we create a new entry in notion we'll quickly fill out the entry and see what happens if you have the autosync option enabled changes made in notion usually sync within a few [Music] minutes now let's wait a little bit and head to web flow when we open the webflow collection we can see that the new entries were properly synced and the content of the notion page was successfully converted into Rich Text content that can be used directly in your webflow [Music] posts let's see how it looks like on the live site the post is showing in the list of posts and when we click on it the blog post opens up we can see that the content is working perfectly fine and that the notion page was synced properly let's now see what happens when you connect a webflow collection to an existing notion database let's delete the sync task we just created and recreate it again now instead of creating a new notion database we are going to reuse the one we already have when we select it the app will try to automatically associate the fields together if you want to make changes you can simply change which notion field a given webflow field needs to be Associated to you can also choose to not link a field at all if you want to once one last thing I want to show you before we end the video let's go back to the list of sync tasks we have there's a button here that allows you to do a full resync a full resync will update the whole web flow collection so that it matches with the notion database this means that all entries of the webflow collection will be updated to match with the notion database and if they are not present they will be archived that's pretty much it we have explored how to use the app to sync a notion database and a webflow collection which is a great way to Leverage The Power of notion as a writing tool while designing your blog through webflow I hope you enjoyed this tutorial

Channel: Productivity.Tech.Business

Views: 448

Keywords: webflow, notion, sync, webflow sync notion, webflow database, webflow cms, notion database, notion tutorial, how to sync webflow and notion, notion and webflow, use notion as a blog management system, design in webflow, import notion to webflow, webflow notion, tutorial, web design

Id: _890vYoe3KQ

Length: 6min 11sec (371 seconds)

Published: Sun Jan 14 2024