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.
This workflow contains the following sections:
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"; } }
For more information, see the article: Customizing your help center theme.