How to hide/show page content (using data attributes) in Carrd

MemberSpace makes it easy to hide entire sections of your website via data attributes. We also make it easy to upload and protect specific media via Content Links.

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:

  data-ms-show="free"

• 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:

  data-ms-hide="auth"

• 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:

  data-ms-hide="plan(111)"

  
  

  To find a plan ID, go to Pricing > Edit (next to the plan) > find the plan ID in your browser search bar between plans/ and /edit:

  
  

  

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.

1.  Make sure you are logged into your Carrd backend.

2.  Edit your site and click the + icon at the top to add any element (e.g. a banner or a block of text) to the page. In this example, we'll add a button.

   
   

   

3. Next, on the side, edit the creative aspect of the button > then click the settings icon at the top.

   
   

   

4. 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 website visitors who are NOT.

   
   

   

5. 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.