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.
⚠️ Note: If Memberstack fails to load, the content will not be hidden. 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.
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 free 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
4 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
Please sign in to leave a comment.