Hide or show HTML based on user's role or group

Have more questions? Submit a request

22 Comments

  • Roshni Champati

    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

    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

    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

    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

    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.

     

    1
  • Seth Wylie

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

    0
  • Robbert Hink

    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

    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

    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

    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

    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

    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

    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

    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

    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 - Community Manager

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

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

    0
  • Chris Pressley

    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

    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

    Thanks Jehan, Excellent. Works perfectly!

    0
  • Prasad

    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

    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

    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

Please sign in to leave a comment.

Powered by Zendesk