Memberstack's Gated Content feature allows you to control access to your website's content. You can choose which pages, folders, and page elements are visible to your users, and decide who should have access to them and where they should go if they don't.
While Memberstack provides excellent front-end authorization, please note that it isn't a fully secure solution. If Memberstack fails to load and a visitor knows the exact URL of your content, they will be able to access it. For higher security, consider our Hosted Content option or follow our security checklist.
Step 1 → Navigate to Gated Content in your Dashboard
- Open your Memberstack Dashboard. You'll find the "Gated Content" option in the main navigation panel on the left.
- Click on "Gated Content" to open the Gated Content page.
- In the Gated Content page, click "+ Add" on the top right to start setting up your gated content. You should now see an "Add Gated Content" modal.
Step 2 → Gate a page, Folder, or CMS collection
- Give your gated content a name. This can be the name of a paid plan, a user role, or any other identifier you prefer. Remember to keep the name short and simple, as it will be used to generate an ID for later use.
- Click the “Grant access to” dropdown field to select if you want to grant access to all members or members on a specific plan. You can assign multiple plans to the same gated content group.
- Click the “Restricted URLs” accordion to choose which pages and folders you want to hide. This option lets you specify which parts of your website will be gated.
- Use the "Starts with" option to hide all pages within a specific folder. For instance, if you have a folder named "premium," entering "premium" in the "Starts with" field will hide all pages within that folder.
- Use the "Equal to" option to hide specific pages. Here, you need to enter the exact URL of the page you want to hide.
-
If you want to differentiate between free and paid items in the same CMS collection you can also update the slug of each free item to begin with "free-" and use that to grant access to those items.
- Use the "Access Denied URL" field to redirect users to a specific page if they do not have access to the gated content group.
- Click the "Hosted Content" accordion to add 100% secure content that can be added to the page using data attributes. You currently have the option of HTML and Link. Form more information on this specific Gated Content option please read this article.
- To get the data attribute for the hosted content click "Add Content" after entering your info and then click on the hammer and screwdriver icon.
- Finally, click "Save" to apply your settings. Your gated content is now set up!
Common Errors
Error: The provided URL already exists
This error occurs when you attempt to gate a page or folder that's already gated. Each page or folder can only be gated once, but remember that you can grant access to it via multiple plans. So, use Gated Content to restrict access to the page or folder, and then use your plans to grant access in different ways.
If you encounter other issues or errors, don't hesitate to reach out to our support team for help.
Next Steps
Now that you've set up Gated Content, you might want to learn how to show and hide specific elements on a page in Webflow. This feature allows you to further customize your users' experience based on their access levels. Check out our guide on how to show and hide elements on a page in Webflow to learn more.
Comments
2 comments
There's an important distinction for where to route users when denying access that's missing here: are they logged in or not?
If they're not, the obvious place to route them is the log-in page.
If they are, they may have a plan. Does the plan grant them access to the route they're trying to access? If not, then we should send them to the purchase page that can get them access to the plan with access to that route.
But hold on, we only have one choice of "access denied" route. So, now they're on a frustrating journey to the log-in page and are probably about to get redirected again to their redirectTo URL. It's pretty annoying.
Steven Webster In 5 years of building/improving Memberstack I'm surprised to say this has never come up before! And it's a really great point.
That said, I think I have a solution for you using the features available today. The first thing I'd do is gate access to the upgrade page and set the access denied page to point to /login. And then grant access to all logged in members. Now, only logged in members can view the page.
Then, I would gate access to the content you want them to purchase. Point the access denied URL to the upgrade page and grant access to paying users.
Now, if someone is logged in and tries to access paid content, they will see the upgrade page. If they are logged out, they will be redirected twice (instantly) and will see the login page.
Let me know if I'm missing anything!
Please sign in to leave a comment.