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

MemberSpace makes it easy to hide entire pages of your website via Member Pages. 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)"

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

  3. Next, on the left-hand 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 webiste 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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.