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

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 the user's role

• Hide or show HTML based on user's 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 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.