How to automate your Webflow forms and CMS with Airtable

who made that intro oh that's so nice [Music] okay [Applause] [Music] oh hi doing well on yourself okay well um hi i'm nelson and i am a pixel geek been geeking out about no code since the early days of webflow before i even knew it had a term but um yeah just overall why am i nervous i i stopped counting i stopped counting just if anyone wants to count for me please let me know but um uh yeah uh let's see here let me just go backward okay yeah so i'm a customer support uh specialist over at webflow been at webflow for five years and been using webflow for the past seven years uh since closed beta and i can't speak enough about it i i bring it around the world and i talk about it as much as possible because it has changed my life and my whole purpose now is to i have all these good feelings of like man this no code tool can really really help people like build awesome stuff and i want to share it and so that's my whole passion now is to share as much as i can with as many people as i can in hopes that they get to do what they want to do with their careers and uh that's just me in a nutshell and i'll just plug it right now where i'm what i'm where i'm doing that mostly now is through my community website that just launched uh two weeks ago which is or a week ago yeah which is pixel geek dot community um and so yeah so check it out um and you'll learn more about the community and its mission hold on hold on people in my chat are saying they can't hear you that's the can't hear aaron but they can hear still audio issues wait did you did you unmute yourself in stream labs dc levels i hear you oh remember you turned it off on loopback yeah turn it back on see if that works test that's okay you think can you guys hear me now we can hear nelson can't hear aaron even now when i'm speaking well there's like a 30 second delay in in live stream so oh okay so okay so penny seems to hear me okay yeah okay so we're back let's go back awesome okay so i'm gonna have to live with this little echo so if you hear me stuttering that's why technical problem i i totally know i totally understand yeah so essentially a year and a half ago i cold emailed nelson asking him how to set up my live stream and you were nice enough to actually answer and if that wasn't for that meal i don't think i'd be streaming today so this is kind of like a collision of worlds if you will uh you know similar to you i'm kind of passionate about helping folks build on air table and it's really changed my life and so i think we have that common shared goal yeah yeah i mean it's it's what happens when you just reach out to someone um or respond to someone that has has a question you'll never know what a small little gesture can do and it's my way of giving back because someone actually did that to me when i was really at one of my low points in my career when um when someone actually noticed and i wrote a blog post about this um and i'll send you a link to it so you can put uh show notes or whatever but uh i was at a low point and someone noticed that i wasn't on the webflow forms for like a couple of months and he just posted something like i don't know if this is okay to post or if if it's not part of the guidelines but i just want to say like is um where is pixel geek he's been active member here i haven't seen him in a while the fact that one person noticed changed my whole mind and i was like all right and then i worked harder from that point on and i was able to get this job at webflow and i'm like now i need to give it back so the fact that you're doing all the streaming stuff and you're going through it and this is i'm looking at your notes and says number 19 so this is your 19th live stream great job keep going well the funny part is i work at air table now so we actually both have kind of ended up at the company we advocated for that's great that's awesome man that's awesome anyway that's just me like um spreading my joy and yeah but yeah let's last technical thing here let me try to turn off the yeti can folks still hear me can you hear me nelson i can hear you but i'm people are saying that they can hear you when that was on yeah i know i could imagine but now i have both the yeti and you in the audio so let me know folks uh if you can i see the both levels so it should be fine i still see kind of that audio so let me know if you folks can't hear nelson or me and we're gonna kind of do this on the fly so this is the first time okay so uh awesome we've got nicholas let me know in the chat from my chat and and you know where you're joining us from if this is your first ever automate all the things usually we don't have such a a lengthy introduction but i thought for this time you know we have a special guest so i thought we'd do it proper so nelson really excited to have you here and yeah so our topic is webflow and airtable so both of our passions kind of you know in one and um so you know our kind of what i want to show you i know you're working on pixel league community which you know involves a lot of folks submitting information to your webflow website that you eventually want to put on your website so whether that's job postings or um you know member profiles or you know just any type of content that you need to manage and upload to webflow well we're going to show you we're going to show everyone i'm going to show you i know you're particularly excited about this but i'm going to show everyone how you could manage that content in air table so what that means is let's say someone submits a video and you want to kind of approve that video before it goes on to your website well airtable is a great interface to do that and what we're going to kind of work on is that glue between air table and web flow to make it really easy once it's an error table to be pushed to webflow yeah so a little back a little back story on uh how this stream idea came about is that i was talking to aaron i'm like um how do i do xyz because i'm trying to um whenever someone submits any content to the pixel league community it goes through a zap and then just sends me a notification on slack saying hey someone submitted content and then i have to actually open up webflow cms i have to actually open up webflow and then go open up the collection manager and then look through the data and because it's set as draft and if i'm like okay this is good i'm going to publish it then i have to publish but wouldn't it be cool if i didn't have to actually open up webflow at all and then aaron's like yeah you can you can do that through airtable where the data gets sent from webflow to air table and then if you approve of it all you have to do is press a button inside of air table and then it gets pushed pushed live on webflow and i'm like i so to be perfectly honest i never use air table okay so i need to learn this so i'm just learning with you the audience so that that's the that's the project for today that i and i'm that i want to learn with you all awesome so let me know in the chat how familiar you are with airtable probably more for like you know you know nelson let me know from your chat how familiar folks are and that'll kind of pace myself throughout making sure that folks understand the kind of basic building blocks of air table uh so you know folks in nelson's chat please just drop like kind of like i'm super familiar with airtable i'm unfamiliar with airtable and i i can't see the chat but please relay what that level is to me i know folks on my channel are probably a little familiar with airtable and so i'm gonna kind of make sure that folks you know kind of understand so our goal today is to never touch the cms right so our goal for today is folks submit something on our website and then it drops into air table and then from here table uh we kind of approve it and then it shows up on our webflow website okay so that is that is the goal for today so i introduced automate all the things it's a stream that was brought to you originally by nelson or thanks to nelson i should say so i do want to kind of introduce webflow uh airtable oh my god and uh talk a little bit about the process here so airtable is a low code collaboration app creation platform so essentially initially it looks just like a spreadsheet but lets you create kind of custom applications and what our application is going to do today is let us approve of videos that are submitted to our website okay so i'm going to kind of walk you through the structure of our base so air table is organized into tables tables contain information right very simply put so we have our video submission so this is anything that's submitted comes into here quick question go ahead nelson side note yeah i'm not a fan of youtube thumbnails that has a wacky face okay but then finn sweet used that photo and i'm like oh well that is my face yeah okay i i can change it and second you know all all complaints go to i just want to know i have no idea i have no idea i'm like oh my god i'm that youtuber [Laughter] you don't know what you'll see in like folks joining is i am absolutely terrible at designing anything uh and so i i kind of have fin suite do all of that work so at least the the things look good on on my channel but all that work is done by finn suite um so that's why i have you you know and whenever i'm like oh how do i do this in webflow i kind of look up a one of your videos so um so folks seem to be somewhat familiar with with airtable on my side so uh i'll start maybe with like a quick overview of this base and i think as we're doing that it'll kind of explain what error table is so essentially every single submission is going to end up in this table and i'll kind of the next the next section is how do we put data into here and i'll explain that in a little bit so then we have a status right so what i've done is that each field is an element of information i want to track for each one of my videos so just like the cms has those different fields right like it's link the the header right so this is actually just a reflection of the cms the only difference is actually it's much more user-friendly right so when i come in i can see all of my videos and i could be like okay this one i'm rejecting it and i just set as rejected and then we're going to trigger a bunch of automations it's going to let that person know that we've rejected it right so it's just more user-friendly but when you think about it from a structural perspective it is exactly like the cms does that make sense so what i've kind of have i have an email i have video title i have the video link i've got a thumbnail an image a little description and then we actually i'm gonna try to explain this in webflow terms we have a multi-reference field right that's the one that gets me like right it gives me anxiety like oh man oh it's super we'll get to it in like 30 40 minutes for you to beat me exactly exactly i think if if if by the end of the video folks here uh um you know uh um understand multi-reference feel i think this will be the the the video on how to do it and i think i've kind of simplified it relatively well at the end so there's a question on on you know an overview of error table what would use error table over google sheets uh air table is uh kind of a low floor high ceiling so it starts out as a spreadsheet and i think that's the feel that you'll get right now however as you level up you can really create kind of applications that live on top of air table and the first big difference is actually this concept of linked record right so right now i have type of video which is a linked record so i actually have a separate table that has all of my types of videos and the reason you should think about this is kind of like forget the this is not a great use case of what a linked record is but imagine you have companies as a table and then you have another table that is contacts in sheets you have no way of saying this company has these contacts yeah right and so when you think about it maybe project and tasks maybe it's uh you know a content campaign social media post so really that structure that linked record is fundamental and the difference between air table and kind of what i'll call spreadsheet so error table is not a spreadsheet it's actually an application builder so for instance i have my tools as well so that's when i create a video what we're going to do in webflow i have saying what tools are in this video right and so if i go into a new video submission right here i can actually just link the tools that are associated to that video but you can think of this as companies and contacts companies and projects here i'll give you a maybe a more usual use case of airtable woody what is something maybe you want a project management or content calendar you know kind of let's say content production and you want to do a blog editorial camp i've never seen this template this one has one table for some reason that's fine podcast editorial calendar right so we've got episodes transcripts the guests that were in each episode and so you can link and see okay jim was on utility designing the tap book and when i click on that i can see all of the information about that specific episode right so it's creating links and structures within your data that you can reference really quickly and kind of ability to structure data but that is also intuitive so it's a relational database that you can use as a as a person does that make sense nelson oh yeah yeah and and um i am enjoying your your passion for air cable because it it's like i uh just like my passion for webflow and it's like oh this is this is fun to this is gonna be fun to learn i'm i'm in now now show me show me sensei show me uh jedi master so so we've got kind of video submissions that has all the information that reflects structurally every one of my cms items right so i've got the name the url the header some video notes i've got that you know tools which you saw as a linked record over there so we're just taking our cms and we're building in an air table that way those two can communicate now the first question is how do i get data into my air table right so how do i actually give folks the ability to input we're not going to do that manually obviously so what you can do in airtable is create a form based on your table okay so i've already gone and done that there's this concept of views views or set specific ways of seeing your information one of which is a view so another example is this little kanban view so this is going to structure all of my videos by their status so i can just move information and say you know what this one is good i'm accepting it so i can see all of that information around that record and move it and accept it this later is what's going to trigger our workflow we're actually going to just go boom done and then it's going to get uploaded to the cms um and so another way so this is we're gonna call this kanban by status another way is just to create a form so this is you can add an image you know customize it what i kept is who are you what is your video called can you give me a youtube link and upload a thumbnail short description tell me what type of video it is what tools are included in that video but you can create this form however you'd like right so whatever information is in your table you can include and i've hidden the information that i care about so that's status that's up to me to decide that cms id and reject and i'll explain what those are in just a moment so those are just different fields different parts of my workflow so now i can open this form and i can embed it into airtable into webflow so i've got this little form would you say even would you suggest embedding the form or not necessarily so could you like take the html of those fields and then send it with the form action uh so we so what i would recommend is there's this little uh you can actually there's um here when you share the form there should be a little html actually you could just embed it you can just embed this link that said um what i would recommend is there's two options you can just use this form or you can create a webflow form and just take that form submission and send it to airtable via zapier right but you can you can skip zapier by embedding through here yes exactly so the difference is that zapier you will send it from air table to webflow yes yeah okay so if you want to contr so the decision factor is do you want control over your form if you want full styling control then you create it in web flow and you just simply when that submission happens on webflow map the different variables to airtable um creating and i think i did that in a previous stream so i'm happy to put that in the show notes if i did and so now what we can do is just embed this form so this is where you come in because i've got a page here submit a video and it's kind of weird because i know a lot about the airtable the webflow cms but very little around the actual front end of c of webflow so i've got an embed here and what i'm going to change is the source i think this should work just delete that like that oh no oh sad face oh no sad face because it's an iframe how can i just embed this share form oh there's actually embed this oh there we go you would think i'd know this there we go there's the code given to me so i can just copy paste this code go into webflow save and close and if all went well there there we go hey okay right okay so this form obviously style it much better than i did you submit your video uh um oh we've got connor in the house it's good that connor is here because he's the expert at multi-reference fields so he is the the original creator of the zap that i'm gonna show you in a bit so hey connor good to see you um okay so we have our form now you could imagine this let me publish this so we can actually go ahead and play around with it um sorry for moving you there nelson um so let's go ahead and try this out and we could submit information right so this lives and it's connected so let's say it's a video youtube link let's give youtube.com test one two three actually let's give it a real uh let's give it a real youtube link here it doesn't matter what it is first result is it's us hopefully it's us there we go it's us we can we can we can i'm afraid of uh there we go so we're submitting this right here submit a video i'm going to put that thumbnail you like so much let me give you you copied a youtube uh thumbnail uh oh really not an actual youtube url okay so does this work there you go there we go okay yeah that's it this is much easier with two people because you can catch errors on the fly you know short description a great video type of video okay so this is where that kind of multi-reference you should be thinking of yeah so i have three options this is a single reference field in cms so this is actually referencing those linked records so you can add them as you go anytime you add to that new table new options they'll show up in this linked record so i'm going to call this a live stream and in my cms if i come here and i go to my cms structure you'll notice that for every element i have that same kind of single select it's right here the category so that's a single reference field in air table and it's kind of a linked record an error table and it's a single reference field in webflow and then tools let's say this and this is a multi-reference field in your language this is a linked record in air table language so let's go into zapier and air table okay so let's say those are the two tools but you could imagine this being a categorization it could be whatever kind of structure you need in your data in webflow can be replicated with that so let me submit that and there if we come here into live stream we go into all submissions we now have that submission in our table so we didn't need zapier or anything like that it's automatically in our and we have all that same information we've got that thumbnail that linked record all that good stuff there's a bunch of stuff let me actually come here which is the reviewing let's say let's set this as reviewing so let's say you kind of come into this workflow and you want to say okay this one we've just received it we're putting it as received and i have this view a view is just a filter it's saying okay only show me records where status is received that way it's easier to kind of process the ones you need to work through and a little bit of magic here so let's say you want to kind of like okay great let's review uh this one you can actually go into blocks which are kind of uh little uh things that you update information visualize information you can actually have a preview so this will start playing the video that you're hovering so you can actually review it directly from air table so if i click on this url preview it'll start playing right here i don't want that to happen so right here you can just start playing it from air table so this is a little url preview block which lets you embed actual videos into your base very useful for content management or things like that so you'll never need to leave the base to actually do all your workflow and i've added some statistics you can see how many videos you've rejected accepted and received different tools that are used and even kind of have a zoom in onto the ones you still need to review so this is just kind of like a command hq if you will that you can see all of that information at once and you can visualize different stuff it's really cool so that was a quick introduction to blocks um but did that make sense quickly yes and yeah um so now we've kind of understand how to use an airtable form so you create your structure in airtable you embed the form on your website and it'll submit directly to airtable now as i mentioned you can also do that as a webflow form send it to zapier and then send it to airtable relatively easy we'll only have to do once okay so let's now start talking about how do we review these videos and then once they're accepted push them to air to webflow does that make sense yeah cool um so most of the work is essentially kind of managing this status right so you can create options right so i've created received accepted and rejected but you can be you know held for review whatever your structure is but essentially what we want is that when something is moved to accepted it's published to the webflow website yeah right however um so let's just kind of create that automation yes does that make sense cool let me know in the chat if folks are following here uh feel like i've gone maybe a little bit fast at the beginning but feels okay as well cool um all right so we're gonna use zap here uh and essentially what we wanna do is take the information from airtable and just send it to webflow using zapier so i know you're a pro at zapier we're getting there anyway i saw i saw what like 50 zaps in your pixel geek community as with everything i do i'm just stumbling my way through it and learning at the same time um so do you think folks are very familiar with with zapier on your stream uh somewhat okay not not sure um but yeah if you're familiar with zapier let me know in my chat but um yeah awesome so zapier is uh um tools that let you connect well it's a tool that lets you connect different applications so send data from one to another matt in my chat asks can you use other automation software like parabola the answer is yes i actually have a video on how to deploy to webflow from parabola on a timer so let's say you want to deploy every hour or every two hours and that's very useful for you know managing multiple landing pages or what you can do is use parabola to bring data into airtable such as your analytics so let's say once you've published this video you want to get google analytics data and you know let folks know how many views they've gotten right so i know connor did that i think with unicorn factory or at least was a big fan of when i did that automation um so that is in in my live streams if you check airtable ranking blog posts on webflow using google analytics and parabola so that was a quick introduction to another one of my favorite tools which is parabola but we're talking about zap here um so zapier is uh you know has kind of two steps action and uh triggers and actions so triggers are what need to happen in a certain application for the automation to begin right so what we want is something happening in air table namely that we've set the uh kind of status of that video submission to accepted to begin our automation so action triggers are always you know what do you need to happen or when do you want to trigger this automation so in our case that's going to be air table we're gonna have new record in view right so this views are set specific ways of looking at your information in our case we're gonna create a view that only has those submissions that have been accepted so whenever something comes into that criteria it's gonna trigger this zap and what this zap is gonna do is that it's gonna publish to webflow makes sense yeah so let's go ahead and do that so we need to create a view that only has accepted videos in it so what happens is if we go into this kanban and you move say you know what i've reviewed this one i'm moving it to accepted you want that to be triggering your workflow yeah so let's go ahead and create a new grid view this is going to be accepted videos and it's only going to have show me records so i just selected that filter show me records where status is accepted so what's going to happen here is that whenever something comes into this view any new record in this view zapier is going to be like oh we need to do something right so it's going to take the information from that record and send it to webflow yeah does that make sense so you can be as granular as you'd like here you can put multiple trigger multiple you know maybe it's when it's been reviewed and it's been more than five days that it's been submitted maybe it's it's been reviewed by two people you need two check marks whatever that criteria is that you'd like to trigger that workflow on you can use this kind of view filtering this view creation to specify when you want your kind of automation to run yeah make sense yeah awesome so whenever something enters this view that's what we want to trigger our zap on so coming back to our zap let's go here so what am i chew what am i doing here air table yep base right sorry you know when you do something like a million times and it's just autopilot but then you take a moment and you're like what am i doing i was like what base do they want what is a base um so this is live stream number 19. is it saying okay what error table base so bases are what i'm showing you you could have multiple bases that you could be working out of table we want the video submissions table and then what view our view is going to be that accepted videos yeah right so let's go ahead and test the trigger see what record is going to pull up so it's just going to kind of pull up one of these recent videos let's see it's the test at gmail let's actually just move the one we just received so let's go into our reviewing view so this is the one we just received right and let's say you know what this one status is accepted now what's going to happen it's going to leave this view right if because our filter is any of received so once we've accepted it's no longer in our received view it's gonna go into accepted you'll notice it filters out so that knows we have inbox zero we don't have anything to review and it's gonna pop up in our accepted videos it's right here cool right make this a little larger here boom so now let's go back let's get that one so i just want to test again if i come back it should get me a better load more let's see what record f is there we go okay it's a video so you know it's just zapier is just giving us that information and said the email in the email field i have a query plus test the video link is this so it's just telling us what it saw in that record so that we can then use in subsequent steps right so what do we want to do well what we want to do is create a webflow cms item yeah right so write that out webflow choose action event we're going to create a live item so we're going to create a live item in one of our cms collections webflow account i've got the keys to the finn suite account let me actually just quickly hide you guys um because i need to there we go so now i've selected my website and then the collection is going to be videos now this could be job postings it could be whatever and what zapier is going to go do is go get the information from the cms and say here's every field that's in that cms yeah right so now when i click i can actually see the information from step one i can see my airtable's information so we're gonna fill in that information so whenever that zap triggers it's gonna take that information from airtable and it's going to send it to webflow so now what we got to say is what variable goes where in webflow so we're essentially creating a one-to-one mapping with webflow so link to video let's show all options there's gonna be quite a bit of them so just look for a youtube link here wow it gives you a lot of stuff yeah it also gives you kind of metadata around some like thumbnail width height url right so one field could have a lot of metadata around it uh so that's you know just really getting granular into what you're able to send and this is actually gonna be very useful because i remember back in the day i couldn't send attachments from air table to webflow because it didn't have the actual kind of hosting url right and now we have that right here so oops let's remove that with so i can actually send that information through so continuing here actually speaking of which let's thumbnail let's add that in full url there we go now category that's our single select right right here however this is the workaround they're going to probably spend 30 minutes on at the end is that you can't send text to a single select so i can't just put the word live stream i can't put the value this is one of the limitations of web flows integration with zap here uh and so that i i need to do that differently and that's what we're gonna do in the next step right so we're actually gonna do some custom code and i'll explain everything about that custom code to get there so a few things here so video length all of that information i want to go through mapping it's going to take a little time but all of that information could live in air table and you could send it so publish date same thing name let's get that from step one where is that name video so this is one thing i'm terrible at naming fields in air table so you see its name and web flow and video title and air table so this is just it's all good you know i'm you'd think i'd be better at it doing it every day day in and day out but uh so i guess you glassed over it or maybe i missed it but how did you put the single reference field we have we haven't oh you haven't yet yeah so actually what we're gonna do maybe like some foreshadowing here is that we're gonna create the live item right so we're gonna okay send the information and then we're gonna add some custom code via api that is gonna update that information with the multi-reference field okay now this is where it gets here okay all right i'm waiting so this is so this is the this is so we're most people are probably going to click through to this to the next part so let me just make sure i have at least so tools is that multi-reference field we can't do it yeah but the rest so small tip here if you ever do do this and you want to add some rich text airtable is markdown webflow is html there is a formatter step in zapier to turn markdown into html so all you do is you add a step to take markdown turn it into html and then it'll send it to webflow do you want me to show you how to do that later later let's just keep going yeah that that is the nail in the coffin for google sheets yo go go go i'm so excited now good yeah awesome did not no you can do that yeah you can do anything honestly there's very very few limitations within air table to webflow uh that can be worked around with you know 30 minutes of connor's time or you know mckinsey child or matthew you know matthew or you uh uh yeah maybe i mostly i mostly just are inspired by those folks so a test item was sent to you so that means we've just created so we should have it's a video if i refresh this pro tip refresh like a heart like a full refresh don't just change in and out of the cms uh for it to appear this has been a little bit debate of my existence uh um thinking that it was sent not sent there we go we have 20 videos instead of 19 now okay it's a video it's there yeah we've got the thumbnail we've got the url right but no category and no tools okay yeah okay here we go all right this is the moment um so i actually need to do like a digression around air tables api uh so i'll introduce what an api is and then we'll talk a little bit about air tables api um and then we're gonna say how to update multi-reference fields using uh uh the api essentially so webflow api so an api for for those who are uh you know unfamiliar whether it is it is a very fancy and complicated word to say that you're actually just going to send someone a parameter and it's going to return you some information so actually every time you enter a url that's actually an api call an api call that sends to google that says you know send nelson the html of the page of google right so it's essentially just kind of browsers to put it speaking to each other to say hey i need this piece of data can you send it to me oh i need to update that piece of data and to do that there's like some parameters first you need to authenticate you need to make sure like are you actually aaron are you actually nelson do you have access to this website so that's kind of like authentication and then you need to say well what do you want to do do you want to pull information right do you want some information from webflow do you want to update information so apis are just a way of codifying machines talking amongst each other so i know that there's probably developers who are going to kind of disagree with what i'm saying but that's kind of like the no code view of what an api is and in the narrow world of web flow we're going to do two things we're going to say hey i have access to this webflow website that's going to be authentication and then it's going to be like okay what do you want what do you want to do so some of the things you can do is you know give me all the collections in this website that's what get sites site id collections means it's gonna kind of get all of the collections yeah so then it's gonna say okay well for a specific you know kind of uh um item give me all items for a collection right okay so when you're pulling information from a service that's a get call so get that information for me in our case what we want to do is update information we've just created that cms cms id and what we want is to update it with the multi-reference field right so conor going forward i'm only going to reference the multi-reference field conor telling me that a single reference i think you can update in the zap but a multi-reference you need custom code but we'll do both i think it'd actually be a good kind of explanation of how it works so get is going to say okay well you know get all of the collections what we want to do is update live collection item does that make sense nelson so far yeah any questions yeah cool so the type of call is a put so that's saying we want to update that information in webflow and then it's gonna say well okay well what information where in this webflow website do you want to update something so we're going to input a collection id your favorite variable that you can copy paste very easily and then what item do you want to update and you're going to put the item id right and then finally what fields do you want to update so this here on the right is just a fancy way of saying exactly what i just said so it's going to say i want to update information right i want to update information here so in a specific item in this collection and here's the information i want to update okay so we're just going to kind of take this structure redo the exact same thing and we're going to update two fields we're going to update the single reference field and then we're going to update the multi-reference field of the cms item we just created now we have all of this information right we know what we need to call we know what the url is we just ping this collection we're always going to ping the same collection and in the previous step we created this item so this is more like painting by numbers right it doesn't matter if you kind of understand what the api is or what it does just plug and play the information you already have into uh you know zapier so we're actually gonna do this from zap here so we have that id right so this is the item id of what we just created and the collection id and now we're gonna plug and play this information into what we just saw so oops no i don't i'm not back to setup so next we're gonna use web hooks so don't worry about what web hooks are so now there's kind of some preset options get post so get is pulling information post is inputting information to another system put is updating information again broad terms don't use this outside of no code uh so what we want is a custom request and it's it's just because the way the api is structured you need to use a custom request but if you watch this video you'll kind of understand why i tried doing it with a put request but the structure of zap here doesn't let us do that so our method we're gonna send a put the url and all i'm gonna do is like paint by numbers so our url is this right here so just going to copy paste this like that go into here right and so this is always going to be the same this is going to come from the free previous step right so it's asking what collection do you want to update well we have that information in step two collection id okay right let's just make sure that it's the one we want five two five e5 webflow let's go into that settings right here five e5 same thing essentially we're just plugging that number in and then what item well we just created this as well right so let's go into step two let's get that id right again 5 f 5 9 8 8 let's make sure we're talking about the same thing this is this one right here it's a video 5f5 988 same thing right okay next step here okay data pass through is false that's just the default setting don't need to worry about and then data so this is telling okay now that you have access to that api if you do ping it what fields do you want to update if we refer to the api it's going to move you a little bit out the way here so folks can see it's this right here so it's saying okay which fields do you want to update so let's kind of just copy paste this take the fields so fields is what i want to update let's start with so this is the custom code part yes this is the custom chord this little json is the only thing that you actually need to kind of wrap your head around and this is it's it's it's relatively simple in terms of just plugging and playing information there are a few might walk into some issues of formatting but it really is the biggest challenge is formatting so here fields if i look at the example it says okay put the variable the field from your cms between kind of quotes to and then put what you want that field to be right so let's say if we were to run this put it would set this item's name to updated exciting blog post title maybe just as an example to make sure everything works let's update the name to this works that's it that is our put call and now we need to authenticate so these are the headers this lets you authenticate so if we look at authentication it's right here the h so first we need an authorization so this is just telling webflow that we are allowed to use this api that's it so what we're gonna do a little thing here i actually keep my web my api keys in alfred so i can always copy paste them bearer side note to get your webflow api key it's in your project settings under integrations yeah uh do you think it's worth showing oh yeah yeah okay well we'll configure this you're cool with people having your api key right now oh i mean it's right there i'm i'm going to change it after the stream i have to so uh there's no way of doing this without everyone use it right now hurry up update my website you know put cool content on it though if you will uh so essentially there are three other headers and this is just you know if you if this is going to be a source of mistakes for folks you need to say that it's version 1.00 of the api in addition to authentication in case webflow ever releases another version of the api and finally content type you're saying that you're sending json in the fields so again you know this doesn't really matter okay so if we run this call what should this do nelson i'm putting this should update the name field to this works awesome so let's see if this works let me just make sure i think that should be i think yeah i think that should work okay thanks colleen for linking that uh so we've got invalid requests let's figure out what we're doing wrong here so this is where your heart starts speeding so maybe one of the first things i'm wondering is do we need to input so we're missing a little bracket here just putting the whole thing between brackets okay yeah but um did you republish your site just in case i don't think it's a publication yeah i actually do have i prepared because i knew i'm not that good i can see what the error is oh do we have name as a capital no we have a space here let me make sure so fields to oh i know what happened oh no field like that curly bracket like that huh name i'll copy paste this oh it is a patch call you're totally right so the funny thing is i made this mistake uh before so put is for inputting information updating patches for updating fraser you just said that makes more sense because get means i want to get stuff from you put means i want to put stuff into something and patch means i need to patch this up i need a you're totally right my god that could have been to let's see maybe that's not it all right thank god so get get things put put things back on the shelf and then patch i need to patch up the shelf exactly there so let's just make sure that that worked [Music] this works yay okay so that was step one so now we know how to update any piece of information right but the one we want to update is this single select we're going to do that one first right now how you should think about this is essentially this references another cms and each one of those cms has a cms id so the reason you can't just put the word live chat is that webflow is expecting the reference of the other cms so what i mean by that is live chat if i go into video categories i go into live chat it's not expecting the word live chat it's expecting this item id yep so what we need to do for a single select is just pass the item id in web in zapier now we're going to take 35 minutes back here we're going to go back into our air table and say well we need that information in air table right if we want to pass a cms id in zapier it needs to exist in airtable so what you'll notice is that next to each tag i've referenced a cms item that's the cms item id in in webflow and you do that once right and so you do it once you every time you create a new video category or job type you add a cms id and what you can do in airtable coming back to that discussion before of what is the difference between air table and google sheets except everything literally everything but is that you can pull information from different tables once you've linked them together right so what i mean by that is you'll notice that i've connected this video to the linked record live stream so now what i can do is i can look up that cms id and i can do that across the board so in this kind of uh um in this i've pulled in the cms item and when you look right here cms item formatted it's just our cms id with little squiggly marks on each side and that you know formats it in a way that uh zapier understands right i would like to see you make make that please yeah so this is a formula field so there it is yeah you've seen this before no no no i'm like that's where the the the craziness is i'm like uh when do i put yeah so essentially we're doing all of this just to format the like we're just putting little things on each side right because webflow expects the data in that format right so yeah we're just adding a little squiggly mark on each side and that's what we're gonna send to webflow does that make sense i see some yes yes so i'll kind of show you the the here so i think it's easier to kind of understand if i go to here all we're saying is that we're just going to take that field from air table and we're going to say the category is equal to that that's it so all we did was put squiggly apostrophes what do you call those um i put i say double quote double quotes we're putting double quotes on each side i don't you could have i think you could have done this in zapier where you put a little double quote put the cms item put another double quote on the other side connor will confirm and apparently you can do single reference field in the create live item so up to you how you decide to do this but what's important to know is that webflow expects a cms item in double double quotes yeah so let's let's give it what it expects so let's update here so instead of name what we want is category let's just make sure we've uh written that right so videos category do not capitalize made that mistake multiple times all single caps category and then pass in that cms item id right so this five e5 fa5 that should be live stream if everything went properly let me just go video categories live stream 5v5 fa blah blah right so we're passing that parameter i don't think there's anything else we've put it between quickly marks we've got little double quotes here if everything worked which again you know you never know with these things as you saw before this retest action it worked so now we don't wait doesn't you know let's make sure it works don't don't that's uh um you have to what's what's great about this you only set it up once once you set it up you're good to go yeah um and then someone asks you in the future like a couple of months from now and you're rusty at it and they're like oh can you do this for me and you're like yeah uh yeah that's what you oh so i'll share this stops my notes [Laughter] so we've got our category so it worked so conor even though you can do it in the step before i was happy to do it in the code i'm happy that it worked but now that was that was step one you know two-step multi-reference is next yes there we go now i'm like okay okay okay now so here's here's here's here's the thing with with this is that it's not it's not very different from single reference so this one is the old one so let's come here apologies for the back and forth except that when you think about you know you need to put multiple items so it's expecting an array it's expecting a table so it's saying okay you can't just give me a bunch of a bunch of cms items they need to be formatted in a certain way how they need to be formatted just quickly i'll show you here in the kind of code editor is bracket open no dot bracket close and saying cms item one close dot cms item two dot or you know it's called apostrophe a comma comma sorry yeah um this is making an array right and so essentially it's saying okay pass cms item 1 pass cms item 2 in that specific format and then it's going to go find those reference those reference fields to map to what you're trying to add so it's not so different from what we just did the only difference is that we need to take this add its little buddy or whatever tools are used in this video and format it in this way so what we're gonna do does that make sense yes okay so what we're gonna do is we're gonna format this in air table so air table is gonna output a everything between the brackets so all we're going to have to do is set up those two brackets plug what we're getting from airtable and run the api call yes it's getting late i'm like talking with my hands now it's okay it's okay this is the good part this is this is the main event so i want to come back here to right here tools okay okay so now we have a we have two linked records when you look up information i'm just gonna move you a little bit here um when you look up information from air table when you have multiple linked records right so when we looked up one item one linked record it returned one cms item when you were look up multiple it actually puts it in an array for you it puts a comma between the two so if i was just to look up cms id i'm going to use a lookup field so this is saying okay what linked record we want tools that's the one right here so here are all the options from the tools table so i want cms item save that and it formats it let me make this a little larger so this is telling us that for zapier that's our reference the cms item is 5e7571964 and the second one the one for air table is five e f five blah blah b two d and it gets this information right here from the tools table so i have the cms item id these are exactly the same as in webflow however the only thing is that they're not formatted properly they don't have the little squiggly marks so what we do is just like we did before is add squiggly marks air quotes air quotes are we calling them double quotes double quotes so we're adding double quotes on each side of them double quotes there we go um and then when we look up that field instead it comes formatted as we'd like so it's got double quote cms item double quote comma double quote cms and if i was to add a third tool here parabola it updates automatically so when that record is submitted we already have the reference field formatted as we want so it sends a zapier so it can be sent to our api call does that make sense yes i'm waiting for you to add the double quotes all right the double quotes are add oh how do i add the double quotes yes i add them same way i did before you oh you're doing that concatenate thing yeah that that i i need you to copy paste that and like and then that's the that's the thing that's the key to all of this it is that's the part that gets me confused yeah so essentially in my life um so matt asks a great question how do you add the comma and this is really interesting think this kind of maybe take a moment here this speaks to how great air table and webflow are in terms of thinking of structure of data right and so air table when you look up multiple fields or multiple linked records and you look up a field it'll format it as an array so it actually adds the comma automatically so what i mean by that is that here let me move this a little to the left look up cms id and let's move the tools as well here one to the right okay so zapier's cms id is this first one and because we have multiple tools here it's going to separate them with a comma so imagine you had you know a class with students and you looked up all the names of the students you would have in that field that look up field all the names separated by a comma how come the lookup cms id column doesn't have double quotes but the one with the cms ids do right and that's because we've formatted in that way so i'll just i'll break this let's say we had let's concatenate the word cat right so now you notice that here in the formatted id just ends with the word cat so we've just formatted that cms id in the way that we want does that make sense does that help yeah uh well uh where are you pulling the data for your lookup for your other lookup phone from so essentially here for every tool yeah i map it to a cms item which i took from webflow yeah i got i got that part but if you go back to video submissions view yeah and then the the one that you just showed us how to the lookup cms id no to the right yeah that one that doesn't have double quotes yes you're right and that's because i'm looking up the cms item id field without the double quotes formatted ones exactly okay this one is formatted this one is unformatted that's the tool there we go that makes a little sense um awesome so now we have our format and the reason we're formatting in an air table is because it's very difficult to format in zap here very easy to format in air table very difficult to format in zapier so now we have our array that all we need to do is just plug into that whole setup we had before so coming here let's go into here and then comma so this comma is just to say okay it's a new field right that we're adding this is from the api call so you notice that when you specify fields there's always a little comma here and then you start a new field that we're updating our new field that we're updating is tools and now we're gonna add those brackets so this is saying okay there's an array in here but we've already created everything in that array so in step one cms tools and we have cms ids for api this is again terrible naming of fields do better on your end this should be called tools web i don't know i actually really terrible at this so you'll notice that it's formatted the way we want and now we have that array of inputting that multi-reference field yeah so fingers crossed here seems to work so just let's make sure we understand what it's going to do this is sending 5ef whatever and this is from this one right here so it should send zapier and airtable as the two tools used in that video done editing let's let's test it retest action boom boom refresh it's actually quite good that i have to refresh it gives you that little bit of like anxiety a little bit of stress to see if it worked um please please please please yeah it's kind of fun to do with like other people some people just come to the stream to see me sweat and i appreciate those people um here we go this works but a boom zap here and air table so now we've sent that reference field uh and it's updated it's always kind of anti-climatic because we're kind of just working within the cms webflow and cms but for folks who are here this is exciting this is extremely exciting uh it was really exciting to me anyway um okay so now you know we have that whole flow the last step is actually updating the information airtable to say like hey you know we've created the cms item it's it's it's accepted it's added to your website so that's something else we're gonna end here with let's update record airtable again we're gonna update a record let's do this our base is going to be i have a lot of bases as you can imagine uh video submissions record we're going to take a custom value and we're going to take that record id so this is a unique identifier for each record in air table so we can find the right one this is air tables equivalent to the cms item so everything we did before to say what base what table you can think of those as collections and now we're saying what item id are we going to use we're going to use record id from step one and then what all we want to do is update the status what are our options here let's add published like that let's give a little rejected as a little red here there we go that feels like makes more sense so published we're going to put the word published like that because we know it's been published and i did have cms id if i'm not mistaken cms id should be empty there we go cms id this is just you so you have a key between your table and web flow of the cms id you just created that item id so you can always reference to be like oh like what where can i find this information in webflow so just some like some good practice here always have that cms id from webflow sent back to airtable to make it easier to link your data in the future uh to be able to find the right um the right cms item so we're gonna write back we're gonna update this with the create live item and we're gonna just add that id okay continue if all went well here we should update a test record was just sent that was not all submissions so now it's published woohoo boom and we've got the cms id so boom now we need to turn it on and the the moment i always worry about is let's let's do another one let's just do you know um let's copy paste this let's turn the zap on cool okay what here let me let me let me fill out the form can can you put it yeah go for it yeah go for it here i'll send you do you want me to send it in zoom uh oh yeah yeah send it in zoom okay all right so i'm gonna do it on my end submit your video let's see let me get a there you go all right so then you might be you might be thinking which video is nelson going to submit and then you you're going to see it and you're like of course come on like what else would he do all right so i'm gonna submit my video my email address um is um something like this dot com and then what is your video called um fly no um falling with style you know that quote no what is the toy story oh my god you clearly have a try clearly you're more on those kids kids movies than i am how many times have you watched it huh how many times have you watched it with your little girl oh zero times on what toy story one oh god but uh you know soon soon enough i'll show her all the things i mean um she's into thomas the train right now so but what what kid isn't so we'll get feels like a good start so i'm i'm filling out the form and i lost hold on where is my oh it's right in front of me there it is attach file for my thumbnail okay select files to upload uh let's see here desktop that one upload couldn't you just get the youtube thumbnail from since airtable already does all the metadata yeah sure yeah i mean you might still have to do it through zap here because air table doesn't fetch the metadata around the youtube so it doesn't actually parse the link that you put into airtable to be like hey what is the thumbnail around this however you could very easily do that with zapier as well i think you've done that before yeah there's a there's a free open uh open graph um oh there it goes okay all right so i'm moving this into received um and you can create an automation to automatically put it as received okay no pressure here let me just make sure that my zap is on yep it is on okay no pressure let's move this into accepted and if all goes well here it should update to published so how long does it usually take uh so i don't know i don't think it's an instant zap so let me not run it i don't think i don't think so i'm just going to run it manually oh okay so it's like every 15 minutes or something depending on your plan yeah exactly yeah okay it seemed like it worked okay published [Music] boom [Applause] it has a cms item id so that worked properly if we refresh this i'm actually quite proud of myself and i'm proud of you nelson we did it oh no no it's all you man i'm learning off of you you say that but then you're gonna go and implement this and make it better and then i'll stream what you built this is like a perpetual motion machine beauty of the web right there man there you go falling in style thumbnails oh here's here's the okay i'm gonna be very very honest yeah and it's one of the things that i'm like what this yes you don't know you just have to like click enter or you have to like copy paste it and it works so if you if your automator you probably ran through this if you're getting into this there you go the why doesn't the webflow cms actually activate the video field yeah okay you're doing something automation or inputting it with um a csv um yeah it because webflow is pinging the embedley api and bedley is a service where you can um embed stuff into your own software application and it um excuse me it makes sure that it is a legit url and what webflow is doing is saying uh when you put the url in it sends a note it sends a ping it it sends a signal to imbedly saying hey uh such and such uh posted this youtube video is it legit and in bedley would be like hold on let me check for you yeah it's legit and then uh webble's like webflow's like okay cool i'm gonna enable this however when you're doing this whole automation stuff yeah you're just putting it in and it never starts that signal from webflow to talk to embedly in the medley back to webflow it doesn't start that so you have to go into the cms press space and then backspace and then it then it works so if you're ever wondering how come it doesn't work when i import a csv or when i'm doing it zapier table zapier parabola integromat that is why um the engineers know about it um but it's out of my control and it's just one of those things i wish it would be fixed but software dev isn't a perfect thing it's never a straightforward thing and uh one day so i wonder if there was like a way maybe you can embed it just the url but it does do a lot of work for you right of like you know creating that click button so it does feel like you're right i actually just once once a week just like go and like you know do all that work but eventually i'm sure it'll be fixed hopefully you know i i you know when it will be we'll be the happiest folks and so we've got the category is right we've got those tools that multi-reference work properly and you know we've done it so now you can think of just so many things you can do from here member management so if you have an integration with member stack you can do something very similar if you ever want to accept folks into your community job postings um you know you could filter folks like folks who are abusive i don't know there's just so any kind of approval process can be done now so for folks kind of wondering like what is the next step parabola is really interesting and like it can auto sync so if you ever are editing information in web flow you know for whatever reason you want to send that back to air table um so you can do that using parabola just like a sync that data every hour um otherwise i don't know i utter you know i'm just really excited that it worked i'm excited that we got through it uh and yeah so there's a question in the chat from matt how do you make the multi-reference column an air table that's a lookup field in the the show notes i will include a link to the zap i will include a link to the base itself and in the base i'm actually going to explicit the code that i write because i don't think when you share this app it actually includes the code so i'll include everything that's needed in the base itself so you can kind of go and copy paste and structure this base however and it will clean it up give it better field names and things like that yeah well thank you cool so thank you so much for sharing um with the with the community it's always fun to learn um it's that whole concatenate please put that in your shirt notes in bold make it h1 i don't know but uh concatenate that that's the magical key that puts the double quotes the air quotes the cure curly cues whatever you want to call it around the cms ids which can also become arrays and that's the part that always gets me confused and that's the one that i need and i am definitely changing over to airtable it's going to take me a while but it's all a process of learning and streamlining and making things much better thank you thank you for for teaching me and the rest of the no code community and um thank you collapse and chat for aaron and thank you no it's been a it's been a pleasure i really really appreciate uh and i'm excited for you to come back in i don't know maybe three weeks and four weeks and show me what you've built an air table and then i'll stream that and you know your your your process is gonna be so tricked out and really cool um so yeah so i'm really excited to see what you build and again you know huge thanks for uh inspiring uh myself and and i'm sure a bunch of others in terms of maybe publishing content but also just you know being a contributor or a great contributor to the no code community so um i don't think we'll meet at again at no code conference but i'm so so glad that we got a chance to stream together and hopefully we'll make this recurring yeah yeah any time let me know um this has been fun and to everyone in my chat thank you all so much for being here uh again uh aaron uh since we're multi-streaming uh go ahead and shout out your links where people can watch your streams and and learn more about you yeah uh so i've got the essential guide to air table which is a free class on air table at aat dot io i stream on wednesdays usually at 6 00 pm eastern uh and just youtube.com c slash automate all the things uh you know i i i do this for fun so i try to keep a regular schedule but you know um you can go to aatt.io calendar to see all upcoming streams i will have one or two next week um i can announce on monday what we'll do then so you know really excited you know uh uh to yeah keep streaming this is so much fun i'm really just glad that folks enjoy this uh and get value from it and really couldn't thank you enough for for coming on today and yeah just keep doing what you're doing nelson and uh um yeah it's been great can't say much more all right thanks man thanks um and for your channel subscribers um i'm over at youtube.com pixelgeek join the community over at pixelgeek.com i stream every saturday at 10 a.m to 12 p.m pacific time so uh this has been just a um an honor to be part of your community and if you haven't subscribed to aaron please do so everyone thank you aaron i'm gonna eat dinner now all right folks go subscribe to nelson it's been a pleasure i'll see you soon man have a good one

Channel: pixelgeek

Views: 9,626

Keywords:

Id: cYvnUI4UcHs

Length: 88min 24sec (5304 seconds)

Published: Wed Sep 09 2020