How to implement tiered content access in Webflow with React for a membership-based course platform? Answered

I'm currently exploring Webflow User Accounts, particularly for the context of short courses online. One potential use case I would like to explore involves offering different plans to users, with some opting for a free plan that grants them access to a maximum of two courses per week.

Limited gated content
Does anyone know how to make that possible? does webflow have any solution for this?  
Where else should I look or what to search for?

Thanks in advance!

Comments

12 comments

  • Comment author
    Duncan from Memberstack

    Hey Leonardo Cipriano 👋

    I wonder if you could modify the credit system I created to handle this? https://www.youtube.com/watch?v=UF9FVidUakE

    I.e. Use Make to decrement the number of credits on their account each time they add themselves to a course. (Each course would be a free plan). 

    0
  • Comment author
    Elfina Luk

    Is there a limit on the number of gated content groups we can add to our memberstack account?

    0
  • Comment author
    Julian Galluzzo

    I don’t think so 😄 The only direct limits like that I’m aware of are 100 custom fields

    0
  • Comment author
    Elfina Luk

    Thank you!

    What custom fields are you referring to? just for clarity?

    0
  • Comment author
    Julian Galluzzo

    No problem! And as in you cant add more than 100 custom field options... but typically, if you are trying to do that, there is a better way using json or something 🙂

    0
  • Comment author
    Madana Gopal Vankaraboina

    Hello Everyone, Some one can help me on the Gated content ( Individual elements )
    In my React application, I want to gate individual page elements based on different subscription plans. Specifically, I have three plans: Starter, Base, and Pro. Depending on the user's subscription plan, I need to hide certain elements. For example, users with the Starter plan should not see certain elements, and similarly, users with the Base and Pro plans should have access to different sets of elements. How can I implement this functionality effectively?

    0
  • Comment author
    Julian Galluzzo

    The best thing to do would be to use gated content groups for each plan 🙂

    0
  • Comment author
    Duncan from Memberstack

    The gated content feature only works with static websites like Webflow. You'll need to use permissions and set your own routing instead. https://developers.memberstack.com/docs/react-package

    0
  • Comment author
    Madana Gopal Vankaraboina

    Thanks

    0
  • Comment author
    Spencer Moser

    What do these toggles do? Turn it on? So currently, these aren't working? And what's the copy "everyone" do? Thanks in advance!

    0
  • Comment author
    Raquel Lopez

    Hello,

    Yes, the toggles enable/disable the gated content. You can have many different gated content with different logic to hide or show content depending on what you set up.

    You might wanna look at this part of the documentation to understand how it works https://docs.memberstack.com/hc/en-us/articles/7402927868443-Gated-Content

    The yellow components are gated content by urls. They work in combination with the "Grant access to" select.

    In the example below, the "Free Users" Gated content would only show the content to "All the members" that go to the URL that starts with app/dashboard

    All the members means all logged in members, no matter if they have premium plan, no plan or free plan.

    And the "Premium only" content will show content to only the users who have the Pro plan when they access the /dashboard url

    So basically when you create a "Gated content" you can either block content by URL, as the example above, and/or also by component. When you add the data-ms-content property and will show or hide based on the "Grant access to" select to components that are not included in their restricted urls.
    If people that don't belong to the gated content want to access a restricted url, Memberstack will log them out, and redirect them to login.
    0
  • Comment author
    Spencer Moser

    Awesome, thank you so much! Raquel Lopez

    0

Please sign in to leave a comment.