Building a Membership Site like Makerpad | Makerpad Workshop

hello is anybody there [Music] yes yes yes yes yes hello [Music] awesome we'll leave it a few minutes to let a few people get in if there's any questions there's a questions tab which would be easier try not to stop too much throughout the workshop because then just get to be a stop-start doesn't it so I trying batch questions a bit more [Music] yeah the video is available for will be available for members after um make pad so it all takes them I mean you got some editing to do and stuff but yeah it should be also I think you get the replay emailed not sure just check and I've got all my things up already [Music] who got in here some familiar people all right belong to me I started cuz it was the start for yes I'm going to be building a membership website like what make apart is amasing I'm not going to build it from scratch so this is of assuming that you've already created your web flow sites with member stack integrated so that's the assumption is that you have the UM your website set up your members that integration set up and like your own plans with the logger login sign up pages the reason I didn't do it now because you can build your website website however you want there's tons of courses tutorials out there and I'll make that that you can use to sort of help guide you through those member stock have really really good tutorials too so they can I mean they're the best place to go and learn how to integrate member stuff on your website so for this workshop we're just going to assume that's you have your site set up and then the stock is in integrated just going really going to separate screen [Music] let me share my screen so I've just downloaded Catalina I've gotta let some permissions hmm okay I think us right Casey my screen my breathless screen I'm just going to set up a separate recording just in case this one doesn't work because I'm worried about that new so I've got this I'm just going to do it just because upgraded I think it might not record which would be very annoying okay I think we are recording say about this just trying to make sure I know if this recording don't even know how I'm QuickTime I can't see if it this is actually recording okay so I am right okay right sorry just a quick question how long do you expect it to last it should be less than an hour definitely so we will start with how to create profiles on a membership site so the stuff that I use is web flow air table zapier and member stack and for sort of creating your profiles I'm usually where I'm using the as the actual example so you'll be able to see how we build it - so we have our collection CMS collection called users so this'll be sort of the slug of what that user page will be so is slash user slash ventas one example and you can change this to whatever you want you can have a profile of members whatever you want and then within this CMS collection you want to set up the the right run fields we've got things like the name the bio profile picture which is an image Twitter URL email all that sort of stuff there's a ton here which isn't relevant but this is a sort of setup that you'll be requiring and with those CMS items you want these to be you want these to be the same as your forms and fields in noma stack so here you'll see in the sign up you can add custom fields so you want to add these to make sure they serve line up with your CMS collection items and any in in these you can hide them from the profiles when you actually signed it in for example you don't see any here in like the actual account because they're all hidden so that's what you're gonna want you're gonna want to have the same things that you want to pass through your profile CMS collection to members back so why on location Twitter website cetera the same is true for your air table so you want to have a profile table in air table which has the bio profile picture etc etc etc the one thing I was mentioned or should mention is for the first field for first column you should have the ID which is the formula ID our formula type which has rip record underscore ID those brackets this generates basically a unique record ID that helps you when you're doing your zaps and automations it helps you like get air table to talk to air table and look up things and reference things and you'll see it a bunch when we go through some of the examples that's pretty important for air table otherwise yeah make sure everything's of lined up with the same the same headings and everything else to make it easier and first we're going to create our profile so the trigger that we use for this is when you get a new member so winning a new member of member stack that just comes through and then that will create a record in your profile stone so that creates a record here that just pulls in what I person did which was like the name email basically do you want to put in the profile full name and map that to the name field in air table and then the email and then also you get generated a member staff ID for the actual person so I put that in there as well and then there's obviously all you'll see all these fields are in our air table but they're not relevant for now then once you've done that the next step is create a live item in workflow so you're going to make sure you're connected to your your sites the collection that you've set up with those fields and type in and math up the email the name and then we don't want it is alive we don't want it as draft and then you've got to reap all that data back into our table so this is when you create a live item and web flow it generates an item ID and the item ID is the specific thing that like tells web flow this is the person oh this is the thing that this relates to so I always like to have this in air table and anywhere because when you pull it through with with some of things we'll do a bit later on that is a really easy way to link everything together basically essential so we update the record you look at the profile table you look at the record and you visit this is the search so use custom value and then pull in that item that record ID that we just talked about you put in this from our step two which is where you created that record you can put in the ID to find that exact record essentially and that man will go and you can add the webflow ID so that comes from that third step the creating the live item and then some reason I've got the members that idea here again which you will need but this basically means that in your in all three steps you've got you make any member stack set up your CMS item has the name email and then it has updated that in your air table here and then you update this air table with that item ID as well just mister formula for display and record ID in air table that is I just quickly it's basically record record and the school ID curly brackets let's not change that okay so now is on to the edit profiles so you'll see on here can you set yes so we have an edit profile page which just has a form block on webflow what you want to try and yeah form block all I want to do is have the different like text fields map to all the things that you want in your profile so essentially the the location we haven't got the profile picture the short bio anything else that you didn't get in the initial stage of name email essentially and then so the way you do that the way we do that anyway cuz there is a way in members tab to do yourself so an attribute to update member stack with this data which is ms - update but I didn't actually do it that way you have all these different types of fields that you want people to fill in and in if you see mine the dark all it pulls in what my data is holding about me and the way you do that is having these attributes so these are the names of those fields for main profile link so you have MS field is what this field will map to to update that field and this data is displaying about data so when you first set up when you first do you edit profile obviously there will be no data in it but if you set up these both attributes on each of them so you'll see this is NS field website this is Dennis field Twitter and most data Switzer's and then it will always display the thing back to your site so that's just like a good things that people know that there's stuff in their profile the other thing that we do in this form is include a HTML embed and what this is is there's an input and you get this from think member stack and show you what you can input here it's not it's just super simple there's like and the input is as a hidden input that just gets passed through and it's pulled so that the data gets pulled through with the form submission so then you'll be able to use it in your zapier triggers and things so here we've got our input type hidden' which is our members that members that ID so that will pull but pull through our members that ID if you ever need it you'll notice in our edit profile we don't have our email because we don't want people to change it on this I think that's like a limitation in member stack so you have the input and the states that email this name is the email in search of such as this is a hidden hidden field through the HTML embed itself essentially so this then if I find the right one if you go to edit profile that's all like the steps you'll see that forms a mission and it's in profile so when someone submits this form it pulls that through that's the trigger yeah so everything profile then you want that to find that profile you can search it by email because that you know will get pulled through so that email gets pulled through in the data ID email soon as you just saw that HTML embed pull that email through even though it's doesn't show on the form so those things aren't really key to learn and understand because then you can do a lot of other things with those so you search by email field in this profile table then once you've done that you want to update this record you an update them you want to map all the fields from that initial form to all the right fields here so the profile picture etc so all of those the record will be that record ID that we talked about yeah and that comes through when you found doing retinol the mer table um so that should be straightforward you update that record pull all the things through all the things that you would want to update just make sure everything is mapped yeah I'll post the embed codes Millie and so everything you want mapped you make sure you map it because even if it's not in your form submission some people might include something one day but updating something different another day so you want to make sure that all they're all linked and then this is where I even work date member and member stack so maybe I could leave this step out if I did that the way that members back tell you how to do it right update this member and member stamp again I just map all the fields to the right the right custom fields here and then I update that live item in web flow so that pulls all of that data then it looks at the users collection it looks at which item I'm trying to change so it pulls that webflow ID that we populated earlier here and this might you'll see different ones on here but musicians are my testing stuff so there might be different numbers here but this is the web flow ID you use that so it knows right I'm looking for this exact item and then you map all the things here to then pull everything through and update that live odds and to them on that profile that should show all your updated stuff again in that edit profile page it should also have the data fields that you've just done so that's our editing of a profile so you've got like new membership site create profiles everything profile super simple like starting off you've got profiles essentially on your sites the next Hart is posting to your profile so just close these before I get confused so when you're posting things to a profile posting things to my web flow membership sites like Chris's asked good question which is what's the driving behind the decision to do it in a web flow native form this is it being handled in the member stack overlay it allows me to bug pull this through style it however I want like pull it through into their table most importantly and it just doesn't translate well when I'm trimmin do the more complicated stuff which we're going onto now so that it's just it's like a consistent design thing and I'm pulling everything through but I mean I could be wrong that could be things that actually that makes it simpler but this is how we do it I think I think I made the right choice for a particular reason with some of our design stuff and and the complicated complicated stuff so when you're posting to your profile again you're going to need to look at the same sort of setup so you need to check that the check that you have a post collection we call it posts you can call it whatever you want and for this one we've made be the slug like just the pea I think probably time did that as well actually - that's probably where I go from and then again the collection feels the name tagline body image body image it'll that URL video link let me have a text field here called the text item ID which you'll see what that's used for shortly so then we also have a reference field here just a single reference field which we say sort of who you've got author or user whatever you want and just collect that connect that to the users Simas CMS collection it's essentially saying like from this post who is the person that this post belongs to or did this post and that's what we'll go through shortly so then we've got the air table posts table again we've got the record ID the name tagline body image URL video etc this tag you don't need to worry about this tag thing here we basically use it because we have posts as a general collection item and we have tutorials projects questions articles by multiple things within that post type since you're just saying this post type is a project so I'm going to show off that project and you'll notice the reference field here which is what we talked about before and then we've got this which is a lookup which just looks at this reference and then finds the webflow ID of that reference so it looks up the reference here and then looks up this and it pulls that in face of Pete seems simple but allows us to have this in this exact table so posting projects posting posts is the sort of same the same set up and immediate it's often the same set up so once you learn a few of these things once and you can replicate them it's very easy to see how they can use in different ways for more advanced looking things but essentially the same layout and flow is done the same way so again two posts something there's a form it is all the same fields main tag line URL it's also got again hey you better pull through this is our tag types and don't worry about that this is also the posters now this is the email tag but gets pulled through that either be mailed a to the gets pulled through so put that in here for you Chris and I don't think actually a lot of those parameters don't need to be in there Vanessa I think I've copied uh from somewhere and then realized you can do it really I simply like this one so yeah there's the same thing you have a form submissions when someone posts something you want to set up this which is your form submission in workflow as a trigger when that is submitted you need to find the records you need to find who the person was who posted it so we do this same thing and search by the field email and then that email got pulled through again as the search value to look before that we've got a filter here which you don't need is just all saying if someone managed to get through to that page and post something but they didn't have an email pulled through because they weren't pro member they didn't have a members that email entry then don't run this out collection be a problem because it's all closed off anyway and then this goes create a record in air table so we want to go to our projects table so this goes here and essentially just creates this grace this line tag line blah blah blah blah the normal stuff and then the reference again it pulls in that reference from this one finding that record it I'm just able to put up pull up back that hold ID and that's what we need for that step then you create the live item and web flow and we must probably see a pattern here of how you do that via air table and web flow together you want to put this in the collections Pope in their posts collections the posts collection sorry so here again we putting that in here let me talked about you rap over the tag lie and body etc etc and then not that the name sorry the one to look for he go this the who so where we've got who in that in the web flow reference field you remember that collection is the user collection because we have that lookup that looks up the person's web flow ID from their reference that can then just pull that through so it has that number and that just pulls out to directly so it knows that when I close something it just automatically adds my name into that reference field it doesn't work with doing the names and things like that so gets very messy if you're trying to reference fields with workflow and it'll just you know mess it up so then you want to update this record in our table because we want to add in want to add in the item ID for this post them so once you've created that live item add this ID so again we go to project table in whoops in here search user custom value using that record ID and then we just update it with that new item ID that we've just got from workflow by creating arts and basically in this step then I like to go and do this which is I mentioned that text out in ID before we want to have if creates its own item ID it's then mapped to air tables whose kept in that air table row but then we also want to put that back into web flow for use in like the next stage is really you want to always have like that data pull through when we're doing stuff more complicated so everything gets or one more step more complicated so having this item on its own item ID attached to it is a very useful thing to do so essentially you look you look it up by the item ID that you have which is it is there so it pulls it in but you can't access it through the CMS collection so but then that's explaining it well enough essentially if I have this is the challenge I created you'll see that there's an item ID here which gets created when you create your live item so that's how was active and pull it out but actually we can't access it easily in any HTML embeds or anything like that unless we have it as a field itself so we're using that - that last step to basically populate this again with the same number that is here which will hopefully be a bit more relevant in the next step so updates that live item and then we just have a private channel message that says some of those just posted a new project and that's sort of the posting mechanism of posting things creating new items and the site and saying that that belongs to this person and so that should be a fairly useful piece anyway because you can look about the different things creating this things and job board like job posts or things like that so the next one the next more another advanced like a more advanced thing is you may have seen so we have our companies use to start out as the example there's a few fields here but actually if you look at laughter - here you'll see is a few things add this tool to my profile get started now it takes you to their sides you can see users if they have a need it is all new but with their you put on comic video yeah this is you'll see there's wide you love it it's like leave a review so this is the exact same situation and saying flow as adults my profile so I don't never got this tour profile yes okay so hang on there yet so if I they live demo let's see if this works add towards my profile that should happen and then on here yeah okay so now it comes through - - is now on my profile so you can see how that could be useful in that if I go and recommend a user then I'll become like listed almost say not quite straight away but I've got bad internet to get listed then if you would leave a review on a company that gets like automatically added to your profile and things like that and we can talk about how it actually shows on your profile but that like is essentially tagged to what is your profile in air table in word flow through zapier so the way we do that is again having a CMS collection of the tools name etc come within that we've got the okay no sorry this is it other way around so we've got you know a collection item for the the tools that we use but in our user settings as long as showing we've got companies as a multi reference so I connect to that to that collection so we can show there's going to be more than one tool so let's see how we can put in all of those at once and this is where things get tricky and I didn't want to technical but as you can see is possible so if I show you my thing you'll see that there's actually several multi reference items for companies you can see if the tutorials for different times the different things on my list different people who have recommended me so you can see that how this could be used for multiple different ways to do multiple different things so we've got the multi reference here and then on this tools page there's two because it's like it shows once people logged in and when not so yeah this button is basically it's a form block again if see it's a full block you just got button in here and then the HTML embed so that has the email input that we know about we've got the look the user's full name just because I thought I'd pull it in anyway you've also got because this is a CMS page of this company we can put in fields here that is from our CMS collection so actually you can have the input name that input type hidden' value this tools name for example and then you name it something like tour name and then like we've done previously you've got the text item ID so we call that the tool item ID so that makes it easier to pull in okay I know that - - is like a series of numbers and letters but that's that item in workflow so I can then reference that on my profile and pull that through so then we do that in this way so in this fallen submission again this is the tall one you then go through and do what you should know now I guess which you just look at that profile look at this profile find out who that person is by the email look I'm pulled through as a hidden item and then just find that person then you want to create a new record in our table and this is our tools table so this one is a new one that we haven't seen yet this has let you use the name user email and we don't actually need these I don't think we've got the reference you know the tool name the tool item ID so like I told you about that's why we have the text item idea to can pull this through here so when we go through we pull through that the user's name the user's email but they're the hidden fields the reference again use that from finding the record and air table so that gets pulled in it's all names pull that in and then the tool item ID pulls in that text item ID but what you need here is the quotation marks before and after that CMS ID because otherwise that's not gonna roll up into what we need very soon so once you've created that record here you'll see this has the quotation marks already in there and because it gets pull string this way um then you want to find that Brett to find your record again do you want to find your email again find the sort of that line item in your maker profiles because when he founded the first time there was no separate record that had a relationship to it so there was there was your profile but it wasn't that too lighter and pulled in and then link to your profile so that's why it can't find it unless you find this again so he find it again it's basically saying okay I found that I found this and then you've created this item which has this reference and then okay now let me refresh basically and go on find it here so what you need to do here then is they just find the right one is you have this this is the this is your reference but what you've created in tools used with that reference that's referenced here and if you have allowed link to multiple records you'll be able to see that it will have a bunch of these and it just has my name because that's what we have visitors be off here but that's basically all of these items are all of these items all rolled up into that one cell so then what you want to do is have a rollup field so you look at the tools this field you want to roll up the tool item ID so from it pulls in lots of that reference then you want to look at you want to have all of these item IDs and you essentially want to put them all together so if you do you rate array unique values I'll put that in there as well just for there's a there's another one which is a raid join which I was doing for a while but then it stops you being able to have it basically slug it makes you have non unique ones but this one is just like so you just have unique ones even if I press dashed after twice it should only other show it once so this then basically rolls up all of those item IDs into one long text or look like that essentially croissants how do you display all the tools used on the individuals profile yeah we'll get to that after we've we've done this so the tools roll up does all this so essentially then it's saying right these are all of these tool item IDs belong to this person this record so that's why you find the record again and you have those fields you need these pick this field in air table with quotation marks and then you're gonna do a customer request this is where I guess like on a border of no code so you find the web flow API collections like list you're going to find this yourself I mean you just put in a like API dockworker calm slash collections this string of what looks like an item ID is actually the the ID here it's not this one it's the one for my users collection essentially so we want to look up you want to post something to those users so I'm gonna so I'm saying hey web flow on my on this collection oh yeah sorry make sure that the method is patch on this on this on this user collection look up the item and then put in my web for ID for my persons you're saying look up in the user collections look up then and then this data section is look the field I want updates this is feel the one update is called company so as we saw before it should be so it's called companies you can see there to call companies so yeah look at this and go to companies and then in square brackets you put in that rollup field so you can see once you've found the record again here you'll have this updated rollup fields which we just talked about which is all of these numbers and then you've got to put your authentication in which you've got the authorization you got to get a bearer token these are other things you need to look at web glow for with your number but have except a vision content types you're gonna have all these things which are things you wouldn't necessarily know but you've gotta look at look them up on web flow or you can think I'm in and then they've had slat instead so then once you've got those things we that's basically it that sent all of those item IDs to that collection and it's and it's basically like if it's it works we've got another thing here which so now I'm going a bit off piste and a bit like more advanced stuff so if you've seen on our profiles we have this number here which says 24 sort of shows fans this wall so you might see when I did the bowl up this is just a count account type which pulls in number of Records and the tools essentially which is just a sneaky way to then we've got a field in which just pulls in the account type so we can show those things but that's just like an extra thing that you don't need to do and then we have a product child message that says so so as added zapier to there there that's all slack so that's how you do multi reference fields with like with those and you can see that actually on what whether I'm naked pad we're do we do a bunch of these things where you have a simpler lunch submit a review again that's a form which you pull in like the tool name towards my D you have the hidden field email full name come through and then that's another table on their table that shows you those things and then we have another roll up that happens so it's all linked in the same way and that's how you basically can replicate those types of features and then quit after about how don't know how we basically show the people the different things on individuals profiles so this for example is a collection ID a collection list system that CMS page you can add a new collection this wrapper here and then this is the company's source so we're looking at the companies and this should be a filter on this I never looked at ax tools used this is looking at the company's flat for list so I'm just gonna see so I almost can't remember so yeah I can't some reason I can't figure out what it's happening on that school run insurance thing is because it's on this user if the automatically calls in like what is related to them and and this is a business connection this within like this is the reference field within my profile within my user collection so if we try and do their just try and like set up another one for example so if we go if we just did like other collection lists so yeah this is what I'm sorry um look like I didn't know what I was doing then so when you pull in a collection list within a CMS collection page it'll show you okay here are all the collections you have but actually here are the reference collections that you have in your CMS in that item so like we talked about we've got the companies which is the tools when we went through so when you click that it's only gonna show those things it's only to show the ones that are in your reference collection so that's how like each of those specific things are shown in these specific tabs and it's the same for tools that's just companies and it's only gonna show the ones that I'm connected to let's just have a look any other questions from anyone else on that's basically how you set up a membership site and like any of the things you see they're all done in the same way and it just might be a different way of connecting those pieces but it's essentially all about form submissions foods like puddings things up here looking them up and matching them on air table and then pass them back through to the site and that's how a lot of this stuff is done Jacob said will you be going through all of the details of the webhook so just creating the URL and the Barret of them know all worlds because they're all different and essentially I can copy paper the URL is going to be unique to everyone I'll put this in the chat just so everyone can sort of see it this will be - I'm looking at the that will be URL you'd want to use that's something not a URL but it's a web flow collection ID and then the web flow item ID so yeah I'll send that to so when you if you want to find out yours if you look up if you look at your they'll say here your page ID and that is your collection ID when you're on the like collection the user's template will be that and then this is the web flow item ID but again you want to do that with pulling in the collection I do you always be the same but you want put in the right gonna pull in this from previous steps this will be the data field will be this just copy this cross will be a table roller field your field that's the date of it and then the other stuff you've got to get from web flow is this your own Barrett oak than anything else be essentially that's how you do it that's how you create a membership site and pulls it pull those pull those things through back and forth if there's any more questions let me know now if not we can we can show it down [Music] all right no questions I'll learn but I'll go thanks for tuning in

Channel: Makerpad

Views: 1,114

Keywords:

Id: SdBsnGdxj9I

Length: 50min 59sec (3059 seconds)

Published: Tue Mar 10 2020