How to set up individual course access in Webflow using Memberstack plans when collection slug integration isn't working? Answered

Post author
Simen Klunderud

Hi everyone! 😀

I have a challenge that I can't find a working solution to, so I am hopeful someone here would be able to help.

  1. I have a webpage on which I sell different online courses that customers are paying for once to have lifetime access.
  2. I have made a CMS collection in webflow that have these products as they are digital products with information, videoes etc in them (e.g. "starter course", "intermediate course" etc.. I also want customers to be able to purchase several different products if they wish too and thereby have access to multiple courses if they have bought access to them. not all the courses are related to each other.
  3. on the collection page template I have a small intro open to everyone (also non-members) as a teaser much like in many online newspapers, but I want members to be able to purchase a said plan to gain access to the rest of the content.
  4. In both memberstack and webflow I have created collection items with slug values (e.g. "starter-course") that correspond to the name of the plan in memberstack ("starter-course").
  5. When i set the custom attribute of the container I want to view as data-ms-content = {{ slug }} in webflow, it does not seem to work.

I have tested with simple logic such as "data-ms-content=!member" and "data-ms-content=member" and it all seems to work. I have also created a user that has the "starter-course" plan in memberstack.

any idea what i am doing wrong? 🤔

Comments

3 comments

  • Comment author
    Raquel Lopez

    Hello Simen,

    So in summary, you want free users to have access to only just a preview of the course, and you want users who have purchased the course to be able to see the whole content, right?

    To do this you need to follow this steps
    In Memberstack

    1. Create gated content for each plan you offer.
    2. Each gated content will have a unique ID.

    In Webflow collection

    • In your CMS collection item schema, add:
    1. One field for free content (visible to everyone).
    2. One field for premium content (only for paid users).
    • Add two fields to control access:
    1. Premium access ID → The gated content ID for paid users (e.g., starter-plan).
    2. Free access ID → The same ID but prefixed with ! (e.g., !starter-plan).

    In Webflow Designer

    1. Add a Rich Text element (or other elements that match your schema content) for the free preview content.
    2. Set a custom attribute with a dynamic value mapped with the corresponding field id on it: data-ms-content="{{free access id}}" .
    3. Add another element for premium content and set its attribute to: data-ms-content="{{premium access id}}"

    This setup ensures that free users only see the preview while paid users get full access.

    References:

    0
  • Comment author
    Marcin Sęk

    I have already made an identical platform, I will soon put it into production.

    A little hint. If you create a gate for a given plan, e.g. video1, then create two fields in webflow cms: YGate = video1 and NGate = !video1

    Webflow does not allow you to negate non-standard attributes when it gets the value from cms :)

    Adding two fields with negated gate name and without negated gate name will allow you to control user access.

    0
  • Comment author
    Simen Klunderud

    Thank you very much, Raquel and Marcin! 😀 🙏

    I followed the steps you suggested Raquel, and It all came together once I added the YGate and NGate fields like you suggested, Marcin 🎉

    if others run into the same problem in the future, I also discovered that I had to create corresponding plans in memberstack for all Y-gate collection items, because when I hadn't the content would display anyway if the Y-gate was not found. strangely enough it worked like it should for the N-Gate value...

    0

Please sign in to leave a comment.