Google Sheets to Webflow Zapier Setup

all right we are streaming live here and I'm just going to spend some time tonight going through something I said I would go through for a while and I haven't so I'm just going to just going to get after it I've been promising some people that I would tackle how to make a SAP or how to work with the SAP where Google sheets live updates a web flow collection so a lot of people tend to get stuck on live line I'm update because it is kind of different and so I just wanted to show tonight kind of how to do that so I figured if I'm gonna make a video and record it and share with people why not stream it live and if people decide to watch great I mean if people don't watch that's also great so I'm just going to further know people watching here I'm just going to quickly tweet about this real quick so in fact I may have already tweeted it will see live let's do it so first thing I'll reducer just want to start off by creating a web flow project so that's gonna be my first step I'm gonna jump in here and say let's start a new project I'm just gonna start with a template because I think it would be easier so I'm gonna look at the free templates and I kind of like a specific template I like this one so I'm just gonna use this template right here I'll say use for free and then I'm gonna create a project just so we have like some visuals here to work with I just didn't want to have to build from scratch whole point of this is kind of show how that update happens on that on the back end and so let's get started so what I'm gonna do if I can work with this here okay I am going to create a collection so I'm going to start there so I'm going to come up here and hit create new collection and then now I need to give the collection some sort of a name so if we're gonna take this from Google sheets to web flow I just need a collection that I'm gonna update and there's some pre-built ones here in my template but I want to start with you know a blank slate here so I'll have actually we can actually use let's just say team members that's what we're going to use right so team members is is a collection I'm going to use I want to live update team members and I want to you know put this one put it in a Google sheet so if I update a team members information if their job title changes if you know image changes and we could we could go in and edit this field so let's these fields so let's go ahead and add a couple more we'll just say job title we'll say one just gonna create some basic fields here because it doesn't really matter what they are before this we just want to be able to update them I don't know what everybody's use cases for this so but I just want to have some some down here so I'm gonna save this collection okay and so now I need to just kind of be able to work off what's here so typically what I do is I come up here and I create so you type in sheets dot new you'll get a brand new spreadsheet and Google if you have a Google account and I'm just gonna call this live update zap shoot okay so boom I've got that and now I need to set up my sheep so that it's ready to start updating webelo okay so fields I have here name profile picture job title so I want to start there just give me a head of row name and I'll have to look back here profile picture okay and then I had job title field one filter okay job title field one and field too okay so now I've got all of these fields set up across here and but I need a few other things so one of the things that trips people up that I see all the time is okay but how do I live outfit thank you Eric thanks for sucking out that's really nice of you this guy makes this seem so easy you know I don't but I'm gonna try so one of the things I see people get caught up in all the time is where do I get the item ID from web flow to set this up okay so we need a field here in the Google sheets to hold the item ID so I'm gonna create another column and I'll just call it item ID BAM so now I have item id listed here is well okay all right so in this instance I've already got some items that exist here right and so how do I get the item IDs for you know things that already exist in my collection and this one's a harder one to tackle so I'm gonna skip this part for now I have a video that I will link in here in fact let me just throw them chat right now just so just so everybody has it so let's see here okay so what we want to do is I just want to you share and copy this link okay I'm gonna throw this in chat here so this is how you can go about getting item IDs do it's a link to a video you can use to get item IDs of items that already exist in your collection so if you wanted to get the item IDs of all these that video will help you get it and I'll cover that some here in a little bit but I'm going to show you kind of like a cheaters way around to get this and we're going to create a couple of SAP's so here's where I'm gonna start I'm also going to create a page or go to my pages and I'm just gonna go to the about page and I'm going to delete this and then right in here just take a look in my container like this I'm just gonna go throw in a four-block oops let's go ahead and throw in a form block here so I'm gonna drop a form block into into this container and in fact I'm gonna remove this classy or so and then what I want to do is I want to filled for every thing that shows on this sheet right so like I need like a name that's perfect I could say you know profile picture and then here on this field I'm gonna change this to just plain I can call this profile picture and we'll change the label here to also say profile picture yeah so name profile picture what else job title we need that so I'm gonna go ahead and just copy this field and paste it copy this label and paste it so it will say job title and then we'll edit this field call it job title as well and then profile picture I'm not gonna require this and then I'm gonna copy this label and copy this field because we have at this point I think build one will rename this call it field one and then we'll do the same thing here we'll call it field to just paste them these across we'll call this field - okay so now my form matches this here and it also matches my collection here okay so I've got the same fields in all places and so that's where I'm going to start and then just the perfectionist send me once that don't look the same so I'm gonna go ahead give that a class up button but so now I have and I wonder if their input style for this oh yeah there are perfect actually weird let's not do that okay so now we have all of our fields set up here and then I'm gonna go in here into my form and I'm just gonna call this new we'll call it add that's the ID we'll call it add [Applause] so that's the name of our forum that's an add new team member form okay so now that we have that here we have this named our form named we want to go ahead and start working with us so render the camera shot of me go we hit it because you don't need to see that anymore we just want to focus on what's important alright so now we've got we've got this and then if this was like really a life site I probably what I would do is I would password protect this page so that people couldn't go stumbling across my my page and automatically adds somebody to my spreadsheet unless that was the whole point of my site like maybe I want users to be able to add things in but I would hide this so what I'm going to do is I'm gonna publish and so we publish this site and then we're going to view this page and then I'm gonna fill out this form just one time so I'm going to say you know what name is the name of the person that's been partnered with just me jump title has no idea what he's doing I don't have a link to a picture so I'm just gonna leave that blank for now and then we'll say you know field1 field2 will save me a blah blah just we want some want some content here so I'm gonna fill this out and hit submit so that hasn't gone through and then now we're gonna jump over to zapier and we get this app here we're just gonna click on make his app and this is gonna be the first part of this so we're gonna say you know create a team member what we'll call this one and then we want to do web flow so we're gonna say a form submission trigger so news app first trick or trigger what's gonna fire everything and get everything going is a form submission so we're puttin that form of submission save and continue' and then we choose our web flow site so I guess I need to connect count and then I'll scroll all the way down here at the bottom to my groovy project authorizing this okay and I should really made me so much better you see how terrible I have been at this it's awful um okay so I'm gonna say we continue and now I can choose my site which is the one I just created and then I can choose my foreign name so this is the four name add a new team member you have to have submitted something on that forum at least one time for this to show up so I'm gonna choose that I'm gonna hit continue ok so then it pulls in my form submission you see all the content here you know blah blah name all that fun stuff and we're gonna hit continue okay now you can do a couple of things here a one you can actually jump back into your web flow project I do this a lot and so I'm going to go ahead and include this here and I'm gonna create a field in my in my collection and call it item ID and I'm gonna save that because I'm gonna put the item ID not only here but I'm gonna put it here so I can use form submissions to update my website as well okay so I'm just kind of I'm gonna play it with way even though we're probably not going to jump to that I just want to show you that that that's five time maybe I'll cover some of that but just want to show you what's possible here so I create that so what I'm going to do is now that form submission I'm gonna add a step and so the first thing that I'm gonna do is I'm going to make a web flow action and I'm going to create a live item okay so creating a live item here we go gonna choose my side again and we'll call this Google sheets is app so that we know which one it is I'm gonna continue and then what I'm gonna do here is just gonna let me set the template so I'm gonna say the site isn't going to be my site the collection is team members and then I get to fill out the information most people don't struggle with the use of because it's that brand new one I didn't put in a profile picture image but we can go ahead and say profile picture that way if somebody did pace 1-8 it would be there chomp title might get from job title you know filled one we're gonna get from field one we're just connecting these right I feel - we're gonna get from field to the item ID we don't have yet but we're gonna get there so we have to name this so I'm gonna call it the person's name whoever we added we're gonna use their name and then we choose whether it's archived no it's not archived no it's not draft that means it's gonna be automatically created and go live as soon as we create this so I'm going to continue and then I'm gonna jump to the next step so I'm gonna send the test of upload and you can see this Onam can't be published as your collection structure has changed okay so I I started this and then I went in and added an item ID so what I need to do is I need to publish my site someone come back to my site and publish it something that you were an in - from time to time and then let's resend a test Olimpo boom that works and then we're gonna add another step now we can come back in here and refresh our project and when we do we'll see that we have another team member boom bit Parker has no idea what he's doing this is correct and so now I've got that there my information is in so we've created it there okay the next thing I'm gonna do so I created the live item you know top the form submission created the live item now what we're going to do is we're going to add a row to the spreadsheet so let's choose our app and let's choose Google sheets and then we're going to create a spreadsheet row excuse me have to take a drink so I'll use my blood flow G speed account and now I'm gonna jump in here and I need to pick a sheet so we go from my Google Drive spreadsheet is required so this live up because that sheet which we created here what we're going to use and then we need to select a worksheet there's only one so we'll choose that first one there and then what it does is it looks for the headers up here so it's found all of these and it's gonna let me map to this just like it would you know any other app right so name we go back to form submission we're gonna map this profile picture even though I didn't submit one we're gonna go ahead and grab that anyway just in case we have those in the future job title has no idea what he's doing correct filled one and we can start filling these in filled to you so we see this here filled - okay and then the item ID how do we get the item ID well here's how we get the item ID we're going to jump in right here and where we created a live item it now shows us since we created the item and we're using web flow here it's going to give us the item ID so now we have this here boom and we have the item ID 4 so we can continue and what we're gonna do is we are going to send a test to Google sheets so it says the test spreadsheet row is added and then if you look here now I have since I create the side of using zapier I have access to this item ID now and this is what I need to be able to live update so now I could make changes to this sheet in update web flow this is what you know we needed to be able to do this right so item ID is here now so I've got that and then I always like to follow this up is going to be another step that maybe you wouldn't want to put in here but since I like to use web flow to update my PSAPs as well update items how we gonna whip up and I would update a live item just want to show you how this works and so when I jump to my new project that I just created and I say I went to live update this collection which is my team collection as its loads so team members boom a live update that and then item IDs required since we're everyone's always guessing like Oh where's the Adam ID we have that now we got that fun we created the live item so we're just gonna grab that we need that to live update and then we're just gonna do the required fields Plus this item ID I want to put this ID in to upload so we'll say name I'll use the name from when I create the live item will archive it no draft no then we'll continue and then once we continue we hit send Testament below and then an item was just sent to upload just now and then if you jump over here to your collections so I'm gonna refresh to my project here so we can get a live look at the data and then if I jump back in here to my team members you'll notice that now under Ben Parker I have an item ID that was added in here so we live updated this item and I have it in here now as well okay so moving that parts are done this is how we create an item and get that item ID we have it here okay so now this is where we jump into our PSAPs where you jump back in the stamps we're going to start on this Google sheets to web flows okay so let's make his app start here and then we're gonna search for Google sheets and then we're gonna say a new or updated new spreadsheet Road new or updated spreadsheet row and we'll say you know on a new spreadsheet road we were updated Shero team drive them all these we're say new or updated spreadsheet room that's what we want to use so I continue and then I'm just going to use my web flow and we'll say my spreadsheet is the one we've been using which is live update the snap okay and then the worksheet step zero okay that's sheet one okay we're going to say any column trigger on changes to cells in this column only so you can specify a specific column or you can leave it open and and you can edit any one so you say trigger some changes to cells in this column I leave this field blank if you want this app to trigger I'll change this to any cell within a row all the rows within will trigger this app you know the trigger column is empty so even if you throw something out to the side it's still gonna update that that item so ready to continue and then spreadsheet row a so it's got that there we go we're to continue pulled in our first spreadsheet room okay so now we need to finish this up we're going to say well fill up and then we're gonna update a live item we'll continue and then once we update the live item we're gonna say Google sheet zap site and then we're gonna set up the template so site is project we've been working on collection we've been looking in team members and now the item ID and this is where once again people get stuck we have this item ID in the sheet now so we can say that's the item that's getting updated profile picture is going to be this field job title will be that field build number one would be the spilt fill number two that's set to fill number two item ID we can even match that over item ID the name which is the name of the web the item itself and then we'll send it to archive no draft no and then we continue and we send the test a web blue and since we have that item ID we see that works and now we're gonna say Google sheets below and we'll finish and then we'll turn this as Apple one so now this is app is on who I've hit the maximum amount of lives apps for my current plan nice so let's go to my zaps and turn a couple of these off so I'll turn off test air table and I'll turn off what blow up boats and then I'll jump back into my into my app here we'll see if we can find it sheets yeah Google sheets - web below this one so we're going to turn this on and now that's on and rolling and so now I should be able to make it change to this sheet and then it should update in my web flow project so instead of it has no idea what he's doing let's change this to customer support okay now that change has been saved and let's just look here we'll go to task history and refresh this this is the hardest part about this one is the head sometimes it's really hard to get this sheet to update so I always like to like updated you know you can change this from yes to no whatever or blank it out but that tends to get it to fire and that's why people have asked me about this one idle I don't really love using Google sheets just because I feel like this one's hard to get to fire so we'll take a peek here and see if it's run it's supposed to be incident we'll go team members see it hasn't changed yet and then when we look at the task history it still hasn't run so this is the hardest part of doing Google sheets too so I used Google sheets a lot I typically use them to store data and compare data this is why I don't like creating something you know brand new or updating from from straight from this so I'm just going to close this out and then let's open it back up history and we'll see if this will get it to work here so we'll jump back in here and then we'll say here maybe a change and we'll see if that gets it to run and it's still didn't run that's really funny okay so but that is technically how you would how you would do it right so that's the set up even though it's not really running for me I have like I said I have a hard time getting these to trigger if we did a new row in my in might trigger but um but that's how you do it so task history if we go to our tasks we go to our saps here Google sheets to web below what we're gonna do is use this item ID to then update alive item and above them so that's the theory behind it we'll see if this ever runs but this is once again this is why I don't really like using the updated Google sheet to YouTube of but that's how you do it this is where you get the out of my team the same thing works for air table air table I know a lot of people use a table to let flow and it's pretty solid and a great way to work so might be something you get more mileage out of so now that we've covered this part I would probably have to turn some of these off here for me so actually I can turn off my prints fool since I'm not really using that right now a little printful we'll turn that off and then let's create another set and I'll show you how to change items and web flow with forms right so let's go to de Becque back to our site here and I'm going to jump into this container and I'm just going to start selecting things get rid of that Kohl's container here and then what I want to do is I'm just going to put in a collection list so I'm going to tie this to team members and then what I'm going to do is like this is where we could put in a lot of information but what was pretty like you know heading and get this from the name maybe their h3s and then with our list we'll just make it you know three columns what have you and then this is where we could have some fun right so we could have with our team members here we can have some fields here that are fun to work with or that do different things like maybe you want to tell people this person is streaming live where maybe this person is you know now available for hire you know or whatever it might be right so I could I can have this filled here now available for hire right and then I'm gonna save this collection and right now nobody is available for hire so what I'm gonna do is I'm just gonna put in some text and then I'm just going to say available hire and we'll make this like oh my gosh if I could spell and then we'll make this like a color so we'll make this green kind of match here so and then what we want to do is we want to go here we want to say conditions available to hire isn't one so now it disappears for everybody right so maybe we would like a dashboard where we could turn this on or we're you know whatever maybe it's a gated reusing member stack where people could kind of move this around maybe it's an internal tool right so the things that we need to live up data's app are we need the name and we need the item ID so those are like the basics right so here in my form I need to be able to get the name of this collection item and I need to be able to get the item ID so here's what I do I will delete these bills and then what I like to do is I like to come in here I'll delete this field as well and I like to put in an embed element so now I've got this and I just do input and you can do type equals text just to kind of show what this is right and then we could say value equals and then we're gonna pull this here we'll say name so it's a dynamic value and we'll say name equals name okay and then we'll close this and then we'll save and close and you see now I have an input here that has the name in it and then you know you could copy and paste this and you can make this one the item ID and we could call this one you know item ID for its name and then now we have name and an item ID the rest of these don't have that but this one does and then so what what you can do is what I typically do is I come in and change these from text to hidden I save and close those will hide them and so now they're not visible and we can say you know this submit will say marked as available so now that's what our user is presented with and then what I'll yeah used to get to really design this and make it really really really nice-looking I'm just going to you know do some quick cleanup here and maybe my submit button I want the width represent and so I'll Center this and then you can have some fun games here with what I like to do is go okay then now show me on my forum my success state and so what I'm going to do is get me a loading information and we're gonna use this to kind of give actually we'll step back from this for just a second so we'll say okay success and the success state and we'll mark this make this background green as well and we'll make this you know not quite so much padding so now there's our success there's normal and success and maybe we'll make we'll make this text white just to match okay so now we have this success and let's Jacob tour tickets are for normal so now we have mark is available to hire for each one of these people and we're just gonna save this and we're gonna publish it okay so once it's published here we'll jump straight over to do and we'll open up this page finally love it I can scroll down and I can see of Ben Parker mark as available to hire right so here and probably what I should say you can put filters in but I'm just gonna say you know Marcus available hired I'm gonna go ahead and push that button so success boom I've been marked available to hire okay and then what I can do is come over here and make a SAP and I can say web blow and we'll do this on form submission so save and continue and we'll say Google sheets app okay actually yeah that's the site we want okay then we'll say this is the project and then the form will be email form because that's what it was called I didn't rename it and then so this is submission and you can see it grabbed my item ID and the name of the item and I can continue here and then now I can update and I have based off this so I can say oh with web flow I can go ahead and update a live item I'll save and continue I go down here to my Google see Google sheet step site and then what I can do is I can toggle a switch based on this for submission so I can say okay this project let's go back to my team members post my item ID I need this so I'm gonna grab that from the submission and then I need the name that's required from submission we don't want it to be archived and we don't want to be a draft and then now available for hire yes this person is now available for hire so I'm gonna hit continue and then I'm going to send a test of web flow so that was sent to my flow and now if I come back here and refresh my page you'll notice that now Ben Parker is available to hire everybody isn't that all happened off of this this trigger so I'm gonna say this collection item minimum hi it oh just so it quits new lines here so I'm going to save this and publish okay so now with a simple form submission I was able to say that okay now bin Parker is available to hire I marked that as available to hire right so then we could do really cool things here we can say okay this is a bit button I only want to see this if available the hire is off so now you can't mark me as available to hire but you can see that I am available behind right so works real well we see that right and then I can add in another form that lets me to mark as not available to hire so I could toggle that switch back and forth with form submissions so I'm getting this applied functionality out of web flow using zapier instead of you know having to code a whole bunch of things that are super complicated to do this on form submission we're just changing that that value here right and so when I pull it up loading dot IO what I like to do is I have some JavaScript then I typically put in my page that refreshes the page whenever I will never I submit a form so let me show you how that works so I'm just going to view the dashboard grab this code real quick that I use so while that's loading I'm gonna go ahead and jump back in here and set my team member myself I'm gonna say I'm not available firing now let's save that so now this goes back to the way it was and so now you can see I can be marked as available to hire and then what I'm gonna do is just going to you I'm still trying to grab this code from the other side here real quick okay and so what I'm going to do is I'm going to make it so when I punch this button it refreshes the page and so the code that I use to do this look something like Project cynics okay it looks something like this so let's go in here into our about page we're going to go to the before body tag just paste this in so basically what we're saying is it's a web flow script so we're going to say is once submit we're gonna set a timeout and then we're gonna reload this page so save this and then what I like to do is I like to grab I'm going to grab this green value here I like to grab just a loading animation so you know maybe it's just you know an ellipse ellipses here and I'm just gonna make color one be my green actually I want these to be white I'll show you I like to do here I'll make all these wide and then make the background color green because that's the green that I'm using and we can turn the speed down so that it's not so crazy fast here then maybe we turn the size down just a little bit but then what I want to do is save this felt the Save Rate felt the save that's no good that's no bueno so let's see if we can download it as a gift yes free download okay so it's gonna let us download at least different one with a safe and so we're gonna grab this gif and then what we're gonna do is we're gonna throw this into the success state of the page so almost there it's still trying to download it so we're gonna download this okay so then what we're gonna do here is on my form I have the submit button and then what I'm gonna do is I'm going to jump back to the success state in its green instead of this text what I'm gonna do is I'm gonna put in an image and I'm gonna choose my image and since I'm streaming that's going to be extremely difficult and slow doot-doot-doot let me refresh the page let's see if this helps boom boom okay so jump here to my image assets there we go I'm gonna upload this ellipsis there we go okay so we run about we're gonna jump down here to this form we're gonna switch over to success state and then we're gonna connect this image to the gif we just got so I'm going to make this high 120 maybe we need that to be shorter and we need this image that one would style this differently but just to kind of give you the picture of what this looks like here so so now the success state looks like this and the normal form looks like this so success in fact I want to make this probably even a little shorter just so it matches [Music] 40 maybe that's it okay now where's good enough and then just want them to be able to see this here okay and so now if I switch back in my forum two classics that step to my normal state I'm gonna save this and I'm gonna republish I'll show you how this works and in fact what we want to do is on our collection list we want to only show people if they're now available for hire well actually we'll just start like this okay so we just published we're going to refresh and so since I went in and edited this I shouldn't see available hire anymore and I don't so I'm gonna finish this snap real quick and I want to turn it on so I have it up and running so okay that's one okay so now if I mark myself as available for hire you'll see now it shows this loading gif boomed page refreshes and it says oh available to hire I marked that it now shows it right and you could do even even more cool things with this so let's go back in here and look at me and my item and actually let's refresh this real quick since that's changed okay so we're gonna come in here the team members and take this I'm gonna uncheck myself again and save it perfect so now we have this list of what we could do is we can I'm going to on my collection list here I'm just going to make these stretch all the way and right here in this container I'm just going to drop in and never use columns but I'm going to use it here just to move quickly and I'm going to drop this into column one and then I'm gonna duplicate this that's a collection and I'm gonna drop it to column two so now we have them over here and then what we want to do is on this collection list we're gonna say the available the higher is off so we're only going to show people who aren't available for hire and on this side we're gonna filter and we're going to say if they're available higher is one which are the people who are available higher so no items found here and then you know items found here right so now when we publish this and then we reload this page now you'll see these people are available to hire these aren't if I mark this it's gonna go through success so it shows that state refresh is and now my name boost from this column to this column I'm now available to hire right and if I had put in another form over here on this collection I could punch a button create another SAP and toggle that button back and move me back to the left column she kind of get this app like functionality using web flow and zapier without having to actually write a bunch of code so just want to show you a little bit about what this looks like and what flowed when you're using item IDs and both you know Google sheets and you can see oh hey Google sheets - one flow that finally triggered and so let's go back over here sometimes it takes a while up we've got team members you can see hey my job title change customer support web blow customer support web flow so um so this is how you get the item ID so then you can use zapier and the key is when you're running your zaps once you create you you say I'm going to have a form submission and I'm going to you know create a live item so I'm gonna go back to my snaps here not have to find it but create a team member this is what we this is what we used earlier so once I once I create a live item now that item ID is available to me to use in any subsequent step of myself so I can put that in I posted this earlier but I'm going to share this again here just so you have it this is a video if you're watching this on YouTube or twitch or mixer this is a link to where you can do a video on my youtube channel where you can learn how to grab those out of my DS let's say you already have 100 items you're like okay well I need the item IDs for all 100 items you know it shows you how you can grab those and then you can punch those in and then any time you make a change it will live update so this is how the live update web flow items using Google sheets zapier and web flow so hopefully this helps and hopefully this was helpful to to people and to anybody who watches and if you have any questions feel free to post them in the comments and I'll do my best to respond when I can

Channel: Ben Parker

Views: 3,227

Keywords:

Id: tkD0UhNJElA

Length: 48min 2sec (2882 seconds)

Published: Tue Aug 20 2019