How to hide/show page content (using data attributes) in Carrd
However, there are situations where you want to hide/show entire sections or specific elements of a page depending on various factors e.g. Is the user logged in? Are they on Plan A? Are they a free or paid member?
With MemberSpace's data attribute functionality, you can accomplish exactly that!
Here is our developer help doc, but below we'll give a few simple examples you can follow.
- Say you want to show an up-sell button only for free members encouraging them to join a paid plan. To do that, add the following data attribute to the button:
- Say you want to hide a sign up banner image so only visitors who are NOT logged in see it. To do that, add the following data attribute to the banner image:
- Say you want to hide an external link for members on a specific plan (e.g. plan id 111). To do that, add the following data attribute to the link:
Adding Data Attributes to Elements on a Carrd Site
You can add data attributes to any element on your Carrd website by following the below steps.
- Make sure you are logged into your Carrd backend.
- Edit your site and click the "+" icon at the top, right to add any element (e.g. a banner or a block of text) to the page. In this example, we'll add a button.
- Next, on the left-hand side, edit the creative aspect of the button > then click the settings icon at the top.
- Scroll down until you see "Attributes". Then, click "Add attribute" > add the data attribute to the field. In this example, we'll choose to hide the button from members who ARE logged in but show it to webiste visitors who are NOT.
- After, be sure to click "Done" at the bottom and publish your changes at the top.
Now, when a website visitor is NOT logged in, they will see the "Log in here" button we just added.
However, if the visitor IS logged in to their MemberSpace account, the button will be hidden.