Skip to main content

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

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!

12 comments

  • Duncan from Memberstack
    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
  • Elfina Luk
    Elfina Luk

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

    0
  • Julian Galluzzo
    Julian Galluzzo

    I don鈥檛 think so 馃槃 The only direct limits like that I鈥檓 aware of are 100 custom fields

    0
  • Elfina Luk
    Elfina Luk

    Thank you!

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

    0
  • Julian Galluzzo
    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
  • Madana Gopal Vankaraboina
    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
  • Julian Galluzzo
    Julian Galluzzo

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

    0
  • Duncan from Memberstack
    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
  • Madana Gopal Vankaraboina
    Madana Gopal Vankaraboina

    Thanks

    0
  • Spencer Moser
    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
  • Raquel  Lopez
    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
  • Spencer Moser
    Spencer Moser

    Awesome, thank you so much! Raquel Lopez

    0

Please sign in to leave a comment.

Sitemap