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

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.

Role-based HTML

Here's how to show or hide HTML based on the user's role in Help Center: Anonymous, End User, Agent, or Manager. Note: 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.

Below is sample code you can use with a screencast showing where to put it: http://screencast.com/t/jlvGK5jIyxot

Insert the following under a template page or specific article:

<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 under " CSS"

/*hide role-specific div html*/
div.anonymous, div.end_user, div.agent, div.manager {
display: none;
}

Insert the following in under " JS"

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

Group-based HTML

If you want to show/hide based on groups, it's the same process as above except use the following sample code for the JS:

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