Recent searches
No recent searches
Hide content in my Guide templates based on user segment or tag
Answered
Posted Feb 08, 2024
Can someone point me in the right direction for my specific use cases below?
I want to hide the Submit a Request link from users that are not tagged as our application administrators. We will denote this in a tag on their user profile, and/or in a Segment.
I have two locations to Submit a Request in our Guide theme, and I need to hide both of them:
- A link in the header.hbs template called "Submit a Request". Relevant code below.
<div class="nav-wrapper-desktop">
<nav class="user-nav" id="user-nav">
<ul class="user-nav-list">
<a href="https://DOMAIN.zendesk.com/hc/en-us/requests/new?ticket_form_id=17736281711383">Submit a Request</a>
<a href="https://DOMAIN.zendesk.com/hc/en-us/requests?">View Existing Requests</a>
- A button on the home_page/hbs template that direct them to the for form page (same hyperlink as above). Relevant code below.
<section class="categories blocks">
<ul class="blocks-list">
<li class="blocks-item">
<a href='https://DOMAIN.zendesk.com/hc/en-us/requests/new?ticket_form_id=15128280641559' class="blocks-item-link"
<h4 class="blocks-item-title">Submit a Request to Support</h4>
<span class="blocks-item-description">Contact our support team by submitting a ticket through this form</span>
</a>
</li>
How do I selectively restrict the content above based on the user tag or segment? Thank you.
0
4
4 comments
Jakub
Hello Erin McDougal
If an user is part of organization, you can use the following method to develop a custom code and check the organization's 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:
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:
1
Erin McDougal
Hi Jakub, 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!
0
Jakub
Hello Erin McDougal

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:
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
0
Landon Waddell
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.
0