How can I hide or show HTML based on user's role or group?

Have more questions? Submit a request

33 Comments

  • Roshni Champati
    Comment actions Permalink

    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?

    0
  • Dwight Bussman
    Comment actions Permalink

    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

    0
  • Brandi Starks
    Comment actions Permalink

    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!

    0
  • Seth Wylie
    Comment actions Permalink

    This isn't working for me :-( Nothing appears when I preview as "Anonymous".

    • I've put in the CSS:



    • I've put in the JS:

    • I added the HTML to the home page:



    • And the sample text is not displaying when previewing as Anonymous:






    0
  • Robbert Hink
    Comment actions Permalink

    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.

     

    2
  • Seth Wylie
    Comment actions Permalink

    Thanks for weighing in, Robbert. Unfortunately, the page looks the same after making this change:

    0
  • Robbert Hink
    Comment actions Permalink

    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!

    0
  • Andrew Ritchie
    Comment actions Permalink

    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.

    0
  • Craig Willis
    Comment actions Permalink

    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();
    }

    0
  • Andrew Ritchie
    Comment actions Permalink

    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?

    0
  • Craig Willis
    Comment actions Permalink

    Hi Andrew, 

    Thanks for the reply, it's working as expected....however, the key is that it works on user/organization tags.

    Craig

    0
  • Aron Trimble
    Comment actions Permalink

    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.

    0
  • Jeff Callahan
    Comment actions Permalink

    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 ?

    0
  • Craig Willis
    Comment actions Permalink

    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

    0
  • Aron Trimble
    Comment actions Permalink

    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:

    /*hide div by org*/
    .ticket_creators {
    display: none;
    }

    In JS:

    var orgs = HelpCenter.user.organizations;
    for (var i = 0; i < orgs.length; i++) {
    if (orgs[i].name == 'ticket_creators') {
    $("div.ticket_creators").show();
    }
    }

    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.

    0
  • Jessie Schutz
    Comment actions Permalink

    Thanks so much, Jeff and Aron, for jumping in to help!

    Aron, I'll go ahead and delete your edited comment. :)

    0
  • Chris Pressley
    Comment actions Permalink

    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?

    0
  • Jehan
    Comment actions Permalink

    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}}
    0
  • Chris Pressley
    Comment actions Permalink

    Thanks Jehan, Excellent. Works perfectly!

    0
  • Prasad
    Comment actions Permalink

    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, 

    if (HelpCenter.user.role=="manager"){//Add a break point in here
    $("div.manager").show();
    }

    and using the browser console, execute below code.

    HelpCenter.user.role = "manager";

    Then any one can access to manager html using above hacking.....

    How to prevent it?

     

    0
  • Allen Hancock
    Comment actions Permalink

    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!

    0
  • James Pullman
    Comment actions Permalink

    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?

    1
  • Jeremy Robinson
    Comment actions Permalink

    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();
    }

     
    0
  • Brett - Community Manager
    Comment actions Permalink

    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!

    0
  • Socorro Fernandez
    Comment actions Permalink

    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!

    1
  • Jeremy Robinson
    Comment actions Permalink

    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!

    0
  • Aaron Selway
    Comment actions Permalink

    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!

     

    0
  • Jeremy Robinson
    Comment actions Permalink

    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. 

    0
  • Aaron Selway
    Comment actions Permalink

    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.

    0
  • Jeremy Robinson
    Comment actions Permalink

    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();
    }
    0

Please sign in to leave a comment.

Powered by Zendesk