How To Create And Delete Webflow CMS Items Using Airtable And Zapier

hey now so in this video i'm going to walk you through how we can use zapier to send data from air table in this example real estate listings to webflow cms and then back to air tables we can get the webflow collection id the reason why we're going to need the webflow collection id is that after that i'm going to show you how we can also delete those webflow cms items from airtable once they're either sold or off the market so here we are in the collection settings of our real estate website and before i continue we just want to say thanks to the fine folks over at flow base for this amazing cloneable so as you can see here all of our fields are typical for what you'd expect on a real estate website we have a name images address bedrooms bathrooms etc so what i did was i went ahead and created a base and air table now for the sake of this tutorial i didn't match every field into our air table base just enough to show you the process on how to connect it through zapier to make a cms item if this was a real project ideally you would want to have every field represented in your base so now that we are in our air table base we're going to make a dummy listing so i live in los angeles let's have some fun with this one so let's say our address is 2800 bluej way because we are living in the bird streets and for the attachment i found this really great photo on unsplash by this really great photographer taylor simpson links to her social media will be in the description be sure to check her out she's really does a really amazing work so we're going to attach that photo and once again thank you taylor so now that's added in we're gonna go bedrooms and this is in the bird street so it's gonna be five bedrooms five bathrooms availability yes now the availability this is going to come in handy later on when it comes time to delete the cms item through airtable and then we have our record id the record id is our airtable record id and if you're not sure how to get that what you do is you create a field and in the field type you're gonna go to formula and type in record id so so once you hit rec it comes up record id hit save and it comes up the next column is going to be our webflow collection id that's what we're going to get after we send it to webflow it's going to be the id number that comes back that will also come in handy later on when it comes time to delete it from the webflow cms so we have our sample record set up now we're going to create a zap in zapier and send it to webflow so we're gonna head over to zapier and we're going to make a zap so the event that's going to initiate the zap is airtable and our event is a new record going to connect it to our account and to the corresponding base and so far only table is listings so we're going to select listings and hit continue and then we're going to test it and it found a record 2800 bluej way that is correct going to continue and now the action we want is we want to create a live item in webflow so we're going to hit webflow create a live item continue connect it to our webflow account and the collection we want in this case is properties so now comes the time where we map our airtable columns to the appropriate fields in webflow so first thing is going to be the property image and now if this is your first time using zapier with airtable when you first select an image it can be kind of confusing because it's going to bring up a lot of metadata so you want to make sure when you go for the image that you're choosing the right one and you know that because it's going to have the dot jpeg at the end so this one right here attachments url seems to be the right one has the jpeg so we're going to select that one and we'll also have it as our main image we'll skip the gallery for now address 2800 bluej away bedrooms we'll just search for it bathrooms we'll skip the size garage and date and price tag availability we'll map it to air table go to custom id number or map it to our record id name 2800 bluej way skip the slug you'll make it automatically in webflow archive false draft false hit continue and now we're going to test it by sending it to webflow someone says the item was sent to webflow just now let's refresh and boom there it is however we're not done yet we have to send that record back to air table to get the collection id so we're going to go back to zapier add the plus back to setup and our third action is going to be airtable and our event is we're going to update record continue once again map it to our account and the appropriate base okay so our record is we're gonna map it to the record id so go to custom and air table record id and we'll also map it to the name 2800 bluej way and we'll skip all the way down to where it says webflow and here we will map it to the webflow collection item so we'll go to to create live item in webflow see all options scroll down to id and then continue and now we will test it it says the record was sent to air table and there is our webflow collection item id ending in 154 let's double check 154 so boom that bar works we are now going to turn on the zap and there it is the first part is done so now when we update our air table with a new listing it will automatically be sent to webflow and then back to air table with the webflow collection id now for the next phase we're going to delete that webflow collection item when it comes time to either take it off the market or if it sells all through our airtable database so i've gone ahead and added a couple more listings to our webflow cms and now what we're going to do in this step is we're going to be able to delete these cms items all while never having to leave our air table database so in order to set this up we're going to go back to air table and as you can see where our availability column is all checked what we're going to do is we're going to create a new view so we're going to go to views and we're going to create a new grid view and we're going to name this off market you could name it whatever you want whatever is appropriate to your database and as you can see all of them appear because we haven't filtered anything yet so we're going to do is we're going to go to filter we're going to add a filter and we're going to add where available is unchecked as you can see none of them populate because all of them are still available so we're going to go back to all of our listings and for this example we're going to uncheck 2800 bluej way so as soon as we uncheck that listing we're going to go back to off market as you can see it appears here so now that we have a listing that is off the market we're going to go set up our zap and zapier now in order to do this it's going to require a web hook now unfortunately using the web hook feature in zapier along with the multi-step zap we did in the previous section in the previous step will require a subscription with zapier so unfortunately you will need to pay in order to have this zap running at all times however if you did want to trial in order to learn how to do this i highly recommend doing that that is one way of doing it for the time being so back to the tutorial we're going to go to zapier and we're going to make a new zap once again our starting event is airtable and our event this time is when a new record is in view hit continue once again map it to our account and the appropriate base and the view this time is going to be our new view which in this case is off market so select off market and hit continue we're going to test it and there is our record our 2800 bluej way hit continue and now here comes the fun part of doing the api call so for our action we're going to do web hooks by zapier and our event is custom request and don't worry if you've never done an api call before this is probably going to be the easiest api call you will ever do it only requires one line of json code so we're going to hit continue so now we're going to set it up our method for this one is going to be delete and for url we're going to have to go to the developers website for webflow and get the url of the collection so we're going to do is we're going to go to that developer's website which is developers.webflow.com and go to this section on removing collection items so as you can see here in this example request this url here is what we're going to put in that section the https.api.webflow.com collections however this is just a generic url for the collection id and the collection item id what we're going to need to do is get our collection id and our collection item id number and put that into this url so we're going to copy this url and paste it in so now we're going to go back to our collection settings and get our collection id and copy it in paste it in excuse me and for the item id we're going to get that from the column and air table we use to get the webflow collection id number which is why that step was so important in the previous step so we're going to delete this sample item id number and map it to the webflow id number in our database webflow there it is great so now we have our url set up uh data pass through defaults to no on zapier we're going to leave that as is so we're going to select false and now for data this is where the json code comes in if you're going to go back to that developer's website and where it says example json response we're going to copy that all of that and paste it in skip on flatten skip authentication and now headers is we're going to enter in some more information so we're going to go back to the developer website and we're going to get these authorization codes if you will so the first one is the authorization bearer we're going to copy that in authorization and then that authorization is bearer and this long line of code is the api key so we're gonna have to get that through our project settings so i've already gone ahead and copied mine into a notepad so i'm going to pause the video here to go copy and paste that so i've gone ahead and pasted in my api key into that bearer token and so we need to add two more headers the next one is going to be the version so we're gonna go back to developer website copy this accept version that is 1.0.0 and the last header we need is we need to indicate that this is json code so add one more and it doesn't have it on the delete collection item but if you scroll down the next one has a content type we're going to copy that content type and it's application slash json paste it in and hit continue and now here comes the moment of truth where we test my request was sent to webhooks by zapier so we're going to refresh our webflow go to the cms and 2800 was deleted so back to zapier and we're going to turn on that zap so there you have it how to create a cms item in webflow and then delete that item all while never having to leave your airtable database i hope this tutorial helped and if it did be sure to hit the like button and thanks for watching

Channel: Brian Love

Views: 1,298

Keywords: Webflow, Airtable, Zapier, Create Webflow CMS Items From Airtable, Delete Webflow CMS Items From Airtable, Webflow CMS Zapier, Zapier Webflow, Zapier Webhooks, Zapier API Calls, Webflow API Calls, Airtable Tutorial, Webflow Tutorial, Airtable Webflow, Create CMS Items In Airtable, Zapier Tutorial, Zapier Tutorial 2021, Webflow Tutorial 2021, Airtable Tutorial 2021, content management system, responsive web design, nocode, Webflow API, how to use webflow, web flow, No code

Id: 10NYjGdU_1Q

Length: 19min 33sec (1173 seconds)

Published: Wed Jan 27 2021