How to Build a Membership Site with Softr

if you're ready to give people a newer fresher way to interact with your airtable data look no further than this video i'm going to be going into detail about how i just built a softer web app that uses my airtable data to power it and i did this in under 30 minutes so if that's of interest stick around and let's get into it hey my name is gareth pronovost i am the owner at gap consulting where we help you to organize and automate your business and life if that's of interest and you want to learn more about how we do that do check out our website i will include links below and don't miss our free airtable crash course it will get you up to speed quickly and easily with airtable but without further ado let's jump into the heart of this video we are talking about softer i mentioned it last week in our video where we did an intro to the software but basically in a nutshell software allows you to build a really customizable interface for your airtable data right now it is read-only meaning that people can't actually write new data to your airtable database or update existing stuff they can use forms to submit data but they can't actually edit it but that's in the works so if you're watching this in the future there's a good chance that you can already do that in software but what i've built here today for us is a members site i am making people log in before they get access to any of the templates that we've produced that they want to download so the idea here is you have to put your name and email address in in order to get our templates once you're signed in your membership is free once you're signed in you can go in get any of the templates you want and uh and be out of there so let's jump into how i built this in softer as i said in under 30 minutes all right so first things first inside of software on the right on the left hand side i want you to draw your attention to these four pieces these are the building blocks of what you're building so i started this from scratch mapped it to my airtable database all point and click all i had to do was give it the airtable api key first and foremost we've got our pages here pages are going to be the different web pages inside of your web app so for me i've got this home page where most of everything happens but we also have a login and a sign up page then we have our blocks and the blocks are what we use inside of the pages so if you think of the web app as being top level and inside the web app we have different pages and each page is going to be comprised of one or more blocks those blocks have a lot of different options on them we can bring in you know hero calls to actions bring in partner things pricing team testimonials faqs all the different pieces that you might need to build a website or a web app footer navigator you name it user accounts is where you're going to get all those signup forms you know user profiles sign in forms all of these pieces so that's what i'm working with here in mine largely you've also got your data data is where we're going to store any information about people who are signing in and so this is where accounts get created so as people create accounts that that information is going to be added here now i did talk to software about this and they say that a big feature request from from their users is to bring this into a sync with air table so pretty soon maybe when you're watching this you're going to be able to actually visualize your users in your airtable database but for now it's currently living inside of software and then lastly you've got your settings and this is kind of like a meta settings for your overall app you can change your default colors update your custom domain you know seo settings build your integrations you name it so let's look at our pages and talk about how we limit who can see what because that's really at the core of what is so powerful about this so i go in here on my page you'll see that i've got the same little hero blurb here twice and it's a little different each time first time i'm looking at members only so this is something that we're saying hey you're not signed in yet so we're saying hey you you need to be a member to access this you can either sign up or log in but if you're already logged in if you're already a member then we're going to say grab immediate access to our templates go to the templates right so your your interaction with this web page is going to be totally different based on whether you're logged in or not so that is controlled by going into each of these little blurbs and checking out your visibility in the upper right corner so this particular one this particular blurb is only visible to people who are not logged in and you can see that we denoted that here now this second one if i click on this one and i again go to the visibility section this is only visible to people who are logged in and i want to point out that there's some really advanced stuff right around the corner because not only can we say hey you've got to be logged in to see this but we can also say and your email address has to meet certain conditions or we can set up payment conditions through stripe you have to have paid for a certain program in order to get access to this particular part of the page so there's a lot of customization here and you can really go to the next level in terms of putting together courses or whatever you could imagine really behind a paywall in softer now lastly i've got the templates themselves and of course these are only going to be visible again go to that upper right corner and check that visibility this is only visible to logged in users now in terms of what they're seeing well that all comes down to how we mapped out this little list so this particular block that i'm sharing all my templates in actually comes in the form of a list block so let's go ahead and find that here and you can see that you have a lot of different options from list and also list details so you can really drill into how you want to allow people to interact with your data now for me i went really high level for this example so it's just the list block i believe i picked this one the list with vertical cards but experiment with different ones and see what you like now inside of that block after we back out of the visibility of course we're mapping it to an air table base so this is where it's saying hey i'm this is where i'm getting the data from but then we also need to you know pick where we want the categories to show up like if we want to put them on the left you know people can filter on the left i kind of like them on the top then we have to map all these different pieces to the list right so the list has an image or a video it the list has a title the list has a subtitle and so all of this data image title description these are fields in my airtable database so let me pop into airtable and show you i've got my database here with my title my description and my images and that is the data that's just showing up there right on cue so we can map all of that and then i want to say hey when somebody clicks this i want an action to occur in this case i want it to open to an external url and take you to the template link and the template link is something that i'm storing inside of airtable where people can log in and get access to these templates so let's take this out for a spin once we've got this all published we go ahead and publish it here pop it open and this is what it looks like i can sign in or sign up or log in i'll go ahead and sign in here i've already created an account for myself once i've logged in you see that i get access to what i would expect to see namely the templates so i can uh go ahead and click on any of these to see where it's going to take me and let's see if it pops open correctly the air table template this is the task template so that's great so it opens up perfectly based on what i would expect so we see that everything is working now the other part that you've got to map out here at a minimum you have to have a login page and a sign up page of course you can get as fancy as you want in yours but everything is really point and click create that login page add a block in this case i used the user accounts block and i brought in the sign in block as you can see right here i just made some slight customizations to it and then you need to start mapping things around so you have to say well if they click on forgot password obviously i didn't build a forgot password page but i probably should get to that if they sign up uh if if they want to click on sign up instead of sign in then we need to take them to the sign up page and so you can really just go in and say what happens when somebody clicks this button perform that action step it's really point and click now the last page here is our sign up page and of course it's going to be really simple or really similar to our sign in page somebody signs up they provide their name email address etc and over here you see that it's all mapped up as well so same idea and we just need to make sure that all our pages are clicking back and forth between each other correctly to make sure that people can navigate the site you can take this out for a spin in preview mode when you're testing it out and then once you're ready to go just hit publish and your app will be live so i'm really really excited about all the potential that this unlocks for us the way that we can now allow people to get limited access to our air table data just continues to improve and i'm really really excited that software came out with such a great and flexible tool that really allows you to customize the web app to look and feel how you want it to let me know in the comments below how you plan on using this amazing tool and if you have any questions feel free to shoot them my way as always i hope you found that to be extremely helpful if you did and you'd like to learn more swing by our website and see how we can help we offer a free airtable crash course that will help you level up in airtable quickly and we also have some paid services including hourly consultations with our experts we have some online courses and a group coaching program and for advanced needs we can build a bespoke solution for you from scratch so swing on by and i look forward to connecting with you soon you

Channel: GAP Consulting

Views: 3,285

Keywords: airtable, gareth pronovost, airtable training, airtable consultant, airtable consulting, airtable demo, learn how to build automation, softr, build an app in softr and airtable, webapp for members, create a membership site in softr, create a membership site from airtable, airtable tutorial, no code development, build a website from scratch, build a no code web app

Id: a0Me-3Lk-7k

Length: 10min 41sec (641 seconds)

Published: Mon Feb 15 2021