English (US)
  1. Zendesk help
  2. Guide
  3. Advice and troubleshooting
  4. Help Center customization

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

Zendesk Team
  • Edited

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.
Return to top

10 Comments

  • Nicole Saunders
    Zendesk Community Manager

    Hi Ron, 

    All you need to do is set the visibility of all of the topics in your community to that internal user segment. 

    You may need to hide the link to the community from en-users on your Help Center with a little custom code, otherwise they'll click it and show up to an empty community. Then just make sure you give your employees a direct link to the community as they won't be able to navigate to it. 

    0
  • Peter Hochstrasser

    Hi

    I'm trying to apply this to Copenhagen 2.9.0 which does not have jquery included. Do I need to add jquery or is there an internal way to get this working?

    0
  • Dave Dyson
    Zendesk Community Manager

    Hi Peter -

    It is possible to import jQuery into your theme: Importing or upgrading jQuery

    Hope that helps!

    0
  • Peter Hochstrasser

    Hi @...

    I have been aware of this, however, the question is if this is avoidable.

    I take this to mean that only with jQuery it is possible to manipulate style attributes of entities I do not know perfectly well where they sit on the DOM tree.

    So, I'll add it to get the recipe working again. 

    May I suggest to update this article to include the jQuery import (in a way that works for all cases) in order for the recipe to work again.

    Yours truly.
    Peter

    0
  • Peter Hochstrasser

    Hi all

    I didn't want to add jQuery just because I needed this simple functionality.

    My solution is:

    // Show div html based on role
    function checkDivsForRole(userRole) {
      if (HelpCenter.user.role==userRole) {
        var elements = document.querySelectorAll("div." + userRole);
        for(var i=0; i<elements.length; i++){
           elements[i].style.display = "flex";
        }
      }
    }    

    checkDivsForRole("anonymous");
    checkDivsForRole("end_user");
    checkDivsForRole("agent");
    checkDivsForRole("manager");

    Note that the actual display attribute value might be a different one - I used flexbox so "flex" is what I need, if you work with standard means it might be "block", "inline" or even another value.

    Yours truly

    Peter

     

    0
  • Dave Dyson
    Zendesk Community Manager

    Thanks for posting your workaround, Peter, and thanks again for the heads-up! I've alerted our team so that the need for jQuery (and a link to the installation instructions) can be highlighted.

    0
  • Jordan Dayton

    We created a variation of what Aron shared here. thank you!

    We just need to slightly tweak this...

    What can we tweak in the JS to allow us to hide content from everyone except a particular SEGMENT that we call "Ticket_Access."

    Segments are used to identify groups of users and granting them access to different categories/sections/articles within ZenDesk GUIDES. 

    We'd like to be able to add specific users to a particular SEGMENT (Ticket_Access) and make content visible or hidden based on a particular segment...

    Can we use this code and just tweak it a little?

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

    Can someone help us out with this?

    0
  • Heather Firth

    If you add the widget to your product can you use the API to only show to certain users who have the Admin role in our product? I know Pendo can do this but didn't know if this was possible for the widget.

    0
  • Austin Killey
    Zendesk Customer Care

    Hey there @...!

    Good idea with widget-based workflows, and this should be possible to pull from Guide roles at least.  You and your team could add some widget API commands like hide and show to hide the widget by default, but then set up a Javascript condition like the ones discussed in this article.  Something like this could work with some tweaking as you see fit:

    if (HelpCenter.user.role=="manager"){
     zE('webWidget', 'show');
    }

    For Support roles like Administrator, you could get super close by having all your administrators become members of the same organization. From there, you can set up your custom Javascript code to pull from HelpCenter.user.organizations.  That way, if one of the user's organizations matches up with your admin-only organization, you could fire off that same "show" command for the web widget. 

    Hope this helps! Let us know if you need anything else.

    2
  • Heather Firth

    Thanks @..., could we potentially use our products user roles instead of the help center ones?

    0

Please sign in to leave a comment.

Related articles

Powered by Zendesk