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

<p>Modify the 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 because a user can view the full code with the <strong>View Page Source</strong> function in their web browser.</p><div class="note">
<span class="notetitle"><strong>Disclaimer</strong>:</span> This article is provided for instructional purposes only. Zendesk does not support or guarantee the code.</div><p>This workflow contains the following sections:</p><div class="p"><div class="note important">
<span class="importanttitle">Important:</span> To utilize the code's functionality as expected, use Guide Templating V2 or above. For more information, see <a href="https://developer.zendesk.com/documentation/help_center/help-center-templates/v1/" target="_blank" rel="noopener noreferrer">Upgrading from Templating API v1</a>.</div></div><div style="margin-bottom: 20px; text-align: right;">
<button id="master-toggle" class="btn fw-semibold text-dark" data-action="expand" style="background-color: #DEF991; border: none; outline: none; border-radius: 7px; padding: 10px 20px; font-size: 15px; transition: background-color 0.2s ease;" onmouseover="this.style.backgroundColor='#cbef6d'" onmouseout="this.style.backgroundColor='#DEF991'">
Expand all tabs
</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const toggleBtn = document.getElementById('master-toggle');

toggleBtn.addEventListener('click', function () {
const action = this.getAttribute('data-action');
const headers = document.querySelectorAll('.accordion');

headers.forEach(header => {
const isActive = header.classList.contains('active');
const panel = header.nextElementSibling; // Grabs the corresponding .panel container

if (action === 'expand' && !isActive) {
// Open it by simulating a standard click
header.click();
} else if (action === 'collapse' && isActive) {
// Close it by simulating a standard click
header.click();
}
});

// Flip button text and states
if (action === 'expand') {
this.setAttribute('data-action', 'collapse');
this.textContent = 'Collapse all tabs';
} else {
this.setAttribute('data-action', 'expand');
this.textContent = 'Expand all tabs';
}
});
});
</script><div class="accordion"><h3 id="h_01HTCYHEYVS02FPBB6XSMQEY9Y">Option 1: Hide or show HTML based on user's role</h3></div><div class="panel">
<p>Copy the code snippet below and paste directly below the first <code>&lt;div class="container"&gt;</code> element in the <strong>home_page.hbs</strong> file.</p>
<pre class="wysiwyg-code-block"><code class="language-auto">&lt;div class="anonymous"&gt;
&lt;h1&gt;Welcome Anonymous User!&lt;/h1&gt;
&lt;/div&gt;
&lt;div class="end_user"&gt;
&lt;h1&gt;Welcome End-User!&lt;/h1&gt;
&lt;/div&gt;
&lt;div class="agent"&gt;
&lt;h1&gt;Welcome Agent!&lt;/h1&gt;
&lt;/div&gt;
&lt;div class="manager"&gt;
&lt;h1&gt;Welcome Manager!&lt;/h1&gt;
&lt;/div&gt;
</code></pre>
<p>Insert the below code under the JS template.</p>
<pre class="wysiwyg-code-block"><code class="language-auto">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";
}</code></pre>
<p>Insert the below code under the CSS template.</p>
<pre class="wysiwyg-code-block"><code class="language-auto">div.anonymous, div.end_user, div.agent, div.manager {
width: 100%;
text-align: center;
display: none;
}</code></pre>
</div><div class="accordion"><h3 id="h_01HTCYHEYWN2N48RAZF24VYT7D">Option 2: Hide or show HTML based on user's group</h3></div><div class="panel">
<p>Copy the code snippet below and paste directly below the first <code>&lt;div class="container"&gt;</code> element in the <strong>home_page.hbs</strong> file.</p>
<pre class="wysiwyg-code-block"><code class="language-auto">const user_group = document.querySelector(".user_group")

&lt;div class="user_group"&gt;
&lt;h1&gt;Welcome to L2 Support!&lt;/h1&gt;
&lt;/div&gt;</code></pre>
<p>Insert the below code under the JS template. In this example, replace <code>'L2 Support'</code> with your user group.</p>
<pre class="wysiwyg-code-block"><code class="language-auto">const groups = HelpCenter.user.groups;

for (let i = 0; i &lt; groups.length; i++) {
if (groups[i].name == 'L2 Support' &amp;&amp; groups[i].isActive == true) {
user_group.style.display = "block";
}
}</code></pre>
<p>Insert the below code under the CSS template.</p>
<pre class="wysiwyg-code-block"><code class="language-auto">div.user_group {
width: 100%;
text-align: center;
display: none;
}</code></pre>
<div class="note">
<span class="notetitle"><strong>Note</strong>:</span> 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 <a href="https://support.zendesk.com/hc/en-us/articles/4408829274906-Importing-or-upgrading-jQuery" target="_blank" rel="noopener noreferrer">Importing or upgrading jQuery</a>.</div>
<p>For more information, see <a href="https://support.zendesk.com/hc/en-us/articles/4408839332250" target="_blank" rel="noopener noreferrer">Customizing your help center theme</a>.</p>
</div>