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

Comments

16 comments

  • Avatar
    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?

  • Avatar
    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

  • Avatar
    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!

  • Avatar
    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:






  • Avatar
    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.

     

  • Avatar
    Seth Wylie

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

  • Avatar
    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!

  • Avatar
    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.

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

  • Avatar
    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?

  • Avatar
    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

  • Avatar
    Aron Trimble (Edited )

    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.

  • Avatar
    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 ?

  • Avatar
    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

  • Avatar
    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.

  • Avatar
    Jessie Schutz

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

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

Please sign in to leave a comment.

Powered by Zendesk