[Code] Display an Element Based on Metadata

Article author
Duncan Hamra

In this article, Nicolas will show us how to conditionally show/hide elements based on a member's Metadata. 

Note - Unless you were specifically looking for a way to hide content with Metadata, I recommend checkout out these more popular methods of show/hiding content first: Gate pages & folders based on plans or gate individual elements based on plans

💡 This approach works best with metadata items that have boolean (true or false) values.

<script>
// paste in body of global site scripts
function conditionallyRenderElement({ key, value, id }) {
  let element = document.getElementById(id)
  if(!key) { 
    element.style.display = "none" 
  } else {
    element.style.display = key.includes(value) ? "block" : "none";
  }
}

window.$memberstackDom.getCurrentMember().then(({ data: member }) => {
  if (member && member.metaData) { 
    // the specific metadata key/id you want to inspect
    let key = member.metaData["subscribed"] // EDIT THIS
    // the value of the metadata you want to check for
    let value = "true" // EDIT THIS
    // id of element to show or hide conditionally 
    let id = "discover-slider" // EDIT THIS
    conditionallyRenderElement({ key, value, id })
  }
});
</script>

Usage:

Replace the placeholder entries for key, value and id inside of the getCurrentMember method.

  • Key: The id/key for the metadata you want to check for.
  • Value: The text value that the metadata key should equal
  • Id: The ID of the element that you want to conditionally show or hide

Similar Articles

Lock Pages & Folders with Gated Content → 

Display an element based on Custom Fields →

Display an element based on Plans and Gated Content →

Display and element based on Metadata →

Display and element based on Free Trials →

Was this article helpful?

Comments

3 comments

  • Comment author
    Nicholas Platt

    Hey! This is great. Is there any way you could show an example of how to set this up based on attributes or id in webflow? 

    1
  • Comment author
    Duncan Hamra

    Hey Nicholas Platt 👋 I'll follow up by end of next week with a video. I'm going to see if a coworker if available to help out with this first ...

    0
  • Comment author
    Nicholas Platt

    Hey Duncan Hamra, check in on this if you have any videos

    0

Please sign in to leave a comment.