Workflow: How to change the text "Submit a request" in the help center

<p>To change the text of the Submit a request link on your help center, edit the code in your theme.</p><p>The workflow includes the steps below:</p><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_01J5Z5N11GANXJS33HW9P8TRXP">Step 1: Verify the prerequisites</h3></div><div class="panel"><p>This change requires you to <a href="https://support.zendesk.com/hc/en-us/articles/4408839332250-Customizing-your-help-center-theme" target="_blank" rel="noopener noreferrer">edit the theme code</a> of your help center and is available only on Suite Growth plans or higher.</p></div><div class="accordion"><h3 id="h_01HXY1BFCAPEN08R87P7ENG6TS">Step 2: Make a copy of the theme</h3></div><div class="panel">
<p>To change the text of the <strong>Submit a request</strong> link on your help center, replace the text in the code that sets this text.</p>
<p>Before you make changes to your live theme, <a href="https://support.zendesk.com/hc/en-us/articles/4408832558874-Editing-the-code-for-your-live-help-center-theme#topic_fvy_vxp_ccb" target="_blank" rel="noopener noreferrer">make a copy</a> of the theme and update the copied version.</p>
</div><div class="accordion"><h3 id="01HXY1G18XYBGPX37812NDQPP4">Step 3: Change the text</h3></div><div class="panel">
<p>To change the text of the link:</p>
<ol>
<li data-list-item-id="eeacdb1752d442746ca9cff956b41a10c">In <strong>Knowledge admin</strong>, select the icon <strong>Customize design</strong> (<img src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide_icon_customize.png" alt="" id="topic_p3w_wxp_ccb__d8e18">) in the sidebar</li>
<li data-list-item-id="edf693685caac607e30972d2cd3dacdce">On the theme you want to edit, select <strong class="ph b">Customize</strong> to open the theme</li>
<li data-list-item-id="ebbf022456b28d28ccd173121498e254a">Select <strong>Edit code</strong> at the bottom of the page</li>
<li data-list-item-id="eaa22f015626b4c1ec837491e87772ab1">
<p>Select <strong>header.hbs</strong> and replace the code below:</p>
<pre class="wysiwyg-code-block"><code class="language-auto"> {{link 'new_request' class='submit-a-request'}} </code></pre>
<p>with this code:</p>
<pre class="wysiwyg-code-block"><code class="language-auto"> {{#link 'new_request' class='submit-a-request'}}Contact Us{{/link}} </code></pre>
<p>Replace the text <strong>Contact Us</strong> with the text you want to display.</p>
<figure><p><img src="https://support.zendesk.com/hc/article_attachments/10570876208154" alt="edit code.gif" width="1646" height="944"></p></figure>
</li>
<li data-list-item-id="e754d76b0429b784ccdc018ecc072265f">Select <strong>Publish</strong> to save the changes</li>
</ol>
<p>The theme code displays the new text.</p>
<figure><p><img src="https://support.zendesk.com/hc/article_attachments/10570876208410" alt="contact us.png" width="1368" height="854"></p></figure><p>This change alters the display of the link on the home page only and doesn't change breadcrumbs on your site. To update this text wherever it appears, use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank" rel="noopener noreferrer">JavaScript</a> or <a href="http://jquery.com/" target="_blank" rel="noopener noreferrer">jQuery</a>.</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, which might become obsolete over time. Zendesk can't provide support for third-party technologies such as JavaScript, jQuery, or CSS. Post any issues you have in the comments section or try searching for a solution online.</div>
</div>