This article will show you how to do everything listed in the table of contents →
If you prefer a video, this 6-minute freemium blog tutorial video will show you how the most common data attributes work. And here's a 5-minute upgrade prompt tutorial video that does basically the same thing.
Show content if logged in
data-ms-content="members" → This content is visible when a member logs in… and hidden if they log out. This data attribute works with any Memberstack project.
Pro tip - If you want this content to be default-hidden, you can add the attribute of data-ms-bind:style="display:block" and then hide the element when you're done designing it. If the member has access, Memberstack will set the element to display block. Learn more →
⚠️ Note: We don't recommend using this feature for hiding extremely sensitive information with Memberstack.
Show content if logged out
data-ms-content="!members" → This content is visible when a member logs out… and hidden if they log in. It’s handy for hiding elements that are annoying or redundant for logged-in members. For example, you can add data-ms-content="!members" to your signup and login buttons to hide them when a member logs.
This data attribute works with any Memberstack project.
Show content if logged in with a plan
data-ms-content="CONTENT-ID" → This content is visible when a member logs in AND has the correct permissions. It’s hidden if they log out or do not have the correct permissions.
The "CONTENT-ID" is automatically generated when you gate content in Memberstack.
This is handy if you want to show or hide elements based on a member’s current plan. I find this especially useful if I have several membership tiers which incrementally unlock more content - and I want to manage access to those memberships via a single dashboard.
Pro tip - If you want this content to be default-hidden, you can add the attribute of data-ms-bind:style="display:block" and then hide the element when you're done designing it. If the member has access, Memberstack will set the element to display block. Learn more →
You can also reverse this functionality by adding an exclamation mark before the Content ID...
Or you can add data-ms-content="!CONTENT-ID" to ads or up-sell prompts in a dashboard. Once the member has upgraded to the premium plan, there’s no need to display this content any more.
Less Common Use Cases
Show content if logged in without plans
data-ms-content="no-plans" → This content is visible when a member logs in but does not have any plans… and hidden if they log out or join a plan.
It’s handy for showing elements that are useful before someone’s account is approved, the purchase is complete, etc.
This data attribute works with any Memberstack project. Add a “!” to reverse its functionality.
Show content if logged in with free plan(s)
data-ms-content="free-plans" → This content is visible when a member with a free plan logs in… and hides if they log out or leave their free plan.
This data attribute works with any Memberstack project. Add a “!” to reverse its functionality.
Show content if logged in with paid plan(s)
data-ms-content="paid-plans" → This content is visible when a member with a paid plan logs in… and hides if they log out or leave their paid plan.
This data attribute works with any Memberstack project. Add a "!" to reverse its functionality.
Similar Articles
Lock Pages & Folders with Gated Content →
Display an element based on Custom Fields →
Display an element based on Plans and Gated Content →
Comments
9 comments
Does this work with specific customFields? Say I want to display a Div if the user as entered customField A. If customField A is not set then hide element?
Hey Oliver,
We do not have a custom field data attribute working like gated content at the moment. You could do this with custom code though using our .getCurrentMember() functionality. Something like:
Please can you provide a guide / video / text / to show how we can do that? Thank you!
+1 for having this functionality on custom fields
Hello,
Is there an attribute for user having the plan but that cancels at period end ?
thanks
Hey William de Broucker 👋
What you describe is the default. If you are getting members canceling immediately try looking at the stripe settings here. Make sure the toggle for "Cancel subscriptions immediately" is not enabled.
Hey Josh Lopez,
I handle the cancelation differently on my website (through a webhook) that's why I would like to have an attribute to target the people that cancels at period end.
Thanks,
I'm new to this. Can I add something to make it visible to the public AND people on free plans, but not on paid plans?
Hey MJ 👋 You might try the data-ms-content="!paid-plans"
Elements with that attribute should be visible to everyone EXCEPT people with a paid plan.
Please sign in to leave a comment.