The whole build in 10 minutes

Welcome to Memberstack in this video we’re going to build a fully functional membership site with free and paid accounts in about 10 minutes I’ll walk you through step by step so if you’d like to follow along you’re going to need a new Webflow project and ideally something you want to gate access to here I have a review mockup generator that I created I want to charge people who want to access this mockup generator so yeah first thing we need to create our app in Memberstack so I’m going to call this review generator select web

flow and because I already have a project I’m going to just start without a template and create my application first thing we need to do is grab this install code and add it in the custom code section in Webflow so I’ll go to my project go to site settings custom code and paste it right here at the top of the header section save it publish it once this is published Memberstack is installed if you’re unable to add the code here send

an email to welcom Memberstack.com and we’ll add the code for you all right once that’s done we’ll go back over here and we’ll test to make sure that the code is working so yes we’re good to go there now we can add a signup form what’s great here is that Webflow gives us total design control we can start from any of these projects which I’ll start from this one and once I copy and paste it into Webflow I’ll be able to change the

design this form that I’m adding now has social login email and password but we also have password list sign up and other social off providers if you want to use those all right so to add this I’m going to select the element that I want to place this in and then command V and Bam now I have a fully functional signup form on my website I’m going to publish these changes now that’s test it to make sure everything’s

working properly we’ll enter a name email and a password and sign up okay so I can tell you everything is working we haven’t set up any redirects yet so Memberstack didn’t actually know where to send the user we’re going to set that up in a future step but first back here in Memberstack we have our first member so let’s take a moment to celebrate this is a huge milestone we now have functional user logins and signups on our site and we just need to

build up from this Foundation the next thing is we’re going to add a redirect but you know before we do that I want to point out you find you need help or you have questions you have a lot of options you can ask our AI helpbot which is trained on Memberstack can write code and do all kinds of crazy stuff we have our help center we have a community and you can message support directly we also have a slack group with thousands of people plus the Memberstack team everybody standing by to help you with your project with that said let’s

continue on with our tutorial we’re going to add a redirect so that the next person who signs up is going to land on a welcome page and when they log in we’ll take them to let’s say an upgrade page cool so this is anytime somebody signs up without any paid plans basically our free members and then we’ll go over to Webflow and create our welcome page okay here we go welcome and let’s add some content we’ll

say welcome friend and let’s customize this so if we know the person’s first name it will be displayed here so I’m going to type data Ms member equals first name just like that add publish if you’re wondering how where did I get that attribute of data Ms member first name let me show you here on the members page if I go to custom Fields you can see I already have a custom field of

data Ms member first name and that corresponds with this column right here I can add other ones as well so later I’ll want to collect the title so now we have a title column and I can use the attribute data Ms member equals title tile to display that in my UI okay let’s go test our site again let’s see if our redirect is working we’ll say Duncan 2 we’ll use my email and pick a new

password sign up and there we go as you can see we were redirected to the welcome page and the UI is personalized to me if we go back into Memberstack we’ll see that we have this new member here at the top so now what if we want to charge access and then gate access to the mockup generator on our site here’s how we do it we’re going to create some plans but first let’s go find a UI I find in general it’s better to create the UI that you

want and then to find the Memberstack features that are going to serve it so I’ve got this homepage here we’ll put our pricing table there by going to components pricing and then pick from any of these UI I could build my own from scratch but it’s gosh it’s just so much easier to start from one of these so same thing click and paste there we go now uh anybody who’s going to join for free I’m going to just send them to

the signup page and then anybody who is going to sign up for a paid account same thing send them to the signup page we need to create our plans next our plans in Memberstack so we’ll go to the plans page and I’m going to treat my default settings as my free plan so that anybody who joins without paying gets taken to the welcome page and if they log in they get asked to upgrade doesn’t make a ton of sense but uh you get the idea next we’ll create a paid Plan called All

Access I think that’s what yes all access access create and then we’ll create a price in this case we’ll say um all access monthly this is going to be $4.99 per month so wow I’m really proud of my review generator okay cool the next step is install and publish I recommend pausing and watching

this video might be different depending on what kind of plan you created but but watch this video because it’s going to walk you through exactly how to set everything up for your particular site for me I know I need this one so I’m going to get this and replace that and then same thing here get the ID pop it in right there and publish while that’s publishing let’s gate access to our mockup generator we’ll see mockup

Grant access to members on a specific plan all access great and then we’re going to restrict access to any page that starts with mockup I could also do equals to uh but we’ll do starts with so in the future if I have additional type of mockup generators I can use that and if they don’t have access we’ll send them to the upgrade page okay you know let’s go test it if we go to our site and we try to go to the mockup page you can see

we are immediately taken to the upgrade page instead if I want to get access I can go to the homepage and I’m already signed in so it’s going to give me this test card and in in production in once this is really live it would immediately launch the checkout I’m going to enter some fake card information the zip code and subscribe this is all in test mode so it’s not actually

charging me and that’s why I used this test card number okay I’m in so now I’m on the welcome page let’s go ahead and try to access the mockup page now that we’re paying and there we go we just dated access to this page and then unlocked it through a Stripe checkout all of that in about 10 minutes thank you so much for watching this is just scratching the surface of what’s possible with Memberstack we

have nearly a thousand components hundreds of custom scripts templates and a huge community of people who are building all kinds of incredible things we can’t wait to hear what questions you have for us and I wish you all the luck as you bring your project to life thanks for watching and hope you have a great rest of your day