Workflow: Hide ticket forms based on a user's organization

<p>Create a customized support experience. Present only relevant ticket forms to customers on the help center. In this tutorial, you'll learn how to hide specific ticket forms based on a user's organization.</p><p>The workflow includes the steps below:</p><p>This workflow doesn't work for unauthenticated users or users who don't have an organization. For these users, all forms display.</p><div><div class="note">Note: If the theme uses Guide Templating V2, you must <a href="https://support.zendesk.com/hc/en-us/articles/4408829274906-Importing-or-upgrading-jQuery" target="_blank" rel="noopener noreferrer">import jQuery</a>. This code doesn't apply for Guide Templating V4. For full details, see <a href="https://support.zendesk.com/hc/en-us/articles/4408820214554-About-templating-versions-for-help-center-themes" target="_blank" rel="noopener noreferrer">templating versions for help center themes</a>.</div></div><div class="note">
<strong>Disclaimer</strong>: Use this article for instructional purposes only. Zendesk doesn't support or guarantee the code. Zendesk also can't support third-party technologies such as JavaScript, jQuery, or cascading style sheets (CSS). Post any issues in the comments section or search for a solution online. You also may not be able to use this code if you have a <a href="https://support.zendesk.com/hc/en-us/articles/4408839332250-Customizing-your-help-center-theme" target="_blank" rel="noopener noreferrer">custom theme</a> for the help center rather than the default Copenhagen theme code.</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_01HYA45X69XJDR8508KZJETW4Q">Step 1: Find the ticket form ID</h3></div><div class="panel">
<ol>
<li data-list-item-id="ed1a3bce34e14ec4f48c6f62687031cdc">In <strong>Ticket forms</strong>, open the appropriate ticket form</li>
<li data-list-item-id="ebef16a7e7144ba2c985fda0cbb9c9a0a">In the uniform resource locator (URL), find the ID number after the last slash</li>
</ol>
<p><img src="https://support.zendesk.com/hc/article_attachments/7974093380250" alt="ticket form ID"></p>
</div><div class="accordion"><h3 id="h_01HYA464PW4Z5476PBTQ9N2RYT">Step 2: Find the organization name</h3></div><div class="panel"><ol>
<li data-list-item-id="e222bbd25cfb0ad42e21f3559f0f78ec5">In <strong>Support</strong>, open the <strong>Customers</strong> tab</li>
<li data-list-item-id="e22268a74ea80cac830bbc0f2bc6c71da">Browse or search for organizations to find the right organization name</li>
</ol></div><div class="accordion"><h3 id="h_01HYA4697GZW2FZFDBBKFC0DEC">Step 3: Edit the JavaScript</h3></div><div class="panel">
<p>If the theme uses <a href="https://support.zendesk.com/hc/en-us/articles/4408820214554-About-Guide-templating-versions" target="_blank" rel="noopener noreferrer">Guide Templating V2</a>, you must import jQuery. For full details, 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>. </p>
<p>The code uses a <strong>MutationObserver</strong> to detect changes to the ticket form dropdown. This allows the form-hiding behavior to work in modern Chromium browsers, which no longer support the deprecated <strong>DOMNodeInserted</strong> event.</p>
<p>To edit the code:</p>
<ol>
<li data-list-item-id="e56cc0299653bc0bb4aa6c59a11157d2e">
In
<a href="https://support.zendesk.com/hc/en-us/articles/4408846795674-Getting-started-with-Guide-for-your-help-center-Setting-up#topic_ndf_fpf_mk" target="_blank" rel="noopener noreferrer">Knowledge</a>,
click the <strong>Customize design</strong> icon (<img src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide_icon_customize.png" alt="Customize design icon" id="topic_fvy_vxp_ccb__d6e18">)
in the sidebar
</li>
<li data-list-item-id="e60ab4abf5e8388550c4f71b4f8d4a3af">Click the name of the theme you want to edit</li>
<li data-list-item-id="ec7e6b3e6de391a86525a168254985b1d">
Click the options menu, select <strong>Edit code</strong>, and select
<code>Script.js</code>
</li>
<li data-list-item-id="e7d57a86b3fc61ed3bcc4cee6ca87bd03">Copy the code block below:</li>
<pre dir="ltr"><code class="language-auto">$(document).ready(function() {
var formID = 6502769669773; // Change this to the form ID you wish to remove
var userOrgs = window.HelpCenter.user.organizations;
var userOrgNames = userOrgs.map(org =&gt; org.name);

if (!(userOrgNames.includes("ZENDESK"))) { // Specify the organization name here

function removeForm() {
// Remove the form option from the dropdown
$('#request_issue_type_select option[value="' + formID + '"]').remove();

// Remove the form from the expanded dropdown panel
$('.nesty-panel').children('ul').children().remove('#' + formID);
}

removeForm();

var observer = new MutationObserver(function() {
removeForm();
});

observer.observe(document.body, {
childList: true,
subtree: true
});
}
});</code></pre>

<li data-list-item-id="ef377a1e7ae156417d802211f4d43f170">
Paste the code into the JavaScript template of the help center code
</li>
<li data-list-item-id="ef9fa3702e286fbf8a69baca8ae3ff1ca">
Replace the <code>formID = 6502769669773</code> variable with the ticket
form ID you wish to hide
</li>
<li data-list-item-id="e56750d7b7bc82eb2b0f45af828414db4">
Replace <code>"ZENDESK"</code> with the name of the organization that
you want the ticket form visible to
</li>
<li data-list-item-id="e2bde4bb65864a79c3e277dc3b82d8426">
If you don't copy all characters such as <code>;</code> and <code>}</code>
from the template, the code may break the page
</li>
<li data-list-item-id="ee62d2256e62fdd79e77b44f9b1316ac6">Save the template and publish changes</li>
</ol>
<p>The provided code reserves space for other organizations. To add additional forms and organizations, copy the <code>if</code> statement above and place it under the existing <code>if</code> statement below. Replace the ticket form ID with the correct one and the organization you want to check. Repeat this for however many ticket forms and organizations you want.</p>
<p>To change the code behavior to display one ticket form to all organizations except the one specified, remove the <code>NOT</code> operator <code>(!)</code> from the <code>if</code> statement.</p>
<pre class="language-auto">for (var c in HelpCenter.user.organizations) {
if (HelpCenter.user.organizations[c].name !== "ZENDESK"){
$("#TICKT_FORM_ID").remove();
}
if (HelpCenter.user.organizations[c].name !== "MYORG"){
$("#TICKET_FORM_ID2").remove();
} </pre>
</div>