Display an Element Based on Metadata

Article author
Duncan Hamra

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

// paste in body of global site scripts
function conditionallyRenderElement({ key, value, id }) {
	let element = document.getElementById(id)
	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["completed"] // 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 = "conditional_wrapper" // EDIT THIS
		conditionallyRenderElement({ key, value, id })
	}
});

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

2 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

Please sign in to leave a comment.