Question
How can I hide or show HTML based on the user's role or group?
Answer
See the two sections below:
Hide or show HTML based on user's role
If the information you're hiding is sensitive, this may not be a workable solution for you since the full text can be shown by Viewing Source in the browser.
However, find below a sample code to implement in your Help Center and a screencast showing where to put it.
<div class="anonymous">
<center><h1>Welcome Anonymous User!</h1></center>
</div>
<div class="end_user">
<center><h1>Welcome End-User!</h1></center>
</div>
<div class="agent">
<center><h1>Welcome Agent!</h1></center>
</div>
<div class="manager">
<center><h1>Welcome Manager!</h1></center>
</div>Insert the following code under the CSS template
/*hide role-specific div html*/
div.anonymous, div.end_user, div.agent, div.manager {
display: none;
}Insert the following code under the JS template
// Show div html based on role
if (HelpCenter.user.role=="anonymous"){
$("div.anonymous").show();
}
if (HelpCenter.user.role=="end_user"){
$("div.end_user").show();
}
if (HelpCenter.user.role=="agent"){
$("div.agent").show();
}
if (HelpCenter.user.role=="manager"){
$("div.manager").show();
}Hide or show HTML based on user's group
If you want to show/hide HTML based on groups, the process is the same as above. However, in the JS template, use the code below.
var groups = HelpCenter.user.groups;
for (var i = 0; i < groups.length; i++) {
if (groups[i].name == 'L2 Support' && groups[i].isActive == true) {
$("div.l2").show();
}
}
For more information about editing the template of your Help Center, see the article: Customizing your Help Center theme (Guide Professional and Enterprise).
Disclaimer: This article is provided for instructional purposes only. Zendesk does not support or guarantee the code. Please post any issues you have in the comments section or try searching for a solution online.
Note: jQuery is not provided by default. Make sure that you import a jQuery library if you want to use jQuery statements in a theme in place of vanilla JavaScript. For more information, see the article: Importing or upgrading jQuery.
43 Comments
Hi Aurash,
I am interested to add this feature in our Help Center. Could you tell me what does the Agents do when they are writing content to allow some sections for the Agents and mangers and hide them from End Users in general. Is that possible when they are writing an article, they hide some sections from End users?
Hi Roshni,
Knowledge-Base content (articles written by Agents/Admins) can be restricted by modifying the Section into which the article will be placed. Here's a document with more info on this topic:
https://support.zendesk.com/hc/en-us/articles/203664366-Contributor-guide-to-the-Help-Center#topic_fyv_bsm_kk
If you're curious about how to restrict access to Community content (questions submitted by end-users), there is a different document that can be found here:
https://support.zendesk.com/hc/en-us/articles/203664406-Managing-community-content-in-the-Help-Center#topic_fcr_bw1_kp
Hi Aurash,
I'm working to implement the code you've given here to show and hide information based on the user role, but I'm running into a road block. The code is showing all of the information no matter the user role. Should the JS, CSS and HTML be added in specific section of the respective files?
Thanks in advance!
This isn't working for me :-( Nothing appears when I preview as "Anonymous".
Hey Seth,
Can you try and move the JavaScript snippet into the "$( document ).ready" function?
The Help Center object won't be defined yet before the load of the page. So adding it after the "$(document).ready(function() {" part should work.
Thanks for weighing in, Robbert. Unfortunately, the page looks the same after making this change:
Hey Seth,
I opened a separate ticket with you. Hopefully, we'll be able to spot what is going on here on in your Help Center. See you there!
Thanks Aurash and Robbert.
We've just implemented this to change what navigation links are visible to our users/agents. I had to use Robbert's suggestion of placing the js in the $(document).ready function, but it looks all good now.
I'm trying to get this to work based on a users tag including the word administrator. This is the code I'm using on the JS page but it's not working, has anyone restricted content based on a users tags?
// Show div html based on tag
if (HelpCenter.user['tags'].indexOf("administrator") > -1){
$("div.livechat").show();
}
Hi Craig,
I haven't tried restricting by tags, and can't test it in our live system. Per above, to restrict by roles, I had to put the JS into the $(document).ready function. Have you tried this?
Hi Andrew,
Thanks for the reply, it's working as expected....however, the key is that it works on user/organization tags.
Craig
I made a small change that allows you to mimic the inherited permissions used by Help Center; i.e. if an End-User can see something, than an Agent or Manager should be able to as well.
This is achieved by weighting the various roles and allowing access based on the weight.
For example:
var weights = {"anonymous":10,"end_user":20,"agent":30,"manager":40};if (weights[HelpCenter.user.role]>=weights["agent"]){
$("div.agent").show();
}
The above would hide the content for Anonymous users and End-Users but Agents and Managers would be able to see the content.
We are looking to create Users that can only search the Help Desk, but not raise Tickets.
Could this be used to remove the "Submit a request" link for a specific User ?
Hi Jeff,
I use the code in this article to show the Submit a Case link only:-
https://support.zendesk.com/hc/en-us/community/posts/115000372268-Hide-LIVECHAT-based-on-Tags
Note if someone has the direct link to the page they will still be able to get to it.
Craig
It's also possible to use a similar approach as above to show/hide content based on other user attributes. One option would be to use tags however every ticket that is created would then include that tag as well. I prefer to create as few tags as possible so this option was not ideal for my use.
What I ended up doing was using Organization to group my end-users. I.e. in Jeff's example I would add an organization called "ticket_creators".
In CSS:
In JS:
In Header.html, change this:
{{link 'new_request' class='submit-a-request'}}to this:
<div class="ticket_creators">{{link 'new_request' class='submit-a-request'}}</div>Obviously the viability of this solution will depend on how you're currently using the Organization functionality. Another thing to note is that when creating a new Organization, be sure to disable the option that allows users to view tickets from other users within that organization.
Thanks so much, Jeff and Aron, for jumping in to help!
Aron, I'll go ahead and delete your edited comment. :)
Hi Im trying to do this to hide the search bar before users log in.
I can set the example up fine and it works, but when using the div.searchbar and div.searchbar-inner, it doesnt seem to work
Is it possible to do this?
Hi Chris, If you want to only show search bar to logged_in users, then you can use the following statement. You don't need any CSS/JS Or html for this. Just replace the existing search statement with this.
{{#if signed_in}} {{search submit=false instant=true class='search search-full'}} {{/if}}Thanks Jehan, Excellent. Works perfectly!
Actually I did not code it and try it. But my question is, if some one add a break point (in the browser) in below mentioned line,
and using the browser console, execute below code.
Then any one can access to manager html using above hacking.....
How to prevent it?
Hi Prasad!
The code Jehan posted is having a Help Center act in a certain way only IF the user's role is set to manager.
The code its testing will be sent by Zendesk itself, only when a user is logged in as a Zendesk user with that role, and is safe to use.
If the code which was hidden by the if statement shared confidential information, that could be a problem, however Zendesk should prevent any actions from being taken by your visitor unless they actually have the role.
Hope this helps!
Is it possible to do this but not based on their role, but based on their "Segment" meaning, if a users DOESN'T HAVE a certain segment assigned then the HTML element will be displayed?
Hello! I am trying to implement this capability, and specifically using the option provided above by Craig Willis 2 years ago, as I want to restrict access to an HTML link that I have so that only our select users tagged as "communitybeta" can view it, but am not having success as it seems to show for all users in my tests thus far(wondering if it's due to my use of the Copenhagen theme and this being several years older). The capacity in which I am attempting to use it is:
HTML:
<div class="beta"><a href="#"><i class="fas fa-flask"></i> Labs</a></div>
CSS:
div.beta {
display: none;
}
JS(I have tried this standalone, and under $(document).ready function):
// Show beta based on tag
if (HelpCenter.user['tags'].indexOf("communitybeta") > -1){
$("div.beta").show();
}
Hey Jeremy,
Looks like there haven't been any updates to this post.
I'm rather limited on what I can assist with on my end, however, I did want to provide some useful documentation for you below:
If you're still running into any issues setting this up, I'd be happy to get you in touch with our Professional Services team by contacting your Account Executive.
Keep me posted!
Hi Jeremy!
I was able to use your html and CSS but changed the JS script to the following to get it to work:
if (HelpCenter.user.tags=="communitybeta"){$("div.beta").show();
}
Give this a go and let me know if you have any questions.
The bolded text is where you could change the tag as needed.
Thanks!
Thanks so much @Socorro! You've definitely made things easier in our design and rollout to be able to perform at all facets we are looking to implement for our Community, much appreciated!
Hi All,
Using Socorro's method above, but wondering if it is possible to restrict access from organization tags instead of user tags? We have a bunch of organizations that re-sell our products and we want to restrict content on a category page based on their organization.
Thanks!
Hey Aaron, what are you looking to restrict or limit visibility of? If it's articles or categories, that's a bit different I feel, whereas this topic was specific to using tag identification to determine visibility of HTML content on the different Help Center/Guide pages.
Jeremy,
I'm looking to restrict specific links that appear on a category page. We have a bunch of links to PDF files, but there are several on that page that only users of specific organizations should be able to see. I can restrict via a users tag, but I'd have to manually set that tag on over 500 end user accounts. All of the organizations that these users belong to have a specific tag set, so if I could limit it from that, that would be the easiest method.
I hope that makes sense.
Thanks for clarifying, Aaron, totally makes sense. Since a Category pushes to a section by default and the articles within, if you make the articles visible to a User Segment (specific group that you build out in the User Permissions section of the Guide Admin page), you could choose all of the orgs that you want to have visibility, and leave out those that are Reseller orgs. Then you could restrict article and attachment visibility to that User Segment.
The only downside is the time needed to select all the desired orgs that you want to have visibility to.
You could probably use some JS and CSS to hide content based on tags, something like this with using the 'reseller' tag on the desired orgs, then ensuring that you are calling the right class that's being used in your page's HTML for the content you want to hide (attachments can't be hidden unless the article it lives with is hidden at the user segment level)
if (HelpCenter.organization.tags=="reseller"){$(".className").hide();
}
Please sign in to leave a comment.