How to conditionally show elements with Memberstack attributes based on specific plan while maintaining page access?
Hi guys,
long time no see :-)
My site has both recurring and one-time plans:
- I have set of 4 plans (classic SaaS pricing setup) with 1 free plan and 3 paid recurring plans
- The free SaaS plan is implemented according to your recommendations as "a no plan at all" (https://docs.memberstack.com/hc/en-us/articles/7406222866459-Free-Paid-Plans-Freemium)
- Then I have several one-time paid plans for various digital products (e-book,...)
If the user has at least 1 one-time plan, then it (in this case and with this setup) kind of ruins the attributes data-ms-content="no-plans" and data-ms-content="paid-plans" as they are triggered with any paid plan (both recurring and one-time plan).
I mean they work OK, but in reality I want to setup the SaaS pricing table and other part of SaaS without being affected by the one-time plans. I believe this is a common setup, wher eyou have a SaaS app/website and offer some kind of paid download (whitepaper, performace study, training video,...)
A was able to achieve this using custom gated groups and nested elements like this:
- I have created a group with all the paid recurring plans (named lets say CONTENT_GROUP_RECURRING).
- then I use data-ms-content="!CONTENT_GROUP_RECURRING" - it works OK but only when user is logged in, but the element is visible to anonymous users (the "no-plans" and "paid-plans" content is hidden if they log out).
- so i have wrapped the element into another element with data-ms-content="members" (as each attribute can be added on one element only once in Webflow)
Is this the intended way of achieving this? It is quite a lot of work to create these custom gated groups and additional wrappers. Also there is no mention about this in DOC so it took me about an hour to figure this is even an option (I know :-))
Maybe I did overlooked something.
The only other way is a custom JavaScript? Something like suggested here? https://docs.memberstack.com/hc/en-us/community/posts/22860525688859-Showing-specific-plans-only-to-paid-users
It would be great if there was some attributes like:
data-ms-content="no-plans-recurring"
data-ms-content="no-plans-one-time"
data-ms-content="paid-plans-recurring"
data-ms-content="paid-plans-one-time"
Or is there any other simpler/robust way how to achieve this kind of conditions?
Thanks for help or direction!
All the best
Petr Musil
CTO, Šikulio
Comments
9 comments
This is a super thoughtful breakdown—thanks for sharing your setup! You're absolutely right: when both recurring and one-time plans are in play, the default
data-ms-contentattributes can get tricky.MemberScript #188 could help simplify things here. It lets you show or hide content dynamically based on the member’s current plan tier and billing interval. This way, you avoid nesting multiple wrappers and can fine-tune visibility based on actual plan logic.
Hey Petr 👋
I wonder if you'd be better off using your own gated content instead of the data-ms-content="no-plans" attributes? Then you could assign the gated content only to the plans you wish. What do you think?
Really quick, how do I do this?...👇
I am trying to gate certain elements on the page. If the user has ONLY Plan B added - then show element 1.
If the user has plan Plan A & Plan B added - then show element 2.
How do I do this using the Memberstack attributes?
How can I do this whilst still allowing the same access to gated pages for both plans?
Hey Josh Dean, an easy way to do this would be to add the gated content attribute of plan B to the element 2 that you want to show for both plan A and plan B users. Wrap this element in a div block and add the gated content attribute of plan A to it. So that only when users are assigned plan A and plan B, they will get access to the specific element.
And for the element 1 you can have the gated content attribute of Plan B and you can wrap this element in a div block which will have the negated gated content ID of plan A. i.e. if gated content ID for plan A users is "plana-content", then for this element 1 wrapped div block the gated content ID you can pass with an exclamation point like "!plana-content". So users who are not subscribed to plan A and are subscribed to plan B can view this.
Hope this helps.
Hey A J great suggestion thank you. The first bit works! (element 2)—but for element 1, I am struggling to get this to work.
I have added Plan B ID to element 2, and then wrapped element 2 in a div and added Plan A ID to that div but with '!'. This does not seem to work for some reason? I currently have Plan B assigned to me and cannot see this element. Is it because the gated content settings in the dashboard grant access to users on Plan B to the Plan A content group?
Josh Dean, yes precisely. The plan a gated content group should be accessed only by Plan A users and same goes for plan b content group. If you want to have something common for plan a and plan b and any of those plan users should be able to access it, then you can create a separate gated content for that purpose.
But in order to solve your use-case for element 1, having unique plan access for each content group would solve the issue.
Ah okay the main thing I want shared between those plans is the URLs to certain pages. So, would I essentially just create a separate gated content group (independent of any plan) that has the gates URLS in? And then, I simply grant access to both plans to that content group?
That means I get the benefit of shared gated URLS but can have more control in the DOM with certain gated content? Does that work?
Yes that would work. You can have separate gated content just for the element showing / hiding logic and give access to single plan on each of them. And you can have a gated content which restricts URLs and provide access to multiple plans as per your requirement.
Yes this all works. Thank you A J!
Please sign in to leave a comment.