English (US)
  1. Zendesk help
  2. Guide
  3. Guide advice and troubleshooting
  4. How to customize the theme of the help center

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

Disclaimer: This article is provided for instructional purposes only. Zendesk does not support or guarantee the code. Post any issues you have in the comments section or try searching for a solution online.

Click each of the two sections below for information on hiding or showing HTML: 

Based on user role

Based on user group

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 a user can view the full text by using the View Page Source function in their web browser.

Below is 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 or hide HTML based on groups, the process is the same as what is listed in the steps for a user role. 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).

Note: jQuery is not provided by default. Make sure to 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

14 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

    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

    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
  • Carrie Boogaart

    Is there a way for it to be visible to 2 or 3 roles? We would like to make our articles public but "hide" certain steps based on your role. In theory, whatever we hide from the public should be visible to End-Users (signed in, agents, & admins).

    So essentially, we need to hide it for Anonymous only.

    0
  • Dave Dyson
    Hi Carrie,
     
    You can adapt the sample JavaScript code in order to hide HTML based on multiple groups by adding additional logic to the if() statement. For example:
     
    var groups = HelpCenter.user.groups;
    for (var i = 0; i < groups.length; i++) {
     if ((groups[i].name == 'L2 Support') || (groups[i].name == 'L3 Support')) && groups[i].isActive == true) {
     $("div.l2").show();
     }
    }
    0
  • Simon

    Hi there, 

    Handlebars/Curlybars questions:

    I have been scouring the interwebs searching for a solution to render content with Handlebars/Curlybars rather than show/hide with jQuery. The reason for this is so that we secure information based on user roles and render only what's needed.

    I was wondering if there is some way to use HelpCenter.user.role and pass that to the .hbs template for use in Handlebars helpers?

    Any help would be greatly appreciated.

    Alternatively, I'd love to use a custom template but again, Zendesk does not provide a way to restrict the template based on roles. Is this on the roadmap?
    0
  • Simon

    For those who would like a custom Curlybars helper to render content/html based on a user's role. Vote for this feedback post.

    0

Please sign in to leave a comment.

Related articles

Powered by Zendesk