Question
How can I hide or show HTML based on the user's role or group?
Answer
This article contains the following sections:
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. Begin by placing the code 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 following code under the CSS template:
div.anonymous, div.end_user, div.agent, div.manager {
width: 100%;
text-align: center;
display: none;
}
Insert the following 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"; }
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. Begin by placing the code 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 following code under the CSS template:
div.user_group { width: 100%; text-align: center; display: none; }
Insert the following code under the JS template:
if (groups[i].name == 'L2 Support' && groups[i].isActive
== true)
update the ‘L2 Support’ to a group name in the account. 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"; } }
For more information about editing the template of your Help Center, see the article: Customizing your Help Center theme (Guide Professional and Enterprise).