First, you’ll be creating and designing any website you want on Webflow. No need to publish to a custom domain yet (if you haven’t already). On this website you’ll be creating various member only pages (as many as you want). These are 100% normal Webflow pages, the only difference is that MemberSpace will eventually be protecting them from random people trying access.
Here’s an example website:
And here’s an example member only page within that site:
After you’re done setting up your site it’s time to integrate MemberSpace and start protecting and charging for access to the member only pages you created.
Head on over to https://www.memberspace.com/signup and choose any plan. You’ll have an unlimited trial until you get 5 members so no worries on rushing the launch
After you start the trial, you’ll see this screen:
Click “Ready To Start?” and fill in your details (see example below):
Next, you’ll be telling MemberSpace which specific page URLs you want to protect, they call those Member Pages:
Important Note - You may want to add additional security to your Member Pages:
Next, you’ll decide how much it costs members to access your Member Pages. They call this concept Member Plans. You can choose various payment options for each plan (note, you’ll need to have a Stripe account in order to create non-free Member Plans):
Then you’ll fill in the plan form however you want. In this example the price is $25 per month with a 14 day free trial:
At the bottom of the plan form you’ll choose which specific Member Pages members get access to and where they get redirected to after paying for this plan:
Lastly, you need to add a small snippet of code to your Webflow site:
1. Click the "Copy" button:
2. Click "Project Settings" in the top left corner menu:
3. Click on "Custom Code", then paste in what you copied and click "Save Changes":
4. Lastly don't forget to "Publish" your changes
And just like that, you now have a fully functional membership website!
When you go to your live website URL you’ll see there is now a Log In / Sign Up button in the bottom right hand corner:
You can easily move or remove this button and instead manually add a login/signup link anywhere you want on your website.
People can also sign up for the Member Plan you created:
The Login/Signup button in the bottom right automatically turns into a Your Account button after someone creates an account. This will also happen for any login/signup links you manually added. Your members can change their password, email address, update their credit card, view past invoices, etc.
Now if anyone (who isn’t a member) visits any of your Member Pages they will be redirected away and asked to create an account or log in first:
NOTE: it’s recommend you test this page protection in an incognito or private window to avoid any cookie issues.