Help center JavaScript cookbook

<div class="article-banners">
<div id="docs-wmp-link"><a href="https://support.zendesk.com/hc/en-us/articles/5411234991258-plan" rel="noopener" target="_blank">What's my plan?</a></div>
<div class="article-banner" id="suite_gpee">
<table>
<tbody>
<tr>
<td><strong>All Suites</strong></td>
<td>Growth, Professional, Enterprise, or Enterprise Plus</td>
</tr>
</tbody>
</table>
</div>
<div class="article-banner" id="support_with_guide_all">
<table>
<tbody>
<tr>
<td><strong>Support with</strong></td>
<td>Guide Professional or Enterprise</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="docs-ai-summary">
<p id="docs-ai-summary-toggle">Verified AI summary <span id="up-triangle">◀</span><span id="down-triangle">▼</span></p>
<p id="docs-ai-summary-content">This JavaScript cookbook helps you customize your help center's look and feel using JavaScript and jQuery. You can modify elements like link text, form fields, and language selectors. The guide provides code snippets for tasks such as hiding fields, renaming labels, and adding headers. Note that these customizations apply to older templating versions.</p>
</div>
<div class="body">
<div class="note note">
<span class="notetitle">Note:</span> These recipes apply only if you have help center templating version 3 or earlier. Newer versions of the help center templating language uses React instead of jQuery. See <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408820214554" rel="noopener" target="_blank">About templating versions for help center themes</a> and <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408820214554#topic_llb_t5g_skb__section_psp_hwg_skb" rel="noopener" target="_blank">Checking your templating version</a>.</div>
<p class="p">In templating version 3 or earlier, you can easily customize the look and feel of a help center using JavaScript and jQuery. This cookbook is designed to help you make your help center look the way you want.</p>
<p class="p">jQuery is not provided by default. Make sure that you import a jQuery library if you want to use jQuery statements in a theme in place of vanilla JavaScript. See <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408829274906-Importing-or-upgrading-jQuery" rel="noopener" target="_blank">Importing or upgrading jQuery</a> for more information.</p>
<div class="p">
<div class="note note">
<span class="notetitle">Note:</span> Trial users are given the Professional plan, which includes code editing options, but they can no longer access that feature if they purchase a Team plan.</div>
To access and edit the JavaScript in your help center, see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408839332250#topic_gxl_3qw_n3" rel="noopener" target="_blank">Customizing the CSS or JavaScript</a>.</div>
<p class="p">You can also customize your help center using the Help Center templating language or CSS:</p>
<ul class="ul" id="topic_oxd_zq2_tl__ul_mwl_pw4_4v">
<li class="li"><a class="xref" href="https://developer.zendesk.com/apps/docs/help-center-templates/introduction" rel="noopener" target="_blank">Help center templates reference</a></li>
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408832681626" rel="noopener" target="_blank">Help center templating cookbook</a></li>
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408842914714" rel="noopener" target="_blank">Help center CSS cookbook</a></li>
</ul>
</div>
<div aria-labelledby="ariaid-title2" class="topic nested1" id="topic_oks_1r2_tl">
<h2 class="title topictitle2" id="ariaid-title2">Recipe list</h2>
<div class="body">
<p class="p">We'll be adding more recipes over time but we can never hope to be exhaustive. The number of things you can do with JavaScript is limited only by your imagination. Please post your recipes in the comments section and we'll add them to this cookbook.</p>
<div class="p">
<ul class="ul" id="topic_oks_1r2_tl__ul_ncq_pt4_4v">
<li class="li"><a class="xref" href="#topic_uwl_mq4_4v">Change the My Activities link text</a></li>
<li class="li"><a class="xref" href="#topic_rpj_fg5_ncc">Hide custom fields in the ticket sidebar in My Activities</a></li>
<li class="li"><a class="xref" href="#topic_ikg_yr4_4v">Rename the "Subject" and "Description" labels on the Request form</a></li>
<li class="li"><a class="xref" href="#topic_jbp_fs4_4v">Prepopulate the fields of custom ticket forms</a></li>
<li class="li"><a class="xref" href="#topic_qbk_h54_4v">Change the order of custom fields on the Request form</a></li>
<li class="li"><a class="xref" href="#topic_rkn_s54_4v">Add headers to the Request form</a></li>
<li class="li"><a class="xref" href="#topic_jn1_dv4_4v">Hide a language in the language dropdown</a></li>
<li class="li"><a class="xref" href="#topic_jm5_jv4_4v">Replace text strings in the language selector with flag icons</a></li>
<li class="li"><a class="xref" href="#topic_ujz_vv4_4v">Hide the Community based on the selected language</a></li>
</ul>
</div>
<div class="note note">
<span class="notetitle">Note:</span> When you edit the page templates, CSS, or JavaScript for a standard theme, or when you develop your own theme, it is saved as a <em class="ph i">custom theme</em>. Recipes that require custom themes are <em class="ph i">not</em> supported by Zendesk and are <em class="ph i">not</em> automatically updated when new features or themes are released (see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408821255834" rel="noopener" target="_blank">About standard themes and custom themes in help center</a>).</div>
</div>
</div>
<div aria-labelledby="ariaid-title3" class="topic nested1" id="topic_uwl_mq4_4v">
<h2 class="title topictitle2" id="ariaid-title3">Change the My Activities link text</h2>
<div class="body">
<p class="p">Add the my activities class to the header.hbs template:</p>
<div class="p">
<pre class="pre codeblock"><code>{{link "my_activities" role="menuitem" class='my-activities'}}</code></pre>
</div>
<p class="p">Add the following jQuery statement to the <code class="ph codeph">$(document).ready(function()</code> function in the JavaScript template:</p>
<div class="p">
<pre class="pre codeblock"><code>$(' .my-activities').html(' See my requests');</code></pre>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title4" class="topic nested1" id="topic_rpj_fg5_ncc">
<h2 class="title topictitle2" id="ariaid-title4">Hide custom fields in the ticket sidebar in My Activities</h2>
<div class="body">
<p class="p">You can use JavaScript to hide custom fields in the ticket sidebar on the My Activities page. You select the custom fields based on their labels. For example, if the label of a custom field is "Member rewards", you can hide the field if its label contains "Member" or "rewards" or "Member rewards".</p>
<p class="p">Add the following jQuery function in the script.js file:</p>
<div class="p">
<pre class="pre codeblock"><code>$(document).ready(function() {
if (window.location.href.indexOf('/requests') &gt; -1) {
setTimeout(function() {
$('dt:contains("Member rewards")').hide().next('dd').hide();
// add more selectors as necessary
}, 1000); // adjust the timeout duration as needed
}});</code></pre>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title5" class="topic nested1" id="topic_ikg_yr4_4v">
<h2 class="title topictitle2" id="ariaid-title5">Rename the "Subject" and "Description" labels on the Request form</h2>
<div class="body">
<p class="p">Add the following jQuery statements to the <code class="ph codeph">$(document).ready(function()</code> function in the JavaScript template:</p>
<div class="p">
<pre class="pre codeblock"><code>$('label[for=request_subject]').html("Custom Subject");
$('label[for=request_description]').html("Custom Description");</code></pre>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title6" class="topic nested1" id="topic_jbp_fs4_4v">
<h2 class="title topictitle2" id="ariaid-title6">Prepopulate the fields of custom ticket forms</h2>
<div class="body">
<div class="note note">
<span class="notetitle">Note:</span> Only certain plans support multiple ticket forms. For a list, and for general information about how ticket forms work, see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408846520858" rel="noopener" target="_blank">Creating ticket forms to support multiple request types</a>.</div>
<p class="p">Suppose you use a custom ticket form in your help center to let users register products. You can detect the form and prepopulate its fields when a user opens it in the help center.</p>
<p class="p">You'll need the ticket form ID, which you can find in the form's URL in your help center. See <a class="xref" href="http://screencast.com/t/bxNkmJmq" rel="noopener" target="_blank">this example</a>.</p>
<p class="p">The following jQuery example prepopulates the Subject field with "Product registration" and the Description field with "This is a new product registration". Add the statements to the <code class="ph codeph">$(document).ready(function()</code> function in the JavaScript template:</p>
<div class="p">
<pre class="pre codeblock"><code>var ticketForm = location.search.split('ticket_form_id=')[1];
if(ticketForm == 18570) {
$('section.main-column h1').html('Product Registration');
$('#request_subject').val('Product Registration');
$('#request_description').val('There is a new product registration.');
$('#request_subject').parent('.request_subject').hide(); // Hide subject
$('#request_description').parent('.request_description').hide();
$("&lt;p&gt;Please upload your product receipt here.&lt;p&gt;").insertAfter('label:contains("Attachments")'); // Adds text below "Attachments"
}</code></pre>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title7" class="topic nested1" id="topic_qbk_h54_4v">
<h2 class="title topictitle2" id="ariaid-title7">Change the order of custom fields on the Request form</h2>
<div class="body">
<p class="p">You'll need the ids of the custom fields, which you can find in the Zendesk Support interface. See <a class="xref" href="http://screencast.com/t/Wq4MRelm6" rel="noopener" target="_blank">this example</a>.</p>
<div class="p">
<pre class="pre codeblock"><code>var firstName = $('input#request_custom_fields_22231170').parent();
var lastName = $('input#request_custom_fields_22231180').parent();
firstName.insertBefore($('input#request_subject').parent());
lastName.insertBefore($('input#request_subject').parent());</code></pre>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title8" class="topic nested1" id="topic_rkn_s54_4v">
<h2 class="title topictitle2" id="ariaid-title8">Add headers to the Request form</h2>
<div class="body">
<p class="p">Add the following jQuery statements to the <code class="ph codeph">$(document).ready(function()</code> function in the JavaScript template:</p>
<div class="p">
<pre class="pre codeblock"><code> $('.form-field.request_anonymous_requester_email').prepend('&lt;h2&gt;Your personal information&lt;/h2&gt;')
$('.form-field.request_subject').prepend('&lt;h2&gt;Your issue&lt;/h2&gt;');
$('.form-field.request_custom_fields_21875914').prepend('&lt;h2&gt;Your device information&lt;/h2&gt;');
$('.form-field.request_custom_fields_22033620').prepend('&lt;h2&gt;Your purchase information&lt;/h2&gt;');
$('.form-field &gt; label:contains("Attachments")').prepend('&lt;h2&gt;Support attachments&lt;/h2&gt;');</code></pre>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title9" class="topic nested1" id="topic_jn1_dv4_4v">
<h2 class="title topictitle2" id="ariaid-title9">Hide a language in the language dropdown</h2>
<div class="body">
<p class="p">Hiding a language in the language selector can be useful if the content in that language isn't ready for release. Add the following jQuery statement to the <code class="ph codeph">$(document).ready(function()</code> function in the JavaScript template:</p>
<div class="p">
<pre class="pre codeblock"><code>$("ul.dropdown-panel li a:contains('Français')").hide();</code></pre>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title10" class="topic nested1" id="topic_jm5_jv4_4v">
<h2 class="title topictitle2" id="ariaid-title10">Replace text strings in the language selector with flag icons</h2>
<div class="body">
<p class="p">For example, if your help center provides content in U.S. English and German, you could display the national flags instead of "U.S. English" and "Deutsch" in the language selector. Add the following jQuery statement to the <code class="ph codeph">$(document).ready(function()</code> function in the JavaScript template:</p>
<div class="p">
<pre class="pre codeblock"><code>$(function(){
$('a.dropdown-toggle:contains("English (US)")').html('&lt;img src="http://icons.iconarchive.com/icons/gosquared/flag/48/United-States-flat-icon.png" width="48" height="48"&gt;');
$('a.dropdown-toggle:contains("Deutsch")').html('&lt;img src="http://icons.iconarchive.com/icons/gosquared/flag/48/Germany-flat-icon.png" width="48" height="48"&gt;');
$('a:contains("English (US)")').html('&lt;img src="http://icons.iconarchive.com/icons/gosquared/flag/48/United-States-flat-icon.png" width="48" height="48"&gt;');
$('a:contains("Deutsch")').html('&lt;img src="http://icons.iconarchive.com/icons/gosquared/flag/48/Germany-flat-icon.png" width="48" height="48"&gt;');
});</code></pre>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title11" class="topic nested1" id="topic_ujz_vv4_4v">
<h2 class="title topictitle2" id="ariaid-title11">Hide the Community based on the selected language</h2>
<div class="body">
<p class="p">Add the following jQuery statement to the <code class="ph codeph">$(document).ready(function()</code> function in the JavaScript template:</p>
<div class="p">
<pre class="pre codeblock"><code>if (document.location.pathname.match( (/hc\/de/) || (/hc\/es/) )) {
$('.community').hide();
}</code></pre>
</div>
</div>
</div>
<p>

<script id="ai-summary-script">
//<![CDATA[
const ai_summary_style = document.createElement('style');
ai_summary_style.innerHTML = `#styled-article-body{padding:0 0 0}#article-body #docs-ai-summary{background-color:#f3f3f3;border:1px solid #d3d3d3;padding:10px 10px 6px;margin-bottom:16px}#article-body #docs-ai-summary #docs-ai-summary-toggle{font-size:.9em;font-weight:700;margin-bottom:4px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}#article-body #docs-ai-summary #docs-ai-summary-toggle #up-triangle{margin-left:auto;padding-right:10px;display:none}#article-body #docs-ai-summary #docs-ai-summary-toggle #down-triangle{margin-left:auto;padding-right:10px}#article-body #docs-ai-summary #docs-ai-summary-content{font-size:.9em;padding-left:25px;padding-right:25px;margin-bottom:12px}`;
document.head.appendChild(ai_summary_style);

const toggleAISummary = () => {
const summary = document.getElementById("docs-ai-summary-content");
const upTriangle = document.getElementById("up-triangle");
const downTriangle = document.getElementById("down-triangle");
if (summary.style.display === "none") {
summary.style.display = "block";
upTriangle.style.display = "none";
downTriangle.style.display = "inline";
} else {
summary.style.display = "none";
upTriangle.style.display = "inline";
downTriangle.style.display = "none";
}
};

document.getElementById("docs-ai-summary-toggle").addEventListener("click", toggleAISummary);
//]]>
</script>
</p>