No code client dashboard using Webflow, Memberstack, Zapier, Airtable

hello hello can you guys hear me just give me a quick wave say hello just testing this out everything tells me you can hear me but you know never know unless I get a confirmation all right let's see it working all right that's awesome Eric yeah so we'll definitely start with web flow and members back and then air table and zapier and things like that or just kind of add on their cool stuff that we're going to be adding into the dashboard so that's awesome so I'm actually just gonna you know kick this off so here we go all right welcome everyone to automate all the things livestream I think number seven or eight not too sure anymore where we're at I know we had one last week that didn't go so well so that was not public so I'm still counting it so I think we're at seven so yeah if you're if you're in the chat let me know say hi I'm excited to have you here and I'm excited to show you what we can build with member stack web flow and an air table zapier and Google sheets as add-ons here so this is something I've been using myself I work as a customer success manager and a big part of my job is updating our clients on you know how their products are performing and things like that and I realized that I spend way too much time just updating every one and so I created this dashboard where everyone can kind of log in and see all their data once so that you need to reach out to me as much as I enjoy talking to all of them so we're gonna recreate part of that so this is giving me a client dashboard where you're gonna put behind a log in whatever you want and that log in is gonna be powered by member stack and web flow is gonna be our front-end and just our experience well let me let me put it up a little bit how's that is that better let me know if if the audio is better like this and I'll just make sure to speak into the mic that should be better actually let me know so kicking this off let me go into okay let me check let me try to fix that give me a sec here let me try to fix the audio here just give me a second all right so this should be better so I've just kind of reduced the suppression I have for background noises so let me know if the audio ever goes dark on you guys okay so and also while we're here say hi tell me who you are how you got here where you're interested in learning and I'll try to incorporate that as much as I can so what we're first gonna do is we have our you know our simple web flow website here oops my mouse there we go and what we want to add is just a client login right so we want to be able to give clients the opportunity to login and have some kind of hidden content what that hitting content is gonna look like is this right here this clients template right so we're gonna have tasks project contract assets things like that so I've taken the member stack you know client template and I've adjusted it a little bit to do some cool stuff with it so so our first goal is just going to be setting that up so going through the member stack onboarding which is great and then we're gonna you know do some cool stuff in the dashboard itself so we're gonna add an air table embed for tasks so imagine you're a freelancer and you've got tasks and you want to update your clients specifically on tasks that relate to them we're gonna do that and then you know show them their website their staging website directly from your dashboard which i think is cool as well add some contracts in there so that should take a little bit of time and then you know to the challenge here at the end is going to be creating a Google sheet behind that's gonna be when I say behind I mean it's gonna be kind of our back-end to our dashboard where every time you change some kind of value in that Google sheet it's gonna update in the dashboard so that's gonna be a little bit more of a challenge both you know getting that up and running so hopefully we get there as quickly as possible and I think that's good one of the cool things you can do with member stack through its integration with say peer unfortunately you can't do it air table we're gonna do it Google sheets and then if we have some time at the end which I doubt I did this cool thing where you can trigger chat BOTS directly from the dashboard if I don't have time I'll share how to do it in the notes of the video hey Matthew hey Duncan good to hear I'm I'm always a little stressed out because Duncan is is the founder member stack so I feel like if I mess up I'm I'm you know it's it's it's it's like peering eyes right it's stressful so okay let's get started here so very simple website we have in web flow just a landing page or home page login sign up and then we're what we're gonna hide is this clients template that's gonna be your dashboard so let's go through member stack so what I've done is I've taken the the client template that member stack provides adapted it to what I want but I still want to go through each step of the onboarding with you so kind of talking about what each step means and what it does so when you're building your own dashboard you'll kind of go through it as well so first step is hiding content so what we want to do here is define what areas of our website should be inaccessible to anyone who's not under specific tier but before we associate tiers and what's hidden we just defined the different hidden content right so by default the member stack template hides client area so if we come here it's gonna hide everything that's in this past client area so if I come here and I go to staging I don't have access because I'm not logged in but you understand the point slash client area so what we want to change this or add another one he is our CMS so we want to hide everything that's in this CMS and if we look at how the CMS is built we look at the slug here so it's slash clients slash client name so what we're gonna hide is slash anything that starts with slash client right so we're gonna add that as a hidden page whoops didn't copy there we go slash client starts with and then we redirect to access tonight so let's just make sure that that works correctly so I'm going to come here I'm going to try to access client one and that works oh it's because I don't have the I don't have the the Jason script setup so I'll do that now again I can see Duncan's peering eyes through the through the through the stream whenever I make a mistake so I don't have the header code so we're just gonna keep going oh actually I didn't publish in there so that's probably let me try to publish let's try to access that now I still have it it's probably because of the header so let's keep going through the signup and when we go to the header we'll test it out so we only want one membership so on the free tier and the reason we want just the free tier is because clients already paying us so we don't necessarily want them to like we don't have a subscription on top but if you do want some kind of client dashboard where there you're on a retainer so I've seen that happen as well let's say someone pays you two thousand dollars a month or whatever and that's your standard retainer you can actually integrate the payment through member stack and that way they handle both the subscription and the payment in this case we're not gonna put any payment in place because this is more of a hey I freelance on the side and I want to give you access to the dashboard so that's really the use case we're focused on so we're just gonna create a free tier called client membership and then you have a members-only content right so I've associated this hidden content with this membership so whenever someone accesses this client membership or actually what we're gonna do is at the end we're not gonna make the sign up page public we're only gonna allow certain members to come in and we're gonna sign them up sign up for them as freelancers so we're gonna give them access to client area and what we want to do is actually page after sign up it doesn't really matter because we're gonna sign up user we're gonna assign users ourselves so this doesn't really matter and then that's all good save and close yeah I don't know if it's user testing it's more of like I think half the people come here to learn and the other half probably come to just a see me sweat so I don't know you can you can tell me which group you're in alright so usually when you yeah so I'm just gonna skip this stuff so so far we've created a membership we've hidden some content and then we're gonna have our signup form so just this is gonna be our signup page you'll see we have first name last name email password and then we have in our signup first name last name then you have launched budget and spend which are variables that are kind of in members tax template because they go into the CMS so if we go into the CMS here you'll see that there's starting budget total spend that kind of information and launch date as well but these are hidden from users right so hit hide from profiles so that's all good to go don't play and change anything and how you set up this signup page is that you copy this MS signup attribute right so you give it the attribute MS signup value equal true so if you go to the signup page come here you go to the form settings MS signup equal true so that's how member Shak recognizes that this is our signup page or signup form I should say and you can move this anywhere you can move into a modal you can do whatever you want and what we're doing is we're not including it on our homepage and what I've been doing with this for my clients is essentially when I get a client I sign up for them and then I send them a paid send them the login page and ask them to reset their password so where are we here we go okay so login similar you know functionality we just need to put the MS login and value equal true so coming back here going through remember stack form settings let set that in there and ice login true save let's publish and then let's test it out so am I going too fast oh these are not found okay could it change the URL go here what's the URL slash oh it's good old home actually let me just change that settings this is going to be our login page save publish whenever I see that read I get really you know get really stressed out hopefully this works login oops wrong site let's go right test login page all right whoo-hoo stress that cool so we have our sign up we have our login we're kind of slowly going through this checklist so remember profiles that's actually really neat functionality is the ability for users to manage themselves and you know I want my clients to manage myself from what my users to manage themselves and you know the same functionality essentially this is gonna be whenever a user clicks on this they're gonna see their their remember attributes so that means what plan they're on their email reset password is all there so all you need to do is in the attribute again MS profile equal true so that's gonna be in our dashboard top here there's a little text block and there's a span come here MS data oops text block here we go or is it on the whole block where is that MS profile nope on the drop down here that's weird when I just set this 2ms profile block I'll just set this as Emma's profile go true there we go let's try that and I'm sure I've just done a great mistake Duncan let me know if that was the case so moving through the checklist okay so last thing we kind of need to do here is actually install the header code and this should you know kind of wrap this up should wrap up our functionality here so let's go ahead and test this out so I'm just gonna copy paste the code I'm gonna go into dashboard oh that's awesome can let me know if there's anything you know specific that you want to learn from this with just updating here we're setting up the member stack functionality we're almost at the end of the checklist and we're just kind of using their template so project settings custom code and then I'm just gonna replace that and I'm gonna remove this just chat stuff that comes remember stack let's do that and now if all went well let's deploy if it's not it's on you men it's not working right it's on you okay so a few things we can kind of let's just all done I test alright so that really is the you know the the high-level functionality so let's just go through the motions and see how this would work right so I'm gonna go into the first thing I want to check is that if I go into you know hidden places where I'm not logged in I shouldn't have access right so theoretically we have you know Matt is a specific page that we shouldn't have access to we shouldn't have anyone actually shouldn't have anyone in client areas you should have access to that and we should have access to client templates so let me just make sure that that's the case see I still have access to this okay there we go just need a hard refresh so if I come to my home page client login I should be able to log in and I don't have any signup functionality on this page so can we're using web flow and on top of it we've built we've added member stack so we've gone through this whole checklist to hide certain content so yeah so then I think one thing we're gonna need to do is member specific pages okay yeah okay great okay so this is already active so that's great and then this folder will contain on hide all of your members pages so here we need to set up can we add a new one let's put this here okay so we need to hide slash coop let's where's that slug here it is there you go just slash clients so come here such clients and access denied link to a member server okay then set each members unique click okay that's great the to your site so member page I think this is just like a specific page okay I think we're good to go here okay so let's check this out we have members so let's sign up a few members and see what happens in the backend okay so I'm going to go to my signup page like that signup can assign myself up to my own thing let me know if I'm going too fast too slow I'm trying to get through the membership stuff relatively quickly so we can get to you know a little more of the the fun stuff in the backend so like that I agree so it brings me to this client area welcome and then in the back a refresh here I should have a member which is myself that's all good and then we want to specify a member page right so when we think about this if you're a freelancer you know you sign up for that user or whatever you want to do and you're gonna create a specific CMS page that is theirs now if you have very unique clients it can be a specific page itself right so you know if you want to create something super super unique for each one of your clients you can link them to whatever page you want as long as it's a hidden page but we're gonna do is create a template that is good for a lot of our clients that we just kind of personalized based on some services if that makes sense does it let me know if that makes sense so essentially we are gonna link them to a CMS specific page so we currently have two so I just want to show you the functionality here loads so let's say client 1 let's call that client 1 there you go so I'm gonna say you know 8 kornblatt at gmail a write green is good and so in the future if I let me go incognito mode I come here how is the sound by the way I feel like it's a little low is that still the case let me know I go into client login I put my count like that and then I'm redirected to my dashboard okay so it's C you see here client 1 so you can imagine you can have I have I think 20 or 30 of these depending on the number of clients or whatever so we're gonna be redirecting those clients to this page or that specific client so every time you have a new client you come to your dashboard here and you associate that climb to their specific page well that's a CMS page or anything else okay so we've got a so we did login registration hide CMS in member stack add member slash clients so really if you're just here for like the freelance stuff how do I build a dashboard that or how do I do the login that's pretty much it and we did it under twenty minutes and I suck at this so you can probably do this in ten minutes which is great just wondering okay so I even have like my profile here that I can edit and all that good stuff so MS profile work properly membership logout I can do all that good stuff cool so under 20 minutes Congrats to the member stack team for for making a product that you know like I can build in under 20 minutes but now we get to the more fun stuff what I think is more fun so now thinking about like okay I have twenty thirty clients I'm a freelancer how do I show them their information they need from their dashboard so we're gonna be using like a mix of web flow CMS and my favorite tools like area table to show them how this works so this should be a little better hopefully I've just moved the volume up okay so the first thing we're gonna do is if I go look at my dashboard what it looks like today it looks like this now I defaults to let me just do this settings tasks so one thing about web flow is you whatever you publish on if you have this tabbed menu or whatever it'll default to that which is kind of weird but something you need to know default to tasks so the first thing like I've used this person what's great is we're gonna create a way of embedding the tasks that we're working up for that specific client using air table views so you know this is something that's really cool where let's say you have a project management tool whether that's asana or air table or Trello you can embed a view of the tasks that you're working on for that specific client in their dashboard in this case I'm going to use air table because I'm an air table fanboy and it has the views functionality lets me filter for that specific client create an embed URL and then embed that into web flow which is great so let's go ahead and do that I'm going to open up air table I can't move too much get stuck in line I might be I have a lot of the wrong air table account here sorry for going through this still a lot of air tables or bases they should set so we're gonna use tasks simple so our table you if you're familiar let me know if you're familiar with air table and I'll know how to quickly it can go here but usually you have your grid very simple stuff very much like Google sheets and what I've done is I've created what say a site or client right here right and then we're gonna call this clients and so each client has a set of tasks yeah let me figure that out is this better Oh how's that that should be better how's that testing one two three too loud you're gonna answer me in like 20 seconds so okay I can my software telling me it's it's pretty loud now so I think we should be good okay so um okay I think I think we should be better now I'm seeing it as like max volume right now so okay we're in air table and we've essentially have these tasks that we associate to certain clients I'm actually gonna call them client one two three that way we kind of map it to our clients in webflow so I have a certain amount of tasks that are for client 1 a certain amount for clients oh ok let mean we have this delay so hopefully it's not too loud anymore I put it down a little bit all right just a little bit there yeah you can always lower it you don't necessarily can put it up all the way so we're gonna live with this now this is where it's at so level 2 here cool so we have certain tasks for each client right and what you can do an air table which is really cool is use the Kanban view so we have backlog doing done let's move a few to done and what we want to create is a specific view that is for every single one of our clients so I'm going to do it with client one and that'll kind of give you an example of what's possible so let's say I filter where client contains one so it's filtering on my client on that specific client and then I'm going to save this I'm going to create a can bend and this is gonna be client one can been and we're gonna buy status there we go so we're gonna filter do that again we're client contains one so this is our filtering for that specific client and then what's great is we can create an embed right so we're creating this embed functionality and what we want is to embed this view into our air table into our dashboard on member sack that way each client gets a kanban of their specific view right so they can see their tasks where you're at with their tasks so let's go ahead and do that so I come here and go into settings and we're just gonna I embed this right here just copy paste that over and so we're just gonna copy paste this one example and then I'll show you how to make it variable for each one of the clients save and close and then okay so we have this little this little issue with the HTML embed where it just takes up a little bit of space I have some style in place um that is div class equal i frame holder / div like that let's do that and okay and then we have our embed now the challenge right now is that there's no variable in play here so every one of our clients theoretically when they would sign up would would see the tasks of client one so we want to add some specificity here or a variable that we can kind of add to this embed for that specific client um Duncan if you ever want to learn air table I've this this class called the essential guide to air table which is I've heard is really good it's it's in the comments so a little bit of self-promotion there what we want to do is essentially if we look at this code right here there's this little slash embed which is specific to that view so what we want to do is make this a field in our CMS and for each client we associate that client to a specific view and we input it into the air table CMS item so that's a lot of big words to say we're gonna do a following so I come here into my clients I go to settings and I'm gonna add a field that is a little bit of plain text that is the air table area table I'll call it view ID how about that let's do that save now let's go to client one to go specific client and then we're just gonna take this right here and honestly you could take the whole thing as well does really matter I just I know that this is what changes from one view to another so let's save that and then back here we're gonna instead of this at field table view ID let's save and close and that didn't work why did that not work oh it's good I'm on client 3 it's not supposed to work we don't have a venue for that clients actually two things so we were actually looking at client 3 and if we look at client 1 fingers crossed this works and it does so yeah and that gives us the specific client 1 tasks and if I'm client 3 I see an error because I haven't set that up so I'll sell all put it in the chat just Google the essential guide to err table on udemy and use code youtube' to to get it at the cheapest price available so that's the latest code I'll put it in the comments after the YouTube video but yeah essentially got to area table YouTube - all in caps YouTube all in caps with a - after and that will give you the cheapest available price yeah excited let me know what you think of the class awesome so if we wanted to do client 3 what we do here we come back here we create a new Kanban same thing we filter where client contains 3 we don't but yeah we have three ok great we save that and then same thing create a shareable link just gonna take this right here cuz I know that's what it is or I hope that's what it is this was validate I say Chia perfect so like that client 3 our table view ID save come back here and if all went well we can see the tasks for client 3 so that was air table embed so did that make sense is there any questions around you can really embed anything from air tables whether that's a calendar Kanban view grid view really really cool functionality if you have anything that's specific to a client coming from air table you can net it in so you can see it right away so that's really cool ok so where were we sorry yeah staging website okay so you know if your web developer freelancer this is a coming from Duncan from from the remember sack template it's really cool if I just move to you'll see what I mean you can actually put an embed of the website you're building right so let's just go into here I go into project and if we look at this this is the website that I'm currently building for instance for this client yeah I'm Aaron Carly that's me I built that class like ten months ago so I'm not as good behind the camera I don't think I am but the class people people like it so let me know what you think yeah so so yeah what we want to do is change this embed write to something else and so essentially how this works is is just like a it's a little embed that comes with the the template and we can really put what we want here so I have this thing called a useless web where we can find you know take me to a useless web site so this is just a useless website we're gonna put it as the example for that client so let's do that let's just go into a mouse actually while my mouse is acting up let me so Barry I altima like the question is what about e-commerce will customers be able to track orders or see previous orders it depends like what level of e-commerce you're working with if it ultimately ends up in air table as like a tracking mechanism you can always embed it now if you're talking like you have thousands of orders and you want to be able to automate like returns I wouldn't recommend member stack plus air table so I wouldn't this is more of like freelancer I have a few you know 10 20 clients and I want to give them the ability to view their stuff there and if you have a small ecommerce you can definitely do but they're definitely better tools like Shopify and and web flow e-commerce to manage those kinds of things you know it's a great Matthew asks can we automate the creation of the board when a client gets signed up you know no not not to my knowledge I wish you could write so one thing that's really frustrating is there's no way in zapier to create a view and I don't think they have it in their API either last time I checked their API is quite limited now when I think about this use case write in a specific like the why the why I use tasks as an example is you have to go in and create the tasks anyway and so in that case like even if you could automate the copy pasting of the view itself into members into the CMS you're doing manual work there anyway now I don't know a way to automate the creation of of you if you do I'd love to see it and I'd love to do a live stream on it because I do think that would be amazing so opening it up to anyone else who's here if you know how to automate the creation of a specific view and then pulling it back into the CMS that would be the web flow CMS that would be awesome so my mouse is back yeah so similar idea here is if we change this right here it's gonna create another embed so let's just publish this and see if it works correctly I come here alright project some reason it's still giving me let's see can't polish this again yeah so if it's if it's small ecommerce and you have a way of linking it to air table well that's manually or through zapier or even if you're using like a like Google sheets or whatever you can probably do this now is this the best okay I'm just answering the question from Barry like is this the best stack for you web flow plus member stack probably not I feel like a Shopify or even web flow ecommerce is probably built specifically for this right having that ability to view orders so I wouldn't necessarily say that this build is is the perfect one for that client one here okay this doesn't seem to be working at all I'm not sure why I was working yesterday so I might be on a website that I can't iframe so you know what I think we can we're 40 minutes in I think I'd rather skip the embed of a specific website if that's okay if anyone no one protests it's very similar to what we just did with the air table embed where you just change the URL you make it into CMS variable and just input it into that embed I didn't realize where I was doing this yesterday that it's exactly the same thing so so the air table API or zapier air table it's quite limited which and you know when I'll show you in a minute about the Google sheet back end is that the the Google sheet is easier connection is much stronger because they have updates unchanged but yeah the the I wish the API and air table and Xavier were little or built out you know one example is what you mentioned Matthew around creating views automatically for each one of our clients so so yeah yeah Barry give it a try I mean they've got a they've got a pretty is a pure integration so go for it let me know how it goes yeah okay let's let's just continue here I'm getting distracted by the chat which is great I love the fact that you guys are commenting and and letting me know what you want me to build so let's go into contracts right so we want the ability to specify like just show that clients contracts right and how this is built is to CMS interactions right so let's go into here and you'll notice that I have two contracts and it is a CMS collection right so and how what collection this is is its documents right and you can see that here I have the contracts for client one and then I've put client here and I put client one I can put client one or client three and so this is so this right here so if I look at the settings here this is a CMAs like reference right so we're referencing the client CMS for each contract so we want to do here let's say we have this document is client one and this document is client three save those changes what we'd love is that we only see clients one contract here and then if we go to client three we only want to see the second contract so how we do that really simply is by filtering so we want to not limit items we want to create a filter and then we want client client equals current client right so well that does is that it looks which client were on looks up their contract and then pulls up the right contract for that client so if I publish that come back here refresh and I have one contract that's here and then if I went into client three which I can't because I'm not logged in at client three I would see that contract specifically does that make sense and while I ask that I'm just gonna drink some water because so relatively simple what we did is we have one CMS documents with a CMS reference to a client and what we do is we in our template see in this collection page we put that whole CMS but then just filter on current client because they're linked through that reference you can do that with assets you can really do that with any kind of product now a challenge here of like if you want to automate this where you have your contracts in air table and then you want to send them over to web flow that actually might be a challenge for two reasons one is that the link between air table and web flow in zapier is only on row creation and not on row update and when you think of how we get clients usually if you have them an air table you have a certain row before you get a contract so if you were to put your contract in there it wouldn't necessarily update you wouldn't update in web flow because the creation and the addition of the contract are at two different times so this is gonna be a manual step but you know if you got a new client one manual step is may be worth it and then the second challenge even if it was on row creation not even sure that you can pass a document from air table to web flow via zapier so I know that there's some issues if anyone in the chat has tried that I haven't and well the last time I tried it didn't work so maybe that's been an update but usually transferring files by as a peer is a little bit of a challenge oh yeah you can definitely link to a PDF if you have it hosted somewhere but the challenge is like the CMS item in web flow is a drag and drop so if you have it hosted somewhere you can definitely do it and then just link to that but you still have a manual step of putting it somewhere right so ultimately you know you gotta you gotta put it somewhere man gotta put it somewhere so let's see ok ad contracts okay now we're gonna we're gonna do I would say the risky part over this live stream I'm like 50/50 on whether this is gonna work so essentially what we want to do here is a Google sheet that controls all of our dashboards so let's say I've got like 10 clients and each one of them has a spend a budget you know some data and instead of like clicking on to client one client 3 and updating their total span or their launch date or whatever data I have in my back-end I want to have like a Google sheet where I can just go and update the data there and it'll automatically update web flows CMS so that's what we're gonna try to do why it's a little risky is that there's two parts to this one is is getting all of your data into a Google sheet which is an easy and then the second one is we're gonna use zapier the trigger is gonna be anytime I update something in Google sheets please update it in the web flow CMS item and that update like triggering zaps on update is always a little finicky so we're gonna try to do this no problem it worked yesterday so I'm gonna try to rebuild it and see how we go so so just answering before like I'm jumping from the questions to the current thing so the challenge is like if you upload the file into the contract into the web flow assets or whatever like you still need to do that manual step and usually you have that data in a table the idea was to pass it along automatically but there's a challenge there so yes I applaud all the videos to YouTube including past streams so I think this is seven always a mix of web flow air table different things there referral marketing one a couple weeks ago that was really cool so client dashboard from Google sheets right here awesome so we want to create a Google sheet where we have a bunch of data and we want to be able to change a certain cell and update our CMS item in web flow so this one let's say this is client three now and you know there's a sink there's ten thousand here ten thousand there what I'd love is if I write twelve thousand here it automatically updates the spend here so yeah let's try to do that there's a few steps here so I'm just gonna show you the last the the zap zip zap I don't know that we're going to create let's see that oh man just to meet let me login here give me a sec sorry about this usually I have this up and running okay we're almost there okay we're back all right so my zaps alright so what we want to do is new so I don't know how familiar everyone is with zapier essentially zapier is glue for your SAS applications your applications in the cloud something happens somewhere and then we update data somewhere else Napier is what you know waits until something happens and then updates the data somewhere else so we think of that for what we're doing here is anything some anytime something changes in this Google sheet we want to go so any time something changes in this Google sheet we want to go to web flow and update a specific CMS item with what's changed so this is new or updated spreadsheet row in Google sheets that's gonna be our trigger our action is going to be update item in web flow so we're gonna like I think the best way of doing this is going through the challenges here and then trying to figure out how we fix them so because there's gonna be problems it's a tough one so essentially this is relatively easy what we want to do is whenever something changes we take all the data in the row and send it to web flow so I'll give you an example here I have this row right here which I changed yesterday to $10,000 so it says column D is 10,000 21,000 client 2 and then this CMS ID right and then we update an item in web flow so choose app is web flow update item account I logged in now the challenge here the first challenge we're gonna hit is okay I know the site I know what collection but I need the CMS ID now web flow makes it crazy difficult to get this CMS ID if I go into web flow unless someone has a good way of finding it maybe it's right here is that it right there oh it's right here okay so I had this whole thing set up where we were gonna go into postman and do an API call to figure out every item in the collection but I think it's right here so yes it is so let me just validate this yeah okay so scratch that it's relatively easy so if you go into a specific CMS ID or a CMS and you go to item ID on in your URL I don't know if you guys can see this it allows it it's right in the URL so if I want to find a specific CMS item we need to have is in our first column the CMS ID of that item that we want to update and where we find it is in the URL or what you can do is download postman ping the API for for your site and get all the CMS's or CMS collections you have and then ping that specific one that's what we were supposed to do but it's right here yeah that makes so much sense Matthew to store it as a hidden field and member sack right because your yeah that makes that makes a lot of sense well I was super impressed with myself for downloading postman yesterday and getting this all up and running but this is way easier so let's just go ahead and we take take this item ID which is our client one I'm gonna put it here now why is it the same one here that's weird client one client - so does it not change if I forget if I save and then go client one doesn't seem to be giving me the right ones because giving me all of the client IDs so this is page ID let me just check with postman this is collection so this should give me so it's so this is our C ID for client 3 client 3 yeah that's the one let me check the other one okay this one's now caught called client 1 so let's just name these appropriately so that's our CMS ID oh okay that makes a lot of sense and then I got it here I'm just um you don't Mathew I'm just I'm just trying to show off the fact that I did all this work yesterday you know so yeah that makes a lot of sense so let's actually just go that way so if I look at client 1 and then go into the CMS there we go this is this right here we copy paste that put into our client dashboard okay and then this is client three presses client one oh wait my view which one am i viewing right so client one oh but it's here - then I don't need to go to the CMS I can just go here okay this is client three and then one thing initially that you have to do is kind of copy paste the data manually if you're going down this route if you're creating CMS items automatically through some kind of form or through row creation you could then send them to Google sheets which is all good but since we're doing this kind of ad hoc you do have to first manually copy your current settings I'm actually gonna turn off the zap while we're doing this because everyone everything I'm everything I'm doing right now is an update for say peer so let's just go into our two CMS to get that data so client one starting budget is 1500 well that's total spend okay so we've put our CMS ID here name and you could really put any variables that you want here as long as you're able to map them to web flow if you want them to change when you change something here so let's come here let's let's getting some some more samples okay let's see what changed okay so let's let's try to do this let's put spend to twelve thousand here this should be a change when it's saved so that should be a change let's try to get more samples here okay twelve thousand so we see it right here every time I do update on Google she changed I get a little stressed out because it's very very finicky but I think this should be okay so we're gonna take this as our data and then what we want is step two to update data customize item their yoke update data in web flow so I've got my website which is client dashboard collection which is clients this one right here and then CMS ID comes from step one so I'm gonna remove this just to show you it comes from step one CMS ID and then we it will be Martin it will be in the the YouTube channel so I did second this is done it's on YouTube so you can watch it tonight later over the weekend whenever you want okay and so essentially what we're doing here is we're then re inputting the variables the mapping of the variables that we want to change right so starting budget we want to get it from step one which is the road that just changed so we want this variable right here with this data point and then total spend name and that's why I have name coming from because it's a required field in web flow we have to map it to something in that every required field has to be in your Google sheets because zapier won't run it unless it has all of the required fields from web flow so even if you're never gonna change that client's name it still has to be in your Google sheet so every single required field item or field in CMS in your web flow CMS has to be mirrored in your Google sheet so just the tip I learned that the hard way yesterday so continue let's test this out so essentially all we want is that so we want to retest when I see what the Oh No CMS item not found okay let's try that again so we're doing this one and this one is client one and then if I go into client one whoops and then take this right here okay I must have pasted it wrong somehow it seems to have changed so let's just try that again let's refresh let's get that's right here okay let's dress that about this let's see fifty-fifty okay and then so what we actually changed out is the CMS ID hopefully let's continue continue okay that seemed to have change let's just for all right not that that matters let's try that okay yeah all right oh I think I have the wrong one second does that make sense customized item so did it work is what I'm wondering so if I go to I'm just gonna refresh as I've been published yes I think it has so I might have to remap them so I'm 19 minutes ago so I definitely did let's just check if it updated though all right 12,000 it did so even if he updated the the fields they weren't required so I did add air table view ID so probably that was in caught and Xavier but it did update the total spend for client one right so client one 12,000 and it updated it here now word word of caution here I wouldn't go gung-ho on you know just changing things here and hoping the update in web flow what I recommend is having a column that is like ready to update that you change when you want to update the whole row so what you do is instead here your trigger column should be one of the rows and one of the rows should be please update now and you change that when you're ready for the data to update and it'll change it'll trigger for each row where you've changed that value so if it's five columns you just you know go yes yes yes yes yes or change it to anything else and then it'll run for those five columns I don't do it live because the trigger is not instantaneous so I don't want to make you guys wait but that is how you would do it so essentially in the future like if you have ten clients and you're getting your spend data from whatever from QuickBooks stripe whatever you can just update the total spend or just from your billing I guess from the hours you've spent working for that client you can just update it here and yeah you're kind of good to go so we didn't do this we didn't need to do this which is awesome we created this app yeah so that's what I wanted to show you today so you know just kind of taking a minute here to check out what we did we went from a website that had no login to a dashboard right so we have our tasks we added our tasks from air table through the embed and then we skip the projects that we went directly to contract so we filtered not filtered but we're showing each client their specific contract which we did through the web flow CMS and the reference field and then we created this very simple back-end if you will for updating everything in web flow using zapier and Google sheets so did I miss anything and and yeah we did member stack so member sack is working its able embed there we go yeah that's that's it for today I'm gonna stay on for a couple minutes if anyone has any questions or thoughts I'd love to know what we can do better if you have any ideas of what I should do next week now is a great time yeah I'll just put in like you can follow me I guess on Twitter that's my twitter handle and yeah I'll put a bunch of I read a newsletter every week on automation you know cool so thanks for joining and hopefully you had fun and I'm just going to stay in silence here for a couple of minutes wait for your questions see I'm not sure if like there's a delay or there are no questions I'm pretty sure there's a delay but there might be no questions or thoughts or comment or whatever no one gets to the end of the livestream anyway Thank You Duncan I appreciate it this was fun we'll do it we'll do some more advanced stuff soon enough thanks Matthew I feel like you're almost like better at me than this so I'd love to see what you're building I'd love to see one of your builds and then use it on one of the live streams yeah so I'm uh I'm an ocean user I don't like it for any of the automation stuff because they have no API they have no external integrations I mainly use it for the stuff right so I use notion for public facing roadmap for every one of the live streams I you know I don't know if notion like I think people I don't know how they're gonna do it I think people keep you keep thinking notion will make a great back-end for different stuff I'm not sure because of how they're structured I'm waiting for to see like I love notion for documentation internally so I take all my notes in notion every client meeting every meeting I have is in notion and then I reuse it and create kind of documentation for a lot of decisions that we make and it's really simple in that way now I know a few people who really like it for for putting data in there as well but I don't know how they're gonna make it whether they're gonna go down the route of like we're an air table competitor or are we a asana or Trello competitor or are we in Evernote replacement I'm not sure I'm curious to see so hopefully they'll fix their their search first and then work on their API and zip your app they've been talking about it for a while so I'm curious to see alright guys I have both of you on Twitter so let's just let's just move the conversation there thanks for joining I'll see you same time next week and until then automate all the things and I'll see you soon Cheers

Channel: Automate All the Things

Views: 15,294

Rating: 4.9312716 out of 5

Keywords: zapier, automation, webflow, airtable, memberstack, no code, dashboard, client portal, customer portal webflow, client portal webflow

Id: ZL68eunsRlQ

Length: 72min 29sec (4349 seconds)

Published: Wed Oct 30 2019