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

Modify your help center theme to hide HTML from users based on their role and group. If the information you want to hide is sensitive, this may not be a workable solution for you since a user can view the full code with the View Page Source function in their web browser.

Disclaimer: This article is provided for instructional purposes only. Zendesk does not support or guarantee the code.

This workflow contains the following sections:

• Option 1: Hide or show HTML based on user's role
• Option 2: Hide or show HTML based on user's group

Important: To utilize the code's functionality as expected, use Guide Templating V2 or above. For more information, see: Upgrading from Templating API v1.

Option 1: Hide or show HTML based on user's role

Copy the code snippet below and paste directly below the first <div class="container"> element in the home_page.hbs file.

<div class="anonymous">
<h1>Welcome Anonymous User!</h1>
</div>
<div class="end_user">
<h1>Welcome End-User!</h1>
</div>
<div class="agent">
<h1>Welcome Agent!</h1>
</div>
<div class="manager">
<h1>Welcome Manager!</h1>
</div>

Insert the below code under the CSS template.

div.anonymous, div.end_user, div.agent, div.manager {
width: 100%;
text-align: center;
display: none;
}

Insert the below code under the JS template.

const anonymous = document.querySelector(".anonymous")
const end_user = document.querySelector(".end_user")
const agent = document.querySelector(".agent")
const manager = document.querySelector(".manager")

// Show div html based on role
if (HelpCenter.user.role=="anonymous"){
 anonymous.style.display = "block";
}

if (HelpCenter.user.role=="end_user"){
 end_user.style.display = "block";
}

if (HelpCenter.user.role=="agent"){
 agent.style.display = "block";
}

if (HelpCenter.user.role=="manager"){
 manager.style.display = "block";
}

Option 2: Hide or show HTML based on user's group

Copy the code snippet below and paste directly below the first <div class="container"> element in the home_page.hbs file.

const user_group = document.querySelector(".user_group")

<div class="user_group">
  <h1>Welcome to L2 Support!</h1>
</div>

Insert the below code under the CSS template.

div.user_group {
  width: 100%;
  text-align: center;
  display: none;
}

Insert the below code under the JS template. In this example, replace 'L2 Support' with your user group.

const groups = HelpCenter.user.groups;

for (let i = 0; i < groups.length; i++) {
    if (groups[i].name == 'L2 Support' && groups[i].isActive == true) {
    user_group.style.display = "block";
  }
}

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.

For more information, see the article: Customizing your help center theme.