Hide content in my Guide templates based on user segment or tag

Hello @erin14

If an user is part of organization, you can use the following method to develop a custom code and check the organization's tags:

window.HelpCenter.user.organizations.tags

If you have multiple organizations enabled, and your users are part of more than 1 org, you can use this code to check all their tags:

// Check if the HelpCenter and user organizations are defined
if (window.HelpCenter && window.HelpCenter.user && window.HelpCenter.user.organizations) {
  // Get the user's organizations
  var organizations = window.HelpCenter.user.organizations;

  // Create an array to hold all the tags
  var allTags = [];

  // Loop through each organization and add its tags to the array
  organizations.forEach(function(organization) {
    if (organization.tags && organization.tags.length > 0) {
      allTags = allTags.concat(organization.tags);
    }
  });

  // Now allTags contains all the tags from the user's organizations
  // You can output them to the console or display them on the page
  console.log(allTags);
} else {
  // The user might not be signed in or there is no organization data
  console.log("User organizations data is not available.");
}

To hide the specified element if the user does not have a tag, you can modify the previous logic to check for the presence of the "test" tag within the user's organizations' tags. If the tag is not found, you can then hide the element using CSS:

// Check if the HelpCenter and user organizations are defined
if (window.HelpCenter && window.HelpCenter.user && window.HelpCenter.user.organizations) {
  // Get the user's organizations
  var organizations = window.HelpCenter.user.organizations;

  // Variable to track if the 'test' tag is found
  var hasTestTag = false;

  // Loop through each organization to check for the 'test' tag
  organizations.forEach(function(organization) {
    if (organization.tags && organization.tags.includes('test')) {
      hasTestTag = true;
    }
  });

  // If the 'test' tag is not found, hide the element
  if (!hasTestTag) {
    var elementToHide = document.querySelector('.nav-wrapper-desktop');
    if (elementToHide) {
      elementToHide.style.display = 'none';
    }
  }
} else {
  // The user might not be signed in or there is no organization data
  console.log("User organizations data is not available.");
}

Hi @jakub20, thank you for your help. How would I adjust this approach for a tag on the user profile? Not on the organization? The tags are people-specific, not organization-specific, so I don't need to include the organization in any of this code.

And to confirm I am understanding your response correctly (as I am not a developer), this is code I would apply to the CSS, correct? Not the JS or page templates?

Thank you!

Hello @erin14

In this case you would use the command window.HelpCenter.user.tags which returns the user's tags:


From there you would need to develop a custom script around that to hide the elements if your user does not have this tag:

// Check if the HelpCenter and user tags are defined
if (window.HelpCenter && window.HelpCenter.user && window.HelpCenter.user.tags) {
  // Get the user's tags
  var userTags = window.HelpCenter.user.tags;

  // Check if the 'widget' tag is present
  var hasWidgetTag = userTags.includes('widget');

  // If the 'widget' tag is not found, hide the element
  if (!hasWidgetTag) {
    var elementToHide = document.querySelector('.nav-wrapper-desktop');
    if (elementToHide) {
      elementToHide.style.display = 'none';
    }
  }
} else {
  // The user might not be signed in or there is no user tags data
  console.log("User tags data is not available.");
}

In my example above, I hide the element .nav-wrapper-desktop when tag is not found on the user, the element will be hidden. This is JavaScript code that should go in your script.js file: Guide Admin > Themes > Customize > Edit code > script.js

 Jakub I want to say thank you for sharing this solution. this made a complex issue easy with the use of the window.HelpCenter.user.organizations.tags method. Adding the console output helped me save a lot of time as I had the tag added to the user but forgot to add the tag to the organization. 

The only thing I would say is not polished in this solution, is that it uses the “window” object. So on a page refresh the end user will see the hidden options briefly.