How to Automate Webflow CMS + Notion

in this video you will learn how to automate posting to the webflow cms yesterday i built launched and automated webtotheflow.com which is the blog to teach you all about workflow development so today i want to show you how i built this in just one day using notion and make two of my favorite tools so in case you are new to web to the flow my name is marvin aziz i'm a freelance developer and i would highly appreciate if you could hit that like and subscribe button it does make a difference so without further ado let's jump right into it all right so it took me roughly one day to build up this very very basic website okay let me give you a quick overview of what i've built so that's the home page right little animation going on here um nothing nothing too fancy to be honest but just a very basic version of the website okay another thing that i built is the contact page here very important for me so in case anyone wants to work with me um they can sign up here but the most interesting thing right now for you and for me as well um is the blog section okay so i've created this page and if you're familiar with a workflow you might know of the cms feature they have so if you're a paid customer you can use the the cms feature to basically upload content and show it dynamically on your website right these are the current videos i uploaded to youtube and if i click on one of them there's another landing page for it this is i didn't i didn't write this content within webflow actually did it in notion let's have a quick look into the cms [Music] database icon right here and um i've already created a cms collection if you haven't got one you can just click on this little icon here and it will take you to a page which is looking similar to this right so um i've already set up my cms collection if you want to add a new field you can do that by clicking here and then just choose whatever you want to choose right so i've set up a few custom fields if you have a look into the the actual blog post you can see that there's a lot of content in here so i've got a title i've got a slug important i've got a post buddy all right a summary and all the custom fields we discussed earlier on so to give you a quick overview of my situation right i just started this new youtube channel thing um which is great and it's a lot of fun and i'm using notion for basically all my stuff like all all things i'm writing down i'm taking notes i'm having databases in there blah blah blah and i love it i wanted to be able to actually use all that information in order to populate everything and automate everything i have running right so i use that for other tools as well but right now we are going to talk about how to actually get that data from notion and put it into any place you'd like but now we're going to keep it new upload but that's basically the the process right so what i do is i take notes within my notion board i created right it's a content calendar and that's where i put in everything so i've got a couple of custom fields in here i set up and here you can actually see my blog body my slug the twitter text and the slack is um actually it's a formula so what i did right there i just use the name of the page replaced all the empty spaces with the dash and voila that's my slug right the status is really important here because i can choose whether that's just a simple idea it's in progress it's published it's a review it's published and i'm going to publish it on youtube and that's basically my trigger so as soon as i put any of those pages on published my automation is triggering and it's starting to take all that all that data and put it into webflow also what i've done is i've put up a workflow idea here to help me out so the most common option here to automate would actually be going to the documentation of webflow api and figure out how to do it with php or javascript which is great i mean they have a good documentation for all those people who are interested but i also like to save time that's why i chose to use make formerly known as integromat is an automation tool which is able to connect basically almost any software you know right so if you click here on templates you can actually see that they have lots and lots of examples on how to use that a lot of them using google sheets because it's just a simple database and everyone knows it let's go into social media okay so for example i can choose that template add new instagram comments to a google google sheet and auto reply if they contain specific keywords and this is some some some fancy marketing stuff okay but yeah um that's the tool i chose to use and i'm going to show you how i actually built the automation that is the setup right here so if you um are in make just go to scenarios right here create a new scenario and start from scratch you are going to be able to choose a trigger and i chose watch database items in notion here it is already as soon as you have that in there you can basically choose a connection you can basically tell it when to trigger okay so you can say for example every day for a specific time or special days of the week so it's going to check every 15 minutes for database changes within the database i i defined right what i did here in the connection in between i filtered so that i only get the pages or the database entries with a published date which is important for me because i only want published notion items to be published to my web level website okay then what i did is um actually put in the router and the router lets you decide um on different dates which way to go right now down here i said that's that's gonna be a new item which doesn't exist in webflow so far and how i'm able to check that is with the id i just mentioned right so in webflow i had this id upload id this field and if that's empty go down this path if it's filled i'm telling make to go up that path all right as soon as the item doesn't exist make is going to create an item within webflow i created another automation right here to update the database item okay so i took the item i got before changed the webflow id to item id so every cms item has a as a unique id which i'm using to actually make sure that i'm not creating duplicate content right so if the id exists i want to check for that for that item workflow and update it right so sometimes i change the description of the notion database entry it's gonna check for every update in there and update it accordingly let's have a look into the actual webflow page because there's something i came across which was a bit annoying let's say all right if i go to my blog post template what i wanted to do actually put in the video blog of webflow and get the video on my youtube link right that's not working so i checked on the forum and the problem right here is that if the link is automatically posted into the webflow cms it's not able to scrape the data from that video so as soon as you let me show you if you go into any any blog post and i have that linked right here it's inserted already right but there's no data underneath it so if i take that out and paste it back in it's actually scraping the data and now it's able to show me the video right but if it's automatically and that was the case before if it's automatically inserted by a via the api to make or any other tool it's not able to scrape that data so i had to find a workaround basically and the workaround was a little bit of code so if you have a look in here there's a little embed i put in so i'm going to make it real easy for you okay you can simply that code from my notion page right so i've got a link down below you can click on that and just copy and paste that into your own webflow site but i need to explain it to you a little bit more okay so um up here that's just styling to make sure that the actual iframe of the youtube video is responsive if you are choosing to host a vimeo video um you might not need that because i think they've got responsive iframes kinda but youtube doesn't and so that's the div with the iframe in here and you can see that i've got a link without the actual youtube id right so at first it starts to load an iframe without any video but i'm going to insert it with javascript a little bit of javascript okay if we scroll down here you can see that there's a link variable and i simply added a field in here you can also add custom fields into your embedded code editor which makes it real easy for you to actually declare that variable for the people in the front head to see okay so i've got that youtube link and what i'm doing here is basically get only the the id from that link right so so that i'm able to within notion post any any link i want didn't want to simply put the or simply copy the id from from the youtube link from the browser and put it in here it's just an extra step for me right so i decided to also save up some time and energy energy there and yeah simply get that from the link i posted okay and after that i'm simply going to um insert that id into here [Music] as you can see i've got a query selector using that div container defined here and we're going to change the source to whatever this id might be okay if your if your automation is set up and ready but it's really easy you like it gonna take a couple of minutes to get into make and then you're ready to go also what i'm going to do from now on is actually add more modules back here so as soon as i create a written item i would like to post a tweet on twitter and get that tweet data from the notion board as well right so if i publish it on notion it's going to be published on webflow and on twitter and you can go on and on with it right so you can connect maybe your if you got subscribers to your newsletter also you can send them an email or you can connect telegram to it and receive a message that all um all automations have been completed right so endless opportunities here if you enjoyed this video please let me know in the comments make sure to hit that like and subscribe button because it does make a difference as i said in the beginning and hope you enjoyed it see you next one you

Channel: Marvin Aziz

Views: 5,001

Keywords: webflow, notion, webflow automation, integromat

Id: 2-BqZDZodJ4

Length: 15min 42sec (942 seconds)

Published: Thu Mar 31 2022