Help center templating cookbook

<body>
<p id="docs-hc-snippet" style="display: none;">Each help center theme consists of a collection of editable page templates and custom pages. You can use the help center templating language, Curlybars, to access help center data and manipulate the content in your pages.</p>
<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>Knowledge Professional or Enterprise</td>
</tr>
</tbody>
</table>
</div>

</div>
<div id="docs-ai-summary">
<p id="docs-ai-summary-toggle">Summary: <span id="up-triangle">◀</span><span id="down-triangle">▼</span></p>
<p id="docs-ai-summary-content">You can customize your help center using the Curlybars templating language to modify page templates, language selectors, article editor components, search features, user profiles, and more. This includes adding generative search, sorting options, voting, badges, service catalogs, and approvals. Custom themes may require code updates to support new features and improve user experience across articles, requests, comments, and search results.</p>
</div>

<div class="body">

<div class="p">
<div class="note">
<span class="notetitle">Note:</span> This article is provided for instructional purposes only. Zendesk does not support or
guarantee custom code.</div>
</div>
<p class="p">Each help center theme consists of a collection of editable page templates and custom pages.
You can use the help center templating language, Curlybars, to access help center data and
manipulate the content in your pages. </p>
<p class="p">This article provides a list of recipes with code snippets you can use. Keep in mind that,
some of the functionality in these recipes might already be in your help center, depending on
whether you are using <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408839332250#topic_zkg_rxf_sv" target="_blank">a standard theme or a customized theme</a> and the date you enabled your
help center. </p>
<p class="p">Trial users are given the Professional plan, which includes code editing options, but they
will no longer be able to access that feature if they purchase Suite Team.</p>
<div class="p">This article covers the following topics:<ul class="ul" id="topic_oxd_zq2_tl__ul_5xz_rmw_1x">
<li class="li"><a class="xref" href="#topic_tdd_zhw_1x">About the Curlybars templating
language</a></li>
<li class="li"><a class="xref" href="#topic_osm_kmn_4v">Customize page templates for specific
categories, sections, or articles</a></li>
<li class="li"><a class="xref" href="#topic_fvh_xxn_4v">Customize the language names in the
language selector</a></li>
<li class="li"><a class="xref" href="#topic_j2c_nhg_bkc">Customize callouts in the article editor</a></li>
<li class="li"><a class="xref" href="#topic_ept_tmg_bkc">Customize tabs in the article editor</a></li>
<li class="li"><a class="xref" href="#topic_y23_hwm_fkc">Customize tabs behavior with javascript</a></li>
<li class="li"><a class="xref" href="#topic_nzs_mng_bkc">Customize accordions in the article editor</a></li>
<li class="li"><a class="xref" href="#topic_gml_414_4v">Hide one or more languages in the language
selector</a></li>
<li class="li"><a class="xref" href="#topic_yhc_nfg_x5">Let users sort article comments by date or
votes</a></li>
<li class="li"><a class="xref" href="#topic_bb5_2jf_x5">Add a formatting toolbar to the article
comment editor</a></li>
<li class="li"><a class="xref" href="#topic_eb2_grf_x5">Enable users to vote on article
comments</a></li>
<li class="li"><a class="xref" href="#topic_xqw_dd1_cw">Add Instant Search (autocomplete) results
to your help center</a></li>
<li class="li"><a class="xref" href="#topic_tn4_sgw_frb">Add Federated Search to include external content in help center search</a></li>
<li class="li"><a class="xref" href="#topic_tjl_xqc_42c">Add generative search results to your custom theme</a></li>
<li class="li"><a class="xref" href="#topic_h4p_wbj_jhc">Add the new request list experience to your custom theme</a></li>
<li class="li"><a class="xref" href="#topic_ljq_jch_jw">Add sorting for subscription types in the
My Activities Following page</a></li>
<li class="li"><a class="xref" href="#topic_nbr_ytj_dx">Add sorting options “created at” and
“updated at” for requests in My Activities</a></li>
<li class="li"><a class="xref" href="#topic_ccb_5g1_qw">Add Follow/Unfollow for users in a shared
organization</a></li>
<li class="li"><a class="xref" href="#topic_2hj_jqw_1x">Add ability for users to CC other users on
support requests</a></li>
<li class="li"><a class="xref" href="#topic_why_ysj_dx">Add a link on follow-up requests to the
parent request</a></li>
<li class="li"><a class="xref" href="#topic_nl4_tnx_ycc">Enable CSAT for solved tickets on the
Customer Portal</a></li>
<li class="li"><a class="xref" href="#topic_bjk_fdq_4y">Add voting buttons to articles</a></li>
<li class="li"><a class="xref" href="#topic_bzl_b23_kvb">Add content tags to articles and
posts</a></li>
<li class="li"><a class="xref" href="#topic_tg5_cqx_xmb">Add badges to your custom help center
theme</a></li>
<li class="li"><a class="xref" href="#topic_tq5_fn1_sgb">Enable users to view user profiles to your help center</a></li>
<li class="li"><a class="xref" href="#topic_k23_2bj_chb">Enable subsections in your help center theme</a></li>
<li class="li"><a class="xref" href="#topic_ykx_gms_y3b">Add sidebar filters and results for multiple help centers to the search results page</a></li>
<li class="li"><a class="xref" href="#topic_hcb_nws_l4">Adding the spam filter to help center</a></li>
<li class="li"><a class="xref" href="#topic_xrf_2r4_yfc">Adding approvals to your help center</a></li>
<li class="li"><a class="xref" href="#topic_r3w_fr4_yfc">Adding the service catalog to your help center</a></li>
<li class="li"><a class="xref" href="#topic_xnr_cyz_hkc">Adding support for multi-lookup fields to your help center</a></li>
</ul>
</div>
</div>
<div aria-labelledby="ariaid-title2" class="topic nested1" id="topic_tdd_zhw_1x">
<h2 class="title topictitle2" id="ariaid-title2">About the Curlybars templating language</h2>
<div class="body">
<p class="p">Your help center is built on a theming framework that includes its own templating language
for advanced customizations. Each help center theme consists of a collection of editable
templates and optional custom pages<a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408839332250-Customizing-Help-Center#topic_h5c_k4w_n3" target="_blank">.</a></p>
<p class="p"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408839332250-Customizing-Help-Center#topic_h5c_k4w_n3" target="_blank">Editable page templates</a> define the layout of each
page. For example, there's a template for knowledge base articles, a template for the list
of requests, and so on. A template is simply a text file to be rendered into an HTML page
when a user wants to see it. Each template consists of a mix of HTML markup and expressions
identifiable by double curly brackets such as <code class="ph codeph">{{post.title}}</code>. </p>
<p class="p"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4409012911770" target="_blank">Custom pages </a>are built into the code base of your help center
theme and have a specific URL that you can link from anywhere in your help center. You can
use custom pages to create and code pages from scratch that meet your individual
requirements. For example, you can use custom pages to create special landing pages for your
help center or even create new pages to embed content from sources outside of Zendesk. </p>
<p class="p">The templating language is named Curlybars and implements a large subset of the <a class="xref" href="http://handlebarsjs.com/" target="_blank">Handlebars</a> language.
But unlike Handlebars which renders on the client-side, Curlybars renders on the
server-side.</p>
<p class="p">You can use the help center templating language to access help center data and manipulate
the content in your pages. In the following example, help center renders a list of names and
avatars of all the people who left comments on the page:</p>
<div class="p">
<pre class="pre codeblock"><code>{{#each comments}}
&lt;li&gt;
&lt;div class="comment-avatar"&gt;
&lt;img src="{{author.avatar_url}}" alt="Avatar" /&gt;
&lt;/div&gt;
&lt;div class="comment-author"&gt;
{{author.name}}
&lt;/div&gt;
&lt;/li&gt;
{{/each}} </code></pre>
</div>
<p class="p">Previously you could use components to customize help center, but you could not customize
the components themselves, except for manipulating them with Javascript. With Curlybars you
can get access to the HTML that was previously hidden inside component and edit it.</p>
<div class="p">For more information, see:<ul class="ul" id="topic_tdd_zhw_1x__ul_4yv_wl5_cx">
<li class="li"><a class="xref" href="https://developer.zendesk.com/apps/docs/help-center-templates/introduction" target="_blank">Help center templating language reference</a></li>
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408824571674" target="_blank">Using the help center templating language</a></li>
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408839332250#topic_qp2_2tr_nt" target="_blank">Customizing content with Curlybars</a></li>
</ul>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title3" class="topic nested1" id="topic_osm_kmn_4v">
<h2 class="title topictitle2" id="ariaid-title3">Customize page templates for specific categories, sections, or articles</h2>
<div class="body">
<p class="p">You can customize the Category, Section, and Article templates for specific categories,
sections, and articles respectively.</p>
<div class="p">
<strong class="ph b">Applicable templates</strong><ul class="ul" id="topic_osm_kmn_4v__ul_elm_pmn_4v">
<li class="li">Category</li>
<li class="li">Section</li>
<li class="li">Article</li>
</ul>
</div>
<div class="p">
<strong class="ph b">Recipe</strong><ul class="ul" id="topic_osm_kmn_4v__ul_ilm_pmn_4v">
<li class="li">Specify the category, section, or article id in a <code class="ph codeph">is</code> block:<div class="p">
<pre class="pre codeblock"><code>{{#is id 200646205}}
...
{{/is}}</code></pre>
</div>
</li>
</ul>
</div>
<p class="p"><strong class="ph b">Example</strong></p>
<p class="p">Inserting the following block in the Section template customizes the template for sections
200646205 and 203133596:</p>
<div class="p">
<pre class="pre codeblock"><code>{{#is section.id 200646205}}
&lt;p&gt;&lt;strong&gt;This is important security information! Pay attention!&lt;/strong&gt;&lt;/p&gt;
{{/is}}
{{#is section.id 203133596}}
&lt;p&gt;Videos available at &lt;a href="https://www.somelink.com"&gt;Learning to fly&lt;/a&gt;&lt;/p&gt;
{{/is}}</code></pre>
</div>
<p class="p"><strong class="ph b">Reference</strong></p>
<div class="p">
<ul class="ul" id="topic_osm_kmn_4v__ul_klm_pmn_4v">
<li class="li"><a class="xref" href="https://developer.zendesk.com/apps/docs/help-center-templates/helpers#is-helper" target="_blank">is helper</a></li>
</ul>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title4" class="topic nested1" id="topic_fvh_xxn_4v">
<h2 class="title topictitle2" id="ariaid-title4">Customize the language names in the language selector</h2>
<div class="body">
<p class="p">You can customize the language names in the language selector on every page of help center.
This is useful if you want to use one language variant, such as "English (U.S.)", for all
the language's variants, such as "English".</p>
<div class="p">
<strong class="ph b">Applicable template</strong><ul class="ul" id="topic_fvh_xxn_4v__ul_z35_zxn_4v">
<li class="li">Header</li>
</ul>
<strong class="ph b">Applicable expression</strong><ul class="ul" id="topic_fvh_xxn_4v__ul_bry_xyn_4v">
<li class="li"><code class="ph codeph">{{#if alternative_locales}}...{{/if}}</code></li>
</ul>
</div>
<div class="p">
<strong class="ph b">Recipe</strong><ul class="ul" id="topic_fvh_xxn_4v__ul_bj5_zxn_4v">
<li class="li">Replace the <code class="ph codeph">{{current_locale.name}}</code> expression with the following
conditional expression:<div class="p">
<pre class="pre codeblock"><code>{{#is current_locale.name 'English (US)'}}
English
{{else}}
{{current_locale.name}}
{{/is}}</code></pre>
</div>
<p class="p">Also replace the alternative locale <code class="ph codeph">{{name}}</code> expression with the
following conditional expression:</p>
<div class="p">
<pre class="pre codeblock"><code>{{#is name 'English (US)'}}
English
{{else}}
{{name}}
{{/is}}</code></pre>
</div>
</li>
</ul>
</div>
<p class="p"><strong class="ph b">Example</strong></p>
<div class="p">
<pre class="pre codeblock"><code>{{#if alternative_locales}}
&lt;div class="dropdown language-selector" aria-haspopup="true"&gt;
&lt;a class="dropdown-toggle"&gt;
{{#is current_locale.name 'English (US)'}}
English
{{else}}
{{current_locale.name}}
{{/is}}
&lt;/a&gt;
&lt;span class="dropdown-menu dropdown-menu-end" role="menu"&gt;
{{#each alternative_locales}}
&lt;a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem"&gt;
{{#is name 'English (US)'}}
English
{{else}}
{{name}}
{{/is}}
&lt;/a&gt;
{{/each}}
&lt;/span&gt;
&lt;/div&gt;
{{/if}}</code></pre>
</div>
<p class="p"><strong class="ph b">Reference</strong></p>
<div class="p">
<ul class="ul" id="topic_fvh_xxn_4v__ul_dj5_zxn_4v">
<li class="li"><a class="xref" href="https://developer.zendesk.com/apps/docs/help-center-templates/helpers#is-helper" target="_blank">is helper</a></li>
</ul>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title5" class="topic nested1" id="topic_j2c_nhg_bkc">
<h2 class="title topictitle2" id="ariaid-title5">Customize callouts in the article editor</h2>
<div class="body">
<p class="p">Base styling for help center article editor components is driven by a supported set of
--zd-wysiwyg-* CSS custom properties. You can override them in consumer CSS to theme
components. Further customization by targeting elements directly is supported on a best
effort case, meaning the component structure might change.</p>
<div class="p">
<strong class="ph b">Applicable template</strong><ul class="ul" id="topic_j2c_nhg_bkc__ul_ngt_whg_bkc">
<li class="li">Article</li>
</ul>
</div>
<div class="p">
<strong class="ph b">Applicable HTML element</strong><ul class="ul" id="topic_j2c_nhg_bkc__ul_cvf_53g_bkc">
<li class="li" dir="ltr">
<p class="p" dir="ltr">Callouts (.wysiwyg-callout.wysiwyg-callout-{type})</p>
</li>
</ul>
</div>
<p class="p"><strong class="ph b">Recipe</strong></p>
<div class="p" dir="ltr">
<div class="tablenoborder">
<table border="1" cellpadding="4" cellspacing="0" class="table" frame="border" id="topic_j2c_nhg_bkc__table_qh2_zjg_bkc" rules="all" summary="">
<colgroup>
<col style="width:50%">
<col style="width:50%">
</colgroup>
<thead class="thead" style="text-align:left;">
<tr class="row">
<th class="entry cellrowborder" id="d89e487" style="vertical-align:top;">Property</th>
<th class="entry cellrowborder" id="d89e490" style="vertical-align:top;">Purpose</th>
</tr>
</thead>
<tbody class="tbody">
<tr class="row">
<td class="entry cellrowborder" colspan="2" headers="d89e487 d89e490" style="vertical-align:top;"><strong class="ph b">Container-level properties (apply to all
variants)</strong></td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d89e487" style="vertical-align:top;">--zd-wysiwyg-callout-border-radius</td>
<td class="entry cellrowborder" headers="d89e490" style="vertical-align:top;">Corner radius of the container</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d89e487" style="vertical-align:top;">--zd-wysiwyg-callout-icon-size</td>
<td class="entry cellrowborder" headers="d89e490" style="vertical-align:top;">Square size of the variant icon</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" colspan="2" headers="d89e487 d89e490" style="vertical-align:top;"><strong class="ph b">Per-variant, where `{type}` is one of info,
warning, error, tip</strong></td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d89e487" style="vertical-align:top;">--zd-wysiwyg-callout-{type}-bg</td>
<td class="entry cellrowborder" headers="d89e490" style="vertical-align:top;">Variant background color</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d89e487" style="vertical-align:top;">--zd-wysiwyg-callout-{type}-icon-color</td>
<td class="entry cellrowborder" headers="d89e490" style="vertical-align:top;">Variant icon tint</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d89e487" style="vertical-align:top;">--zd-wysiwyg-callout-{type}-icon</td>
<td class="entry cellrowborder" headers="d89e490" style="vertical-align:top;">
<p class="p" dir="ltr">Variant icon as a url(...) (SVG data URI); applied as a CSS mask and
tinted by the icon-color property above</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title6" class="topic nested1" id="topic_ept_tmg_bkc">
<h2 class="title topictitle2" id="ariaid-title6">Customize tabs in the article editor</h2>
<div class="body">
<p class="p">Tabs are rendered as disclosure (expandable content) for broader support and progressively
enhanced with javascript to add a tab bar and interactivity.Base styling is driven by a
supported set of --zd-wysiwyg-* CSS custom properties. Override them in consumer CSS to
theme components. Further customization by targeting elements directly is supported on a
best effort case, meaning the component structure might change. </p>
<div class="p">
<strong class="ph b">Applicable template</strong><ul class="ul" id="topic_ept_tmg_bkc__ul_mzb_wmg_bkc">
<li class="li">Article</li>
</ul>
</div>
<p class="p"><strong class="ph b">Applicable HTML element</strong></p>
<ul class="ul" id="topic_ept_tmg_bkc__ul_yzr_wmg_bkc">
<li class="li">Tabs (.wysiwyg-tabs-active)</li>
</ul>
<p class="p"><strong class="ph b">Recipe</strong></p>
<div class="tablenoborder">
<table border="1" cellpadding="4" cellspacing="0" class="table" frame="border" id="topic_ept_tmg_bkc__table_i5q_ymg_bkc" rules="all" summary="">
<colgroup>
<col style="width:50%">
<col style="width:50%">
</colgroup>
<thead class="thead" style="text-align:left;">
<tr class="row">
<th class="entry cellrowborder" id="d89e612" style="vertical-align:top;">Property</th>
<th class="entry cellrowborder" id="d89e615" style="vertical-align:top;">Purpose</th>
</tr>
</thead>
<tbody class="tbody">
<tr class="row">
<td class="entry cellrowborder" headers="d89e612" style="vertical-align:top;">--zd-wysiwyg-tabs-color</td>
<td class="entry cellrowborder" headers="d89e615" style="vertical-align:top;">Selected tab's text color, underline, and focus-ring accent</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d89e612" style="vertical-align:top;">--zd-wysiwyg-disclosure-border-color</td>
<td class="entry cellrowborder" headers="d89e615" style="vertical-align:top;">Tabs baseline</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title7" class="topic nested1" id="topic_y23_hwm_fkc">
<h2 class="title topictitle2" id="ariaid-title7">Customize tabs behavior with javascript</h2>
<div class="body">
<p class="p">If your help center uses a custom theme and you want to implement your own tab behavior
(for example, custom animations, analytics, or framework integrations), you can turn off the
built-in tabs JavaScript. This allows you to keep using the tabs authoring experience in the
editor while taking full control over how tabs behave on the published page.</p>
<p class="p">To do this, add the <code class="ph codeph">data-wysiwyg-tabs-no-init</code> attribute to any ancestor
element that wraps your article content. The built-in tab script checks for this attribute
and skips initialization for all tabs within that subtree. Without it, tabs render as native
<code class="ph codeph">&lt;details&gt;</code> disclosure elements (no tab bar) - your script is then
responsible for adding tab behavior.</p>
<div class="p">
<strong class="ph b">Applicable template</strong><ul class="ul" id="topic_y23_hwm_fkc__ul_gdv_lwm_fkc">
<li class="li">Article</li>
</ul>
</div>
<p class="p"><strong class="ph b">Recipe</strong></p>
<p class="p">In the Article page template, add the attribute to a container wrapping
<code class="ph codeph">{{article.body}}</code>:</p>
<div class="p">
<pre class="pre codeblock" id="topic_y23_hwm_fkc__codeblock_avw_ywm_fkc"><code>&lt;div class="article-body" data-wysiwyg-tabs-no-init&gt;{{article.body}}&lt;/div&gt;</code></pre>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title8" class="topic nested1" id="topic_nzs_mng_bkc">
<h2 class="title topictitle2" id="ariaid-title8">Customize accordions in the article editor</h2>
<div class="body">
<p class="p">Base styling is driven by a supported set of --zd-wysiwyg-* CSS custom properties. Override
them in consumer CSS to theme components. Further customization by targeting elements
directly is supported on a best effort case, meaning the component structure might change. </p>
<div class="p">
<strong class="ph b">Applicable template</strong><ul class="ul" id="topic_nzs_mng_bkc__ul_lxg_4ng_bkc">
<li class="li">Article</li>
</ul>
</div>
<p class="p"><strong class="ph b">Applicable HTML element</strong></p>
<ul class="ul" id="topic_nzs_mng_bkc__ul_mxg_4ng_bkc">
<li class="li">Accordion ( .wysiwyg-disclosure)</li>
</ul>
<p class="p"><strong class="ph b">Recipe</strong></p>
<div class="tablenoborder">
<table border="1" cellpadding="4" cellspacing="0" class="table" frame="border" id="topic_nzs_mng_bkc__table_nxg_4ng_bkc" rules="all" summary="">
<colgroup>
<col style="width:50%">
<col style="width:50%">
</colgroup>
<thead class="thead" style="text-align:left;">
<tr class="row">
<th class="entry cellrowborder" id="d89e738" style="vertical-align:top;">Property</th>
<th class="entry cellrowborder" id="d89e741" style="vertical-align:top;">Purpose</th>
</tr>
</thead>
<tbody class="tbody">
<tr class="row">
<td class="entry cellrowborder" headers="d89e738" style="vertical-align:top;">--zd-wysiwyg-disclosure-border-color</td>
<td class="entry cellrowborder" headers="d89e741" style="vertical-align:top;">Hairline between panels (and tabs baseline)</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d89e738" style="vertical-align:top;">--zd-wysiwyg-disclosure-header-bg</td>
<td class="entry cellrowborder" headers="d89e741" style="vertical-align:top;">Resting background of the &lt;summary&gt;</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d89e738" style="vertical-align:top;">--zd-wysiwyg-disclosure-header-bg-hover</td>
<td class="entry cellrowborder" headers="d89e741" style="vertical-align:top;">Hovered background of the &lt;summary&gt;</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d89e738" style="vertical-align:top;">--zd-wysiwyg-disclosure-transition-duration</td>
<td class="entry cellrowborder" headers="d89e741" style="vertical-align:top;">Duration of the header hover and chevron rotation transitions</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title9" class="topic nested1" id="topic_gml_414_4v">
<h2 class="title topictitle2" id="ariaid-title9">Hide one or more languages in the language selector</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.</p>
<div class="p">
<strong class="ph b">Applicable template</strong><ul class="ul" id="topic_gml_414_4v__ul_pml_414_4v">
<li class="li">Header</li>
</ul>
<strong class="ph b">Applicable expression</strong><ul class="ul" id="topic_gml_414_4v__ul_qml_414_4v">
<li class="li"><code class="ph codeph">{{#each alternative_locales}}...{{/each}}</code></li>
</ul>
</div>
<div class="p">
<strong class="ph b">Recipe</strong><ul class="ul" id="topic_gml_414_4v__ul_tml_414_4v">
<li class="li">Replace the <code class="ph codeph">&lt;a href="{{url}}" dir="{{direction}}" rel="nofollow"
role="menuitem"&gt; {{name}} &lt;/a&gt;</code> expression with the following
conditional expression:<div class="p">
<pre class="pre codeblock"><code>{{#is name 'Français'}}
{{! do nothing }}
{{else}}
&lt;a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem"&gt;
{{name}}
&lt;/a&gt;
{{/is}}</code></pre>
</div>
</li>
</ul>
</div>
<p class="p"><strong class="ph b">Example</strong></p>
<div class="p">
<pre class="pre codeblock"><code>{{#each alternative_locales}}
{{#is name 'Français'}}
{{! do nothing }}
{{else}}
&lt;a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem"&gt;
{{name}}
&lt;/a&gt;
{{/is}}
{{/each}}</code></pre>
</div>
<p class="p"><strong class="ph b">Reference</strong></p>
<div class="p">
<ul class="ul" id="topic_gml_414_4v__ul_xml_414_4v">
<li class="li"><a class="xref" href="https://developer.zendesk.com/apps/docs/help-center-templates/helpers#is-helper" target="_blank">is helper</a></li>
</ul>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title10" class="topic nested1" id="topic_yhc_nfg_x5">
<h2 class="title topictitle2" id="ariaid-title10">Let users sort article comments by date or votes</h2>
<div class="body">
<p class="p">By default, article comments are sorted by date from the most recent to the least. You can
add Date and Votes links that users can click to sort the comments by date or by the number
of votes.</p>
<div class="p">
<div class="note">
<span class="notetitle">Note:</span> The Date and Votes sorting links are available by default in <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408839332250#topic_zkg_rxf_sv" target="_blank">standard themes</a> and themes that were customized after November
30th, 2015.</div>
</div>
<div class="p">
<strong class="ph b">Applicable template</strong><ul class="ul" id="topic_yhc_nfg_x5__ul_czb_wfg_x5">
<li class="li">Article</li>
</ul>
</div>
<div class="p">
<strong class="ph b">Applicable HTML element</strong><ul class="ul" id="topic_yhc_nfg_x5__ul_ezb_wfg_x5">
<li class="li"><code class="ph codeph">&lt;section class="article-comments"&gt;...&lt;/section&gt;</code></li>
</ul>
</div>
<div class="p">
<strong class="ph b">Recipe</strong><ul class="ul" id="topic_yhc_nfg_x5__ul_fzb_wfg_x5">
<li class="li">Insert the following div tag after the comment section's heading tag,
<code class="ph codeph">&lt;h2&gt;{{t 'comments'}}&lt;/h2&gt;</code>, preferably after the
<code class="ph codeph">{{#if comments}}</code> expression, if any, to ensure the sorters don't
appear if nobody left comments yet:<div class="p">
<pre class="pre codeblock"><code>&lt;div class="comment-sorter"&gt;
Sort by:
{{#each comment_sorters}}
&lt;a aria-selected="{{selected}}" href="{{url}}"&gt;{{name}}&lt;/a&gt;
{{/each}}
&lt;/div&gt; </code></pre>
</div>
</li>
</ul>
</div>
<p class="p"><strong class="ph b">Example</strong></p>
<div class="p">
<pre class="pre codeblock"><code>&lt;section class="article-comments"&gt;
&lt;h2&gt;{{t 'comments'}}&lt;/h2&gt;
{{#if comments}}

<strong class="ph b">&lt;div class="comment-sorter"&gt;
Sort by:
{{#each comment_sorters}}
&lt;a aria-selected="{{selected}}" href="{{url}}"&gt;{{name}}&lt;/a&gt;
{{/each}}
&lt;/div&gt;</strong>

&lt;ul class="comment-list"&gt;
{{#each comments}}
...</code></pre>
</div>
<p class="p"><strong class="ph b">Reference</strong></p>
<div class="p">
<ul class="ul" id="topic_yhc_nfg_x5__ul_gzb_wfg_x5">
<li class="li">
<a class="xref" href="https://developer.zendesk.com/apps/docs/help-center-templates/article_page#available-properties" target="_blank">comment_sorters property</a>
</li>
</ul>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title11" class="topic nested1" id="topic_bb5_2jf_x5">
<h2 class="title topictitle2" id="ariaid-title11">Add a formatting toolbar to the article comment editor</h2>
<div class="body">
<p class="p">You can add a formatting toolbar to the editor for article comments. Users can add bold and
italics, unordered or ordered lists, images, and links.</p>
<div class="p">
<div class="note">
<span class="notetitle">Note:</span> The formatting toolbar is available by default in <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408839332250#topic_zkg_rxf_sv" target="_blank">standard themes</a> and themes that were customized after November
30th, 2015.</div>
</div>
<div class="p">
<strong class="ph b">Applicable template</strong><ul class="ul" id="topic_bb5_2jf_x5__ul_k24_dpf_x5">
<li class="li">Article</li>
</ul>
</div>
<div class="p">
<strong class="ph b">Applicable object</strong><ul class="ul" id="topic_bb5_2jf_x5__ul_r2w_fpf_x5">
<li class="li"><code class="ph codeph">{{#form 'comment'}}...{{/form}}</code></li>
</ul>
</div>
<div class="p">
<strong class="ph b">Recipe</strong><ul class="ul" id="topic_bb5_2jf_x5__ul_p1b_4pf_x5">
<li class="li">Find and replace the <code class="ph codeph">{{textarea 'body'}}</code> expression in the form
object with <code class="ph codeph">{{wysiwyg 'body'}}</code>
</li>
</ul>
</div>
<p class="p"><strong class="ph b">Example</strong></p>
<div class="p">
<pre class="pre codeblock"><code>{{#form 'comment' class='comment-form'}}
&lt;div class="comment-avatar"&gt;
{{user_avatar class='user-avatar'}}
&lt;/div&gt;

&lt;div class="comment-container"&gt;
<strong class="ph b">{{wysiwyg 'body'}}</strong>
&lt;div class="comment-form-controls"&gt;
{{input type='submit'}}
&lt;/div&gt;
&lt;/div&gt;
{{/form}}</code></pre>
</div>
<p class="p"><strong class="ph b">Reference</strong></p>
<div class="p">
<ul class="ul" id="topic_bb5_2jf_x5__ul_aym_bqf_x5">
<li class="li">
<a class="xref" href="https://developer.zendesk.com/apps/docs/help-center-templates/advanced_helpers#wysiwyg-helper" target="_blank">wysiwyg helper</a>
</li>
</ul>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title12" class="topic nested1" id="topic_eb2_grf_x5">
<h2 class="title topictitle2" id="ariaid-title12">Enable users to vote on article comments</h2>
<div class="body">
<p class="p">By default, users can vote on articles. You can also let them vote on article comments.</p>
<div class="p">
<div class="note">
<span class="notetitle">Note:</span> The voting links are available by default in <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408839332250#topic_zkg_rxf_sv" target="_blank">standard themes</a> and themes that were customized after November
30th, 2015.</div>
</div>
<div class="p">
<strong class="ph b">Applicable template</strong><ul class="ul" id="topic_eb2_grf_x5__ul_clf_mrf_x5">
<li class="li">Article</li>
</ul>
</div>
<div class="p">
<strong class="ph b">Applicable expression</strong><ul class="ul" id="topic_eb2_grf_x5__ul_elf_mrf_x5">
<li class="li"><code class="ph codeph">{{#each comments}}...{{/each}}</code></li>
</ul>
</div>
<div class="p">
<strong class="ph b">Recipe</strong><ul class="ul" id="topic_eb2_grf_x5__ul_glf_mrf_x5">
<li class="li">Insert the following div tag after the <code class="ph codeph">&lt;li id="{{anchor}}"&gt;</code> tag:<div class="p">
<pre class="pre codeblock"><code>&lt;div class="comment-vote vote"&gt;
{{vote 'up' class="article-vote-up" selected_class="vote-voted"}}
{{vote 'sum' class="article-vote-sum"}}
{{vote 'down' class="article-vote-down" selected_class="vote-voted"}}
&lt;/div&gt;</code></pre>
</div>
<p class="p">The vote helpers above borrow the CSS classes for articles votes to style the
comment vote links. You can define your own classes to style the comment
votes.</p>
</li>
</ul>
</div>
<p class="p"><strong class="ph b">Example</strong></p>
<div class="p">
<pre class="pre codeblock"><code>{{#each comments}}
&lt;li id="{{anchor}}" class="comment"&gt;

<strong class="ph b"> &lt;div class="comment-vote vote"&gt;
{{vote 'up' class="article-vote-up" selected_class="vote-voted"}}
{{vote 'sum' class="article-vote-sum"}}
{{vote 'down' class="article-vote-down" selected_class="vote-voted"}}
&lt;/div&gt;</strong>

&lt;div class="comment-avatar {{#if author.agent}} comment-avatar-agent {{/if}}"&gt;
&lt;img src="{{author.avatar_url}}" alt="Avatar"&gt;
&lt;/div&gt;
...</code></pre>
</div>
<p class="p"><strong class="ph b">Reference</strong></p>
<div class="p">
<ul class="ul" id="topic_eb2_grf_x5__ul_ilf_mrf_x5">
<li class="li">
<a class="xref" href="https://developer.zendesk.com/apps/docs/help-center-templates/helpers#vote-helper" target="_blank">vote helper</a>
</li>
</ul>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title13" class="topic nested1" id="topic_tjl_xqc_42c">
<h2 class="title topictitle2" id="ariaid-title13">Add generative search results to your custom theme</h2>
<div class="body">
<p class="p">Generative search provides AI-generated answers to search queries within your help center.
Generative search provides users who are performing searches in the help center with answers
to their questions, without requiring them to click through multiple search results.</p>
<div class="note" id="topic_tjl_xqc_42c__note_tbd_x4c_42c">
<span class="notetitle">Note:</span> Generative search is available by default in <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408845834522" target="_blank">standard themes</a> released after March 26, 2025. If your help center
was created before March 26, 2025 and uses a customized theme, you must update your custom
theme to add generative search. Generative search is available for all templating API
versions. You can disable generative search, if needed, by deactivating it in your <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/5589418656922" target="_blank">search settings</a>.</div>
<div class="note" id="topic_tjl_xqc_42c__note_wvq_j5p_chc">
<span class="notetitle">Note:</span> Based on your theme implementation and other factors, you may be
eligible to use the automatic theme updater for generative search. To learn more, see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/9809445946778" target="_blank">Automatically updating your help center theme for generative search
(Beta).</a>
</div>
<p class="p">After generative search is activated, it works by evaluating the questions users enter in
the help center search. The top matching articles and posts are evaluated by generative AI,
which then generates an answer. On Enterprise plans with <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4593564000410" target="_blank">federated search</a> configured, the generative AI also evaluates
external content and can be included in the answer. The generated answer is posted by
default at the top of the search results. See <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/8888178335898" target="_blank">Using generative search to provide AI-powered answers to search
queries</a>. </p>
<div class="p">
<strong class="ph b">Applicable template</strong><ul class="ul" id="topic_tjl_xqc_42c__ul_p2g_rrc_42c">
<li class="li">Search results page (search_results.hbs)</li>
</ul>
</div>
<div class="p">
<strong class="ph b">Recipe</strong><ul class="ul" id="topic_tjl_xqc_42c__ul_r2g_rrc_42c">
<li class="li">Add the <code class="ph codeph">{{generative_answers}}</code> helper to the theme's
search_results.hbs template where you want the generative answers to appear.</li>
</ul>
</div>
<p class="p"><strong class="ph b">Example</strong></p>
<div class="p">
<pre class="pre codeblock" id="topic_tjl_xqc_42c__codeblock_s2g_rrc_42c"><code>&lt;section id="main-content" class="search-results-column"&gt;
{{generative_answers}}
&lt;h1 class="search-results-subheading"&gt;</code></pre>
</div>
<p class="p"><strong class="ph b">Reference</strong></p>
<div class="p">
<ul class="ul" id="topic_tjl_xqc_42c__ul_t2g_rrc_42c">
<li class="li"><a class="xref" href="https://github.com/zendesk/copenhagen_theme/blob/master/templates/search_results.hbs" target="_blank">search_results.hbs</a></li>
<li class="li"><a class="xref" href="https://developer.zendesk.com/api-reference/help_center/help-center-templates/advanced_helpers/#generative_answers-helper" target="_blank">generative_answers helper</a></li>
</ul>
</div>
<div class="p">
<strong class="ph b">To update your custom theme (Knowledge admins)</strong><ol class="ol" id="topic_tjl_xqc_42c__ol_nxd_dzb_jgc">
<li class="li">In <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/9041943683354#topic_b5q_nwn_s2c" target="_blank">Knowledge admin</a>, click <strong class="ph b">Customize design</strong>
(<img class="image" id="topic_tjl_xqc_42c__image_ly5_hzb_jgc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide_icon_customize.png">) in the sidebar.<p class="p">The Themes page opens.</p>
</li>
<li class="li">Click <strong class="ph b">Customize</strong> on the theme you want to edit.</li>
<li class="li">Click <strong class="ph b">Edit code</strong>.<p class="p"><img class="image" id="topic_tjl_xqc_42c__image_mfx_gbc_jgc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide_themes_edit_code_btn.png" width="600"></p>
</li>
<li class="li">Under Templates, click <strong class="ph b">search_results.hbs</strong>.</li>
<li class="li">Add the <strong class="ph b">{{generative_answers}} </strong>helper code to the theme's search_results.hbs
template where you want the generative answers to appear.<p class="p"><img class="image" id="topic_tjl_xqc_42c__image_q3h_kbc_jgc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide-gensearch-helper.png" width="600"></p>
</li>
<li class="li">Click <strong class="ph b">Save</strong>.</li>
<li class="li">After activating, if you find that the Quick answer box UI doesn't match the fonts and
colors of your custom theme, this could be due to one of the following: <ul class="ul" id="topic_tjl_xqc_42c__ul_jz2_nbc_jgc">
<li class="li">You have the required settings in the theme settings interface. However, the
settings values are not set to match your theme, because your theme's look and feel
is hardcoded in your CSS file. To update the color and font settings, see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408824139546" target="_blank">Branding your help center</a>.</li>
<li class="li">You do not have some or all of the settings in the theme settings interface. If
this is the case, you'll need to add the settings and set their values to match the
rest of your theme. To do this, you can update your manifest.json file with the
following identifiers from <a class="xref" href="https://github.com/zendesk/copenhagen_theme/blob/master/manifest.json" target="_blank">Github</a>, replacing the value of each
identifier with the font or color code that matches your theme: <ul class="ul" id="topic_tjl_xqc_42c__ul_kz2_nbc_jgc">
<li class="li">Color settings identifiers: <ul class="ul" id="topic_tjl_xqc_42c__ul_lz2_nbc_jgc">
<li class="li">text_color</li>
<li class="li">link_color</li>
<li class="li">hover_link_color</li>
<li class="li">visited_link_color</li>
</ul>
</li>
<li class="li">Fonts settings identifiers <ul class="ul" id="topic_tjl_xqc_42c__ul_mz2_nbc_jgc">
<li class="li">heading_font</li>
<li class="li">text_font</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ol>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title14" class="topic nested1" id="topic_h4p_wbj_jhc">
<h2 class="title topictitle2" id="ariaid-title14">Add the new request list experience to your custom theme</h2>
<div class="body">
<p class="p">When you enable the new request list experience in your theme, end users can use the new
combinable filtering options to refine the requests they want to manage as well as new
column configuration options to show or hide both system fields and custom fields. See <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408846805530" target="_blank">Submitting and tracking requests in the help center Customer
Portal.</a></p>
<div class="note" id="topic_h4p_wbj_jhc__note_i4p_wbj_jhc">
<span class="notetitle">Note:</span> The new request list experience is available by default in <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408845834522" target="_blank">standard themes</a> released after February 2, 2026. If your help
center was created before February 2, 2026 and uses a customized theme, you must update your
custom theme to add the new request list experience functionality. </div>
<p class="p"><strong class="ph b">Requests page template</strong></p>
<p class="p" dir="ltr">The request list UI is implemented in the <a class="xref" href="https://github.com/zendesk/copenhagen_theme/tree/11e8049bea05e19b5c1791ca617fc8859d428307/src/modules/request-list" target="_blank"><u class="ph u">Copenhagen theme repository</u></a> in the <a class="xref" href="https://github.com/zendesk/copenhagen_theme/tree/11e8049bea05e19b5c1791ca617fc8859d428307/src/modules/request-list" target="_blank"><u class="ph u">request-list</u></a> codebase. To customize the
request list experience, update the components in <code class="ph codeph">request-list</code> and render
them from your theme’s requests page template.</p>
<div class="p">
<div class="div">
<p class="p" dir="ltr">In <code class="ph codeph">templates/requests_page.hbs</code>, add a container element and
include a <code class="ph codeph">&lt;script type="module"&gt;</code> block that imports
<code class="ph codeph">renderRequestList</code> from <code class="ph codeph">request-list</code>, then render the
request list inside the container. The following example shows the required markup and
initialization code.</p>
</div>
</div>
<p class="p"><strong class="ph b">Example</strong></p>
<div class="p">
<pre class="pre codeblock" id="topic_h4p_wbj_jhc__codeblock_m4p_wbj_jhc"><code>&lt;div id="main-content"&gt;
&lt;/div&gt;

&lt;script type="module"&gt;
import { renderRequestList } from "request-list";

const container = document.getElementById("main-content");
const settings = {{json settings}};

const props = {
locale: {{json help_center.base_locale}},
customStatusesEnabled: {{json help_center.custom_statuses_enabled}}
};

renderRequestList(settings, props, container);
&lt;/script&gt;
</code></pre>
</div>
<p class="p">To see the current implementation used by non-customized themes, review the <a class="xref" href="https://github.com/zendesk/copenhagen_theme/blob/4c76903fffc7e5918d065989c3728bfee19777a6/templates/requests_page.hbs#L21" target="_blank"><u class="ph u">requests_page.hbs</u></a> template and the
<code class="ph codeph">request-list</code> components in the Copenhagen theme repository.</p>
<p class="p"><strong class="ph b">Reference</strong></p>
<div class="p">
<ul class="ul" id="topic_h4p_wbj_jhc__ul_n4p_wbj_jhc">
<li class="li"><a class="xref" href="https://github.com/zendesk/copenhagen_theme/tree/11e8049bea05e19b5c1791ca617fc8859d428307/src/modules/request-list" target="_blank">the request-list codebase</a></li>
<li class="li"><a class="xref" href="https://developer.zendesk.com/api-reference/help_center/help-center-api/introduction/" target="_blank">Reference documentation</a></li>
</ul>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title15" class="topic nested1" id="topic_xqw_dd1_cw">
<h2 class="title topictitle2" id="ariaid-title15">Add Instant Search (autocomplete search) results to your custom help center theme</h2>
<div class="body">
<p class="p">You can display links to suggested articles as the user types in the Search box by adding
Instant Search to your custom theme. </p>
<div class="p">
<div class="note">
<span class="notetitle">Note:</span> Instant Search is available by default in <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408839332250#topic_zkg_rxf_sv" target="_blank">standard themes</a> and themes that were customized after the
release Instant Search on July 5th, 2016. You can disable Instant Search, if needed, by
removing it from your theme.</div>
</div>
<p class="p">When Instant Search is enabled, a maximum of six suggested articles appear as the user
types their search term in the Search box. Articles are matched for Instant Search based on
the article title only. The user can select matched articles directly from the Search box
without going to the search results page first. </p>
<div class="p">
<strong class="ph b">Applicable templates</strong><ul class="ul" id="topic_xqw_dd1_cw__ul_yqw_dd1_cw">
<li class="li">Whichever template contains your Search expression (most often it's the Header or
Home page template)</li>
</ul>
</div>
<p class="p"><strong class="ph b">Applicable expression</strong></p>
<div class="p">
<ul class="ul" id="topic_xqw_dd1_cw__ul_gzg_p21_cw">
<li class="li">{{search}}</li>
</ul>
</div>
<div class="p">
<strong class="ph b">Recipe</strong><ul class="ul" id="topic_xqw_dd1_cw__ul_zqw_dd1_cw">
<li class="li">Add <code class="ph codeph">instant=true</code> to the Search expression.<div class="p">
<pre class="pre codeblock"><code>{{search instant=true}}</code></pre>
</div>
</li>
</ul>
</div>
<p class="p"><strong class="ph b">Example</strong></p>
<div class="p">
<pre class="pre codeblock"><code>&lt;div class="search-box"&gt;
&lt;h1 class="help-center-name"&gt;{{help_center.name}}&lt;/h1&gt;
{{search <strong class="ph b">instant=true</strong>}}
&lt;/div&gt;</code></pre>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title16" class="topic nested1" id="topic_tn4_sgw_frb">
<h2 class="title topictitle2" id="ariaid-title16">Add Federated Search to include external content in help center search</h2>
<div class="body">
<p class="p">There are two parts to enabling Federated Search in your help center <a class="xref" href="https://developer.zendesk.com/apps/docs/help-center-templates/search_results_page" target="_blank">Search Results template</a>:</p>
<ul class="ul" id="topic_tn4_sgw_frb__ul_vns_ygw_frb">
<li class="li"><a class="xref" href="#topic_rfw_1hw_frb">Adding sidebar filters</a></li>
<li class="li"><a class="xref" href="#topic_i21_3hw_frb">Looping through the results</a></li>
</ul>
<div class="note" id="topic_tn4_sgw_frb__note_xgl_wdg_k3c">
<span class="notetitle">Note:</span> You must be using Knowledge templating version 2 and above to
enable Federated search in your help center. For more information, see <a class="xref" href="https://developer.zendesk.com/api-reference/help_center/help-center-templates/v1/" target="_blank">Upgrading from Templating API v1</a> and <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408820214554" target="_blank">About templating versions for help center themes</a>. </div>
</div>
<div aria-labelledby="ariaid-title17" class="topic nested2" id="topic_rfw_1hw_frb">
<h3 class="title topictitle3" id="ariaid-title17">Adding sidebar filters</h3>
<div class="body">
<p class="p">You need to update the search results template by updating the properties used in the
sidebar filters.</p>
<div class="p">Update the following code in <code class="ph codeph">&lt;div
class="search-results"&gt;</code>.<pre class="pre codeblock"><code>&lt;section class="search-results-sidebar"&gt;
{{#if source_filters}}
&lt;section class="filters-in-section collapsible-sidebar" aria-expanded="false"&gt;
&lt;button type="button" class="collapsible-sidebar-toggle" aria-expanded="false"&gt;
&lt;/button&gt;
&lt;h3 class="collapsible-sidebar-title sidenav-title"&gt;{{t 'filter_source'}}&lt;/h3&gt;
&lt;ul class="multibrand-filter-list multibrand-filter-list--collapsed"&gt;
{{#each source_filters}}
&lt;li&gt;
{{#if selected}}
&lt;a href="{{url}}" class="sidenav-item current" aria-current="page"&gt;
{{else}}
&lt;a href="{{url}}" class="sidenav-item"&gt;
{{/if}}
&lt;span class="sidenav-subitem filter-name"&gt;{{name}}&lt;/span&gt;
&lt;span class="sidenav-subitem doc-count"&gt;({{count}})&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;
{{/each}}
&lt;buttonclass="see-all-filters"aria-hidden="true"aria-label="{{t'show_more_sources'}}"&gt;{{t'show_more_sources'}}&lt;/button&gt; &lt;/ul&gt;
&lt;/section&gt;
{{/if}}
{{#if type_filters}}
&lt;section class="filters-in-section collapsible-sidebar" aria-expanded="false"&gt;
&lt;button type="button" class="collapsible-sidebar-toggle" aria-expanded="false"&gt;
&lt;/button&gt;
&lt;h3 class="collapsible-sidebar-title sidenav-title"&gt;{{t 'filter_type'}}&lt;/h3&gt;
&lt;ul class="multibrand-filter-list multibrand-filter-list--collapsed"&gt;
{{#each type_filters}}
&lt;li&gt;
{{#if selected}}
&lt;a href="{{url}}" class="sidenav-item current" aria-current="page"&gt;
{{else}}
&lt;a href="{{url}}" class="sidenav-item"&gt;
{{/if}}
&lt;span class="sidenav-subitem filter-name"&gt;{{name}}&lt;/span&gt;
&lt;span class="sidenav-subitem doc-count"&gt;({{count}})&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;
{{/each}}
&lt;/ul&gt;
&lt;/section&gt;
{{/if}}
{{#if subfilters}}
&lt;section class="filters-in-section collapsible-sidebar" aria-expanded="false"&gt;
&lt;button type="button" class="collapsible-sidebar-toggle" aria-expanded="false"&gt;
&lt;/button&gt;
{{#is current_filter.identifier 'knowledge_base'}}
&lt;h3 class="collapsible-sidebar-title sidenav-title"&gt;{{t 'filter_by_category'}}&lt;/h3&gt;
{{/is}}
{{#is current_filter.identifier 'community'}}
&lt;h3 class="collapsible-sidebar-title sidenav-title"&gt;{{t 'filter_by_topic'}}&lt;/h3&gt;
{{/is}}
&lt;ul class="multibrand-filter-list multibrand-filter-list--collapsed"&gt;
{{#each subfilters}}
&lt;li&gt;
{{#if selected}}
&lt;a href="{{url}}" class="sidenav-item current" aria-current="page"&gt;
{{else}}
&lt;a href="{{url}}" class="sidenav-item"&gt;
{{/if}}
&lt;span class="sidenav-subitem filter-name"&gt;{{name}}&lt;/span&gt;
&lt;span class="sidenav-subitem doc-count"&gt;({{count}})&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;
{{/each}}
{{#is current_filter.identifier 'knowledge_base'}}
&lt;button class="see-all-filters" aria-hidden="true" aria-label="{{t 'show_more_categories'}}"&gt;{{t 'show_more_categories'}}&lt;/button&gt;
{{/is}}
{{#is current_filter.identifier 'community'}}
&lt;button class="see-all-filters" aria-hidden="true" aria-label="{{t 'show_more_topics'}}"&gt;{{t 'show_more_topics'}}&lt;/button&gt;
{{/is}}
&lt;/ul&gt;
&lt;/section&gt;
{{/if}}
&lt;/section&gt;</code></pre>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title18" class="topic nested2" id="topic_i21_3hw_frb">
<h3 class="title topictitle3" id="ariaid-title18">Looping through the results</h3>
<div class="body">
<p class="p">This snippet is an example of how you can use the <code class="ph codeph">{{results}}</code> helper to
loop through the Federated Search results:</p>
<div class="p">
<pre class="pre codeblock"><code>{{#if results}}
&lt;ul class="search-results-list"&gt;
{{#each results}}
&lt;li class="search-result-list-item result-{{type}}"&gt;
&lt;h2 class="search-result-title"&gt;
&lt;a href="{{url}}" class="results-list-item-link"{{#if is_external}}
target=”_blank” {{/if}}&gt;
{{title}}
{{#if is_external}}
&lt;svg viewBox="0 0 24 24" width="12px" height="12px" id="zd-svg-icon-12-new-window-fill"&gt;&lt;path d="M 19.980469 2.9902344 A 1.0001 1.0001 0 0 0 19.869141 3 L 15 3 A 1.0001 1.0001 0 1 0 15 5 L 17.585938 5 L 8.2929688 14.292969 A 1.0001 1.0001 0 1 0 9.7070312 15.707031 L 19 6.4140625 L 19 9 A 1.0001 1.0001 0 1 0 21 9 L 21 4.1269531 A 1.0001 1.0001 0 0 0 19.980469 2.9902344 z M 5 3 C 3.9069372 3 3 3.9069372 3 5 L 3 19 C 3 20.093063 3.9069372 21 5 21 L 19 21 C 20.093063 21 21 20.093063 21 19 L 21 13 A 1.0001 1.0001 0 1 0 19 13 L 19 19 L 5 19 L 5 5 L 11 5 A 1.0001 1.0001 0 1 0 11 3 L 5 3 z"/&gt;&lt;/svg&gt;
{{/if}}

&lt;/a&gt;
&lt;/h2&gt;
&lt;article&gt;
&lt;div class="search-result-icons"&gt;
{{#if vote_sum}}
&lt;span class="search-result-votes"&gt;{{vote_sum}}&lt;/span&gt;
{{/if}}
{{#if comment_count}}
&lt;span class="search-result-meta-count"&gt;
{{comment_count}}
&lt;/span&gt;
{{/if}}
&lt;/div&gt;
&lt;ul class="meta-group"&gt;
&lt;li&gt;
&lt;ol class="breadcrumbs search-result-breadcrumbs"&gt;
{{#each path_steps}}
&lt;li title="{{name}}"&gt;&lt;a href="{{url}}" target="{{target}}"&gt;{{name}}&lt;/a&gt;&lt;/li&gt;
{{/each}}
&lt;/ol&gt;
&lt;/li&gt;
&lt;li class="meta-data"&gt;{{author.name}}&lt;/li&gt;
&lt;li class="meta-data"&gt;{{date created_at}}&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="search-results-description"&gt;{{text}}&lt;/div&gt;
&lt;/article&gt;
&lt;/li&gt;
{{/each}}
&lt;/ul&gt;
{{else}}
&lt;p&gt;
{{t 'no_results_unified'}}
{{#link 'help_center'}}
{{t 'browse_help_center'}}
{{/link}}
&lt;/p&gt;
{{/if}}</code></pre>
</div>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title19" class="topic nested1" id="topic_ljq_jch_jw">
<h2 class="title topictitle2" id="ariaid-title19">Add sorting for subscription types in the My Activities Following page</h2>
<div class="body">
<p class="p">You can make it easier for users to view their subscriptions by enabling them to sort
subscriptions by type in the My Activities &gt; Following page. </p>
<div class="p">
<strong class="ph b">Applicable templates</strong><ul class="ul" id="topic_ljq_jch_jw__ul_qwk_mch_jw">
<li class="li">Following page</li>
</ul>
</div>
<div class="p">
<strong class="ph b">Recipe</strong><ul class="ul" id="topic_ljq_jch_jw__ul_vwk_mch_jw">
<li class="li">Under the <code class="ph codeph">&lt;nav&gt;</code> tag, insert the following code:<div class="p">
<pre class="pre codeblock"><code>&lt;div class="my-activities-following-header"&gt;
&lt;span class="dropdown"&gt;
&lt;span class="dropdown-toggle"&gt;
{{current_filter.label}}
&lt;/span&gt;
&lt;span class="dropdown-menu" role="menu"&gt;
{{#each filters}}
&lt;a href="{{url}}" aria-selected="{{selected}}" role="menuitem"&gt;
{{name}}
&lt;/a&gt;
{{/each}}
&lt;/span&gt;
&lt;/span&gt;
&lt;/div&gt;

</code></pre>
</div>
</li>
</ul>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title20" class="topic nested1" id="topic_nbr_ytj_dx">
<h2 class="title topictitle2" id="ariaid-title20">Add sorting options “created at” and “updated at” for requests in My Activities</h2>
<div class="body">
<p class="p">You can add the sorting options “created at” and “updated at” for end-users on the request
page in My Activities. </p>
<div class="p">
<div class="note">
<span class="notetitle">Note:</span> The “created at” and “updated at” sorting options are available by default in <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408839332250#topic_zkg_rxf_sv" target="_blank">standard themes</a> and themes that were customized after August
2016.</div>
</div>
<div class="p">
<strong class="ph b">Applicable template</strong><ul class="ul" id="topic_nbr_ytj_dx__ul_42k_kvj_dx">
<li class="li">Request list page</li>
</ul>
</div>
<p class="p"><strong class="ph b">Recipe</strong></p>
<div class="p">
<ul class="ul" id="topic_nbr_ytj_dx__ul_yj3_tvj_dx">
<li class="li">Replace <code class="ph codeph">{{t 'created'}}</code>
with:<pre class="pre codeblock"><code>{{#link 'requests' sort_by='created_at'}}{{t 'created'}}{{/link}}</code></pre>
</li>
<li class="li">Replace <code class="ph codeph">{{t 'last_activity'}}</code>
with:<pre class="pre codeblock"><code>{{#link 'requests' sort_by='updated_at'}}{{t 'last_activity'}}{{/link}}</code></pre>
</li>
</ul>
</div>
<div class="p">
<strong class="ph b">Reference</strong><ul class="ul" id="topic_nbr_ytj_dx__ul_j1z_4vj_dx">
<li class="li"><a class="xref" href="https://developer.zendesk.com/apps/docs/help-center-templates/helpers#requests-link" target="_blank">requests link helper</a></li>
</ul>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title21" class="topic nested1" id="topic_ccb_5g1_qw">
<h2 class="title topictitle2" id="ariaid-title21">Add Follow/Unfollow for users in a shared organization</h2>
<div class="body">
<p class="p">You can enable users to receive email notifications for requests in their shared
organization. The {{subscribe}} helper inserts a "follow" button that users can click if
they want to receive email notifications when requests are created or updated in their
shared organization. Users also have the option to unfollow if they no longer want to
receive updates.</p>
<div class="p">
<div class="note">
<span class="notetitle">Note:</span> The Follow button for shared organizations is available by default in <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408839332250#topic_zkg_rxf_sv" target="_blank">standard themes</a> and themes that were customized after January
23th, 2016.</div>
</div>
<div class="p">
<strong class="ph b">Applicable template</strong><ul class="ul" id="topic_ccb_5g1_qw__ul_jcb_5g1_qw">
<li class="li">Request list page</li>
</ul>
<strong class="ph b">Applicable object</strong><ul class="ul" id="topic_ccb_5g1_qw__ul_lcb_5g1_qw">
<li class="li"><code class="ph codeph">{{#form 'requests_filter'}}...{{/form}}</code></li>
</ul>
</div>
<div class="p">
<strong class="ph b">Recipe</strong><ul class="ul" id="topic_ccb_5g1_qw__ul_mcb_5g1_qw">
<li class="li">Add the <code class="ph codeph">{{subscribe}}</code> helper to the form object.</li>
</ul>
</div>
<p class="p"><strong class="ph b">Example</strong></p>
<div class="p">
<pre class="pre codeblock"><code>{{#form 'requests_filter' class='request-table-toolbar'}}
{{input 'query' id='quick-search' type='search' class='requests-search'}}
&lt;div class="request-table-filters"&gt;
{{label 'organization' for='request-organization-select' class='request-filter'}}
{{select 'organization' id='request-organization-select' class='request-filter'}}
{{subscribe}}
{{label 'status' for='request-status-select' class='request-filter'}}
{{select 'status' id='request-status-select' class='request-filter'}}
&lt;/div&gt;
{{/form}}</code></pre>
</div>
<p class="p"><strong class="ph b">Reference</strong></p>
<div class="p">
<ul class="ul" id="topic_ccb_5g1_qw__ul_qcb_5g1_qw">
<li class="li"><a class="xref" href="https://developer.zendesk.com/apps/docs/help-center-templates/helpers#subscribe-helper" target="_blank">subscribe helper</a></li>
</ul>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title22" class="topic nested1" id="topic_2hj_jqw_1x">
<h2 class="title topictitle2" id="ariaid-title22">Add ability for signed-in users to CC other users on support requests</h2>
<div class="body">
<p class="p">You can add the ability for signed-in users to add CCs to new and existing support requests
in your help center. When a CC is added to a support request, the copied user will receive
email notifications for ticket updates. </p>
<div class="p">
<div class="note">
<span class="notetitle">Note:</span> The CC option is available for support requests by default in <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408839332250#topic_zkg_rxf_sv" target="_blank">standard themes</a> and themes that were customized after December
14th, 2015.</div>
</div>
<p class="p">After you add the code to your custom theme, you must enable the feature (see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408843795482#topic_x3t_4p5_cq" target="_blank">Setting CC permissions</a>).</p>
<div class="p">
<strong class="ph b">Applicable template</strong><ul class="ul" id="topic_2hj_jqw_1x__ul_qnp_mqw_1x">
<li class="li">Request page</li>
</ul>
<strong class="ph b">Applicable object</strong><ul class="ul" id="topic_2hj_jqw_1x__ul_tnp_mqw_1x">
<li class="li"><code class="ph codeph">{{#form 'comment' class='comment-form'}}...{{/form}}</code></li>
</ul>
</div>
<div class="p">
<strong class="ph b">Recipe</strong><ul class="ul" id="topic_2hj_jqw_1x__ul_xnp_mqw_1x">
<li class="li">Insert the following snippet inside
the comment form.<pre class="pre">{{#if help_center.request_ccs_enabled}}
&lt;div class="comment-ccs"&gt;
{{token_field 'ccs'
class="ccs-input"}}
&lt;/div&gt;
{{/if}}</pre>
</li>
</ul>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title23" class="topic nested1" id="topic_why_ysj_dx">
<h2 class="title topictitle2" id="ariaid-title23">Add a link on follow-up requests to the parent request</h2>
<div class="body">
<p class="p">You can display a link in a follow-up request to the parent request, if there is one. </p>
<div class="p">
<div class="note">
<span class="notetitle">Note:</span> The link to the parent request in the follow-up request is available by default in
<a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408839332250#topic_zkg_rxf_sv" target="_blank">standard themes</a> and themes that were customized after August
2016.</div>
</div>
<p class="p"><img class="image img-screenshot" id="topic_why_ysj_dx__image_bcv_1xj_dx" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/hc_followup_request_link.png"></p>
<div class="p">
<strong class="ph b">Applicable template</strong><ul class="ul" id="topic_why_ysj_dx__ul_44l_1wj_dx">
<li class="li">Request page</li>
</ul>
</div>
<p class="p"><strong class="ph b">Recipe</strong></p>
<div class="p">
<ul class="ul" id="topic_why_ysj_dx__ul_p4l_1wj_dx">
<li class="li">Add the following snippet to the Request page template where you want to display the
link to the parent ticket, if one is present:<div class="p">
<pre class="pre codeblock"><code>{{#if request.followup_source_id}}
&lt;dl class="request-details"&gt;
&lt;dt&gt;{{t 'followup'}}&lt;/dt&gt;
&lt;dd&gt;{{link 'request' id=request.followup_source_id}}
&lt;/dd&gt;
&lt;/dl&gt;
{{/if}}</code></pre>
</div>
</li>
</ul>
</div>
<div class="p">
<strong class="ph b">Reference</strong><ul class="ul" id="topic_why_ysj_dx__ul_r4l_1wj_dx">
<li class="li"><a class="xref" href="https://developer.zendesk.com/apps/docs/help-center-templates/new_request_page" target="_blank">new request page</a></li>
</ul>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title24" class="topic nested1" id="topic_nl4_tnx_ycc">
<h2 class="title topictitle2" id="ariaid-title24">Enable CSAT for solved tickets on the Customer Portal</h2>
<div class="body">
<div class="p">You can use CSAT to collect feedback from end users via the Customer Portal.<div class="note" id="topic_nl4_tnx_ycc__note_c1g_h4x_ycc">
<span class="notetitle">Note:</span> When CSAT is on, the CSAT option in the Customer Portal is available
by default in standard themes and in custom themes based on the Templating API <a class="xref" href="https://github.com/zendesk/copenhagen_theme/releases/tag/v3.2.0" target="_blank">v3.2.0</a> (released on February 8, 2024) or higher. </div>
</div>
<div class="p">
<strong class="ph b">Applicable template</strong><ul class="ul" id="topic_nl4_tnx_ycc__ul_zng_n5x_ycc">
<li class="li">Request page</li>
</ul>
</div>
<div class="p">
<strong class="ph b">Recipe</strong><ul class="ul" id="topic_nl4_tnx_ycc__ul_kby_n5x_ycc">
<li class="li">Add a <code class="ph codeph">{{#with satisfaction_response}}...{{/with}}</code> block to the
request_page.hbs template.</li>
</ul>
</div>
<div class="p">
<strong class="ph b">Example</strong><ul class="ul" id="topic_nl4_tnx_ycc__ul_y4r_p5x_ycc">
<li class="li">
<p class="p" dir="ltr">See the <a class="xref" href="https://github.com/zendesk/copenhagen_theme/blob/e7fcde18dcf31608ba4ae16602e3f3e507e52aae/templates/request_page.hbs#L130" target="_blank">Copenhagen theme request page.hbs</a> on GitHub.
</p>
</li>
<li class="li">Add the following template
code:<pre class="pre codeblock" id="topic_nl4_tnx_ycc__codeblock_avl_xkv_zcc"><code>{{#with satisfaction_response}}
{{#with rating}}
&lt;dl class="request-details"&gt;
&lt;dt&gt;{{t 'rating'}}&lt;/dt&gt;
&lt;dd&gt;
&lt;div&gt;
{{#is scale_type 'numeric'}}
{{t 'numerical_rating' value=value max_value=max_value}}
{{else}}
{{scale_value}}
{{/is}}
&lt;/div&gt;

{{#link 'survey_response' id=../id}}
{{#if ../editable}}
{{t 'edit_feedback'}}
{{else}}
{{t 'view_feedback'}}
{{/if}}
{{/link}}
&lt;/dd&gt;
&lt;/dl&gt;
{{else}}
{{#if editable}}
&lt;dl class="request-details"&gt;
&lt;dt&gt;{{t 'rating'}}&lt;/dt&gt;
&lt;dd&gt;
{{#link 'survey_response' id=id}}
{{t 'add_feedback'}}
{{/link}}
&lt;/dd&gt;
&lt;/dl&gt;
{{/if}}
{{/with}}
{{/with}}</code></pre>
</li>
</ul>
</div>
<div class="p">
<strong class="ph b">Reference</strong><ul class="ul" id="topic_nl4_tnx_ycc__ul_op1_rvx_ycc">
<li class="li"><a class="xref" href="https://developer.zendesk.com/api-reference/help_center/help-center-templates/request_page/#available-properties" target="_blank"><code class="ph codeph">satisfaction_response</code></a></li>
</ul>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title25" class="topic nested1" id="topic_bjk_fdq_4y">
<h2 class="title topictitle2" id="ariaid-title25">Add voting buttons to articles</h2>
<div class="body">
<p class="p">The vote buttons on articles are part of the standard Copenhagen theme. But if you don't
see the option to vote on your articles, you might have removed the buttons from your
theme.</p>
<p class="p">The code to add voting buttons can vary from theme to theme, but this is the code from the
standard Copenhagen theme, in case you need it.</p>
<div class="p">
<strong class="ph b">Applicable template</strong><ul class="ul" id="topic_bjk_fdq_4y__ul_o2g_gdq_4y">
<li class="li">Article</li>
</ul>
</div>
<div class="p">
<strong class="ph b">Recipe</strong><ul class="ul" id="topic_bjk_fdq_4y__ul_q2g_gdq_4y">
<li class="li">Add the following code to the Article Page template:<div class="p">
<pre class="pre codeblock"><code>{{#with article}}
&lt;div class="article-votes"&gt;
&lt;span class="article-votes-question"&gt;{{t 'was_this_article_helpful'}}&lt;/span&gt;
&lt;div class="article-votes-controls" role='radiogroup'&gt;
{{vote 'up' role='radio' class='button article-vote article-vote-up'}}
{{vote 'down' role='radio' class='button article-vote article-vote-down'}}
&lt;/div&gt;
&lt;small class="article-votes-count"&gt;
{{vote 'label' class='article-vote-label'}}
&lt;/small&gt;
&lt;/div&gt;
{{/with}}</code></pre>
</div>
</li>
</ul>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title26" class="topic nested1" id="topic_bzl_b23_kvb">
<h2 class="title topictitle2" id="ariaid-title26">Add content tags to articles and posts</h2>
<div class="body">
<p class="p">The standard Copenhagen theme displays content tags on article, community post, and search pages by default. If you're using a custom or marketplace theme, you may need to update your theme to display content tags on these pages. To get started, you can use the following template files from the Copenhagen theme as a guide:</p>
<ul class="ul" id="topic_bzl_b23_kvb__ul_pms_d23_kvb">
<li class="li"><a class="xref" href="https://github.com/zendesk/copenhagen_theme/blob/v2.19.0/templates/article_page.hbs#L95:L108" target="_blank">article_page.hbs</a></li>
<li class="li"><a class="xref" href="https://github.com/zendesk/copenhagen_theme/blob/v2.19.0/templates/community_post_page.hbs#L127:L141" target="_blank">community_post_page.hbs</a></li>
<li class="li"><a class="xref" href="https://github.com/zendesk/copenhagen_theme/blob/v2.19.0/templates/new_community_post_page.hbs#L70:L85" target="_blank">new_community_post_page.hbs</a></li>
<li class="li"><a class="xref" href="https://github.com/zendesk/copenhagen_theme/blob/v2.19.0/templates/search_results.hbs#L109:L165" target="_blank">search_results.hbs</a></li>
</ul>
<p class="p">Once you're comfortable, you can add content tags to other pages. For example, the following snippet adds a list of content tags to the community topic page template. </p>
<pre class="pre codeblock" id="topic_bzl_b23_kvb__codeblock_gmk_223_kvb"><code>{{#each posts}}
...

{{#if (compare content_tags.length "&gt;" 0)}}
&lt;ul class="content-tag-list"&gt;
{{#each content_tags}}
&lt;li class="content-tag-item"&gt;
{{#link "search_result" content_tag_id=id}}
{{name}}
{{/link}}
&lt;/li&gt;
{{/each}}
&lt;/ul&gt;
{{/if}}

...

{{/each}}</code></pre>
</div>
</div>
<div aria-labelledby="ariaid-title27" class="topic nested1" id="topic_tg5_cqx_xmb">
<h2 class="title topictitle2" id="ariaid-title27">Add badges to your custom help center theme</h2>
<div class="body">
<div class="section" id="topic_tg5_cqx_xmb__section_gk2_dqx_xmb">
<div class="p">
<div class="note">
<span class="notetitle">Note:</span> Badges are available by default from September 1st, 2020.</div>
You can create a
custom theme if you do not want to use the standard Copenhagen theme. However, badges
require that you use the <strong class="ph b">Theme Templating API v2</strong>. If you're still using v1, use the
<a class="xref" href="https://developer.zendesk.com/apps/docs/help-center-templates/v1" target="_blank">upgrade instructions</a> to do this. You can also find
inspiration for doing this in the Zendesk <a class="xref" href="https://github.com/zendesk/copenhagen_theme/pull/215" target="_blank">example theme on GitHub</a>.</div>
<p class="p">This topic covers:</p>
<ul class="ul" id="topic_tg5_cqx_xmb__ul_hk2_dqx_xmb">
<li class="li"><a class="xref" href="#topic_tg5_cqx_xmb__section_ik2_dqx_xmb">Adding the new user
profile actions helper</a></li>
<li class="li"><a class="xref" href="#topic_tg5_cqx_xmb__section_kk2_dqx_xmb">Showing Title badges
on the post listings page</a></li>
<li class="li"><a class="xref" href="#topic_tg5_cqx_xmb__section_nk2_dqx_xmb">Showing Title badges
on a post and comments page</a></li>
<li class="li"><a class="xref" href="#topic_tg5_cqx_xmb__section_pk2_dqx_xmb">Showing Title and
Achivements badges on a user profile page</a></li>
</ul>
</div>
<div class="section" id="topic_tg5_cqx_xmb__section_ik2_dqx_xmb">
<h3 class="title sectiontitle">Adding the new user profile actions helper</h3>
<p class="p">You must add the Award badge option if you want to award badges for agents. However,
before you can do this, you must add the new actions helper.</p>
<p class="p"><strong class="ph b">To add the actions helper declaration</strong></p>
<ol class="ol" id="topic_tg5_cqx_xmb__ol_jk2_dqx_xmb">
<li class="li">Open the theme online code editor, go to an agent's user profile
page.<pre class="pre"><strong class="ph b">Page filename:</strong> user_profile_page.hbs</pre>
</li>
<li class="li">Find the <strong class="ph b">edit</strong> helper declaration.<pre class="pre">{{edit}}</pre>
</li>
<li class="li">Replace the edit helper declaration with the new actions helper declaration
instead.<pre class="pre"><strong class="ph b">{{actions}}</strong></pre>
</li>
</ol>
<p class="p">Now agents will be able to award badges. The new button will be styled with CSS according
to your preferences. For more inspiration see the Zendesk <a class="xref" href="https://github.com/zendesk/copenhagen_theme/pull/215" target="_blank">example theme</a>.</p>
</div>
<div class="section" id="topic_tg5_cqx_xmb__section_kk2_dqx_xmb">
<h3 class="title sectiontitle">Showing Title badges on the post listings page</h3>
<p class="p">You can add Title badges as labels that sit next to the name of the author in the post
listing page. This looks similar to post status labels because, for the sake of
simplicity, the styling class is being reused.</p>
<p class="p">To show Title badges on a post listings page</p>
<ol class="ol" id="topic_tg5_cqx_xmb__ol_lk2_dqx_xmb">
<li class="li">Open the theme online code editor, and go
to<pre class="pre"><strong class="ph b">Page filename:</strong> community_topic_page.hbs</pre>
</li>
<li class="li">Find the <strong class="ph b">author</strong> name declaration. In the Copenhagen theme the line looks like
this:<pre class="pre">&lt;li class="meta-data"&gt;{{author.name}}&lt;/li&gt;</pre>
</li>
<li class="li">Add this snippet to the line after
it:<pre class="pre"><strong class="ph b">{{#each author.badges}}</strong>
&lt;li class="meta-data"&gt;
<strong class="ph b"> {{#is category_slug "titles"}}</strong>
&lt;span class="status-label"&gt;{{name}}&lt;/span&gt;
<strong class="ph b"> {{/is}}</strong>
&lt;/li&gt;
<strong class="ph b">{{/each}}</strong></pre>
</li>
</ol>
<p class="p">For advanced users - do not (re)use the<code class="ph codeph">status-label</code> CSS class for this
scenario, instead create a new specialized CSS class that you can modify independently of
the status label's style.</p>
<p class="p">Here is an example of a Title badge for a Community Member</p>
<p class="p"><img alt="Gather badges title badge example." class="image img-screenshot" id="topic_tg5_cqx_xmb__image_i2x_srx_xmb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/gather_badges_Title_badge_example.png" width="250"></p>
</div>
<div class="section" id="topic_tg5_cqx_xmb__section_nk2_dqx_xmb">
<h3 class="title sectiontitle">Showing Title badges on a post and comments page</h3>
<p class="p"><strong class="ph b">To show Title badges on a post listings page</strong></p>
<ol class="ol" id="topic_tg5_cqx_xmb__ol_ok2_dqx_xmb">
<li class="li">Open the theme online code editor, and go
to<pre class="pre"><strong class="ph b">Page filename:</strong> community_post_page.hbs</pre>
</li>
<li class="li">Find the <strong class="ph b">author</strong> name declaration. In the Copenhagen theme the line looks like
this:<pre class="pre">&lt;li class="meta-data"&gt;{{author.name}}&lt;/li&gt;</pre>
</li>
<li class="li">Add this snippet to the line after
it:<pre class="pre"><strong class="ph b">{{#each author.badges}}</strong>
&lt;li class="meta-data"&gt;
<strong class="ph b"> {{#is category_slug "titles"}}</strong>
&lt;span class="status-label"&gt;{{name}}&lt;/span&gt;
<strong class="ph b"> {{/is}}</strong>
&lt;/li&gt;
<strong class="ph b">{{/each}}</strong></pre>
</li>
</ol>
</div>
<div class="section" id="topic_tg5_cqx_xmb__section_pk2_dqx_xmb">
<h3 class="title sectiontitle">Showing Title and Achievements badges on a user profile page</h3>
<p class="p">On a user profile page you will likely want to add more than just Title badges, for
example, you can also add the user's achievements. The following example assumes that
there is a graphical icon for each Achievement badge. Based on the Copenhagen theme, your
Achievement badges may look like this:</p>
<p class="p"><img alt="Gather badges for title and achievement." class="image img-screenshot" id="topic_tg5_cqx_xmb__image_a3c_dsx_xmb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/gather_badges_Title_and_achievement_badges.png" width="300"></p>
<p class="p"><strong class="ph b">To show Title and Achievement badges on a user's profile page</strong></p>
<ol class="ol" id="topic_tg5_cqx_xmb__ol_rk2_dqx_xmb">
<li class="li">Open the theme online code editor, and go
to<pre class="pre"><strong class="ph b">Page filename:</strong> user_profile_page.hbs</pre>
</li>
<li class="li">Find the lines in the file where the user's name is rendered. For
example:<pre class="pre">&lt;h1 class="name"&gt;
{{#if user.url}}
&lt;a href="{{user.url}}" target="_zendesk_lotus" title="{{t 'open_user_in_support'}}"&gt;{{user.name}}&lt;/a&gt;
{{else}}
{{user.name}}
{{/if}}
&lt;/h1&gt;</pre>
</li>
<li class="li">Replace that snippet with the
following:<pre class="pre">&lt;h1 class="name"&gt;
{{#if user.url}}
&lt;a href="{{user.url}}" target="_zendesk_lotus" title="{{t 'open_user_in_support'}}"&gt;{{user.name}}&lt;/a&gt;
{{else}}
{{user.name}}
{{/if}}
<strong class="ph b"> {{#each user.badges}}</strong><strong class="ph b"> {{#is category_slug "titles"}}</strong>
&lt;span class="status-label"&gt;{{name}}&lt;/span&gt;
<strong class="ph b"> {{/is}}</strong><strong class="ph b"> {{/each}}</strong>
&lt;/h1&gt;
&lt;div style="margin-top: 1em;"&gt;
<strong class="ph b"> {{#each user.badges}}</strong><strong class="ph b"> {{#is category_slug "achievements"}}</strong>
&lt;div style="float: left; text-align: center; padding: 0.5em; margin: 0.5em; background: white; border-radius: 0.2em;"&gt;
&lt;img src="{{icon_url}}" height="40"&gt;&lt;br&gt;
&lt;span style="font-size: 0.8em;"&gt;{{name}}&lt;/span&gt;
&lt;/div&gt;
<strong class="ph b"> {{/is}}</strong><strong class="ph b"> {{/each}}</strong>
&lt;/div&gt;</pre>
</li>
</ol>
<p class="p">In this example all of the CSS styling is inlined to keep the example simple. For best
practices, use these examples for inspiration, but spend time ensuring that the styling
fits your theme</p>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title28" class="topic nested1" id="topic_tq5_fn1_sgb">
<h2 class="title topictitle2" id="ariaid-title28">Enable users to view user profiles to your help center</h2>
<div class="body">
<div class="div">
<p class="p">This section describes how to update the necessary templates so that users in your
help center can click the author name or avatar and view the user's profile.</p>
<div class="p">
<div class="note">
<span class="notetitle">Note:</span> User profiles are available by default in <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408839332250#topic_zkg_rxf_sv" target="_blank">standard themes</a> and themes that were customized after June
20th, 2016.</div>
</div>
The solutions discussed in this section involve using the <code class="ph codeph">link</code> helper
in the help center templating language. See <a class="xref" href="https://developer.zendesk.com/apps/docs/help-center-templates/helpers#link-helper" target="_blank">link helper</a> in the templating documentation to
update the following templates:<ul class="ul" id="topic_tq5_fn1_sgb__ul_ofw_jn1_sgb">
<li class="li"><a class="xref" href="#topic_jzq_cq4_yfc">Articles</a></li>
<li class="li"><a class="xref" href="#topic_rkr_gq4_yfc">Community posts</a></li>
<li class="li"><a class="xref" href="#topic_umf_jq4_yfc">Search results page</a></li>
</ul>
</div>
</div>
<div aria-labelledby="ariaid-title29" class="topic nested2" id="topic_jzq_cq4_yfc">
<h3 class="title topictitle3" id="ariaid-title29">Articles</h3>
<div class="body">
<div class="div">
<p class="p">Make the following updates to the Article page template.</p>
<strong class="ph b">Updating the
article's author name</strong><p class="p">Replace the following <code class="ph codeph">if</code>
block:</p>
<pre class="pre">{{#if article.author.url}}
&lt;a href="{{article.author.url}}" target="_zendesk_lotus"&gt;
{{article.author.name}}
&lt;/a&gt;
{{else}}
{{article.author.name}}
{{/if}}</pre>
<p class="p">with
the following <code class="ph codeph">link</code>
helper:</p>
<pre class="pre">{{#link "user_profile" id=article.author.id class="user-profile"}}
{{article.author.name}}
{{/link}}</pre>
<strong class="ph b">Updating
comment author names</strong><p class="p">Replace the following <code class="ph codeph">if</code>
block:</p>
<pre class="pre">{{#if author.url}}
&lt;a href="{{author.url}}" target="_zendesk_lotus"&gt;{{author.name}}&lt;/a&gt;
{{else}}
{{author.name}}
{{/if}}</pre>
<p class="p">with
the following <code class="ph codeph">link</code>
helper:</p>
<pre class="pre">{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}</pre>
<strong class="ph b">Updating
the avatar of the article and comment authors</strong><p class="p">Replace the following image
tag:</p>
<pre class="pre">&lt;img src="{{article.author.avatar_url}}" alt="Avatar"/&gt;</pre>
<p class="p">with
the following <code class="ph codeph">link</code>
helper:</p>
<pre class="pre">{{#link "user_profile" id=article.author.id class="user-profile"}}
&lt;img src="{{article.author.avatar_url}}" alt="Avatar" /&gt;
{{/link}}</pre>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title30" class="topic nested2" id="topic_rkr_gq4_yfc">
<h3 class="title topictitle3" id="ariaid-title30">Community posts</h3>
<div class="body">
<div class="div">
<p class="p">Make the following updates to the Community Post page template.</p>
<strong class="ph b">Updating the
names of post authors</strong><p class="p">Replace the following <code class="ph codeph">if</code>
block:</p>
<pre class="pre">{{#if post.author.url}}
&lt;a href="{{post.author.url}}" target="_zendesk_lotus"&gt;
{{post.author.name}}
&lt;/a&gt;
{{else}}
{{post.author.name}}
{{/if}}</pre>
<p class="p">with
the following <code class="ph codeph">link</code>
helper:</p>
<pre class="pre">{{#link "user_profile" id=post.author.id class="user-profile"}}
{{post.author.name}}
{{/link}}</pre>
<strong class="ph b">Updating
the names of comment authors</strong><p class="p">Replace the following <code class="ph codeph">if</code>
block:</p>
<pre class="pre">{{#if author.url}}
&lt;a href="{{author.url}}" target="_zendesk_lotus"&gt;{{author.name}}&lt;/a&gt;
{{else}}
{{author.name}}
{{/if}}</pre>
<p class="p">with
the following <code class="ph codeph">link</code>
helper:</p>
<pre class="pre">{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}</pre>
<strong class="ph b">Updating
the avatars of post authors</strong><p class="p">Replace the following image
tag:</p>
<pre class="pre">&lt;img src="{{post.author.avatar_url}}" alt="Avatar"/&gt;</pre>
<p class="p">with the
following <code class="ph codeph">link</code>
helper:</p>
<pre class="pre">{{#link "user_profile" id=post.author.id class="user-profile"}}
&lt;img src="{{post.author.avatar_url}}" alt="Avatar" /&gt;
{{/link}}</pre>
<strong class="ph b">Updating
the avatars of the comment authors</strong><p class="p">Replace the following image
tag:</p>
<pre class="pre">&lt;img src="{{author.avatar_url}}" alt="Avatar"/&gt;</pre>
<p class="p">with the
following <code class="ph codeph">link</code>
helper:</p>
<pre class="pre">{{#link "user_profile" id=author.id class="user-profile"}}
&lt;img src="{{author.avatar_url}}" alt="Avatar" /&gt;
{{/link}}</pre>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title31" class="topic nested2" id="topic_umf_jq4_yfc">
<h3 class="title topictitle3" id="ariaid-title31">Search results</h3>
<div class="body">
<div class="div">
<p class="p">Make the following updates to the Search results template.</p>
<strong class="ph b">Updating the author
names of articles in the results</strong><p class="p">Replace the following <code class="ph codeph">if</code> block
in the <code class="ph codeph">{{#each article_results}}</code>
block:</p>
<pre class="pre">{{#if author.url}}
&lt;a href="{{author.url}}" target="_zendesk_lotus"&gt;{{author.name}}&lt;/a&gt;
{{else}}
{{author.name}}
{{/if}}</pre>
<p class="p">with
the following <code class="ph codeph">link</code>
helper:</p>
<pre class="pre">{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}</pre>
<strong class="ph b">Updating
the author names of posts in the results</strong><p class="p">Replace the following <code class="ph codeph">if</code>
block in the <code class="ph codeph">{{#each post_results}}</code>
block:</p>
<pre class="pre">{{#if author.url}}
&lt;a href="{{author.url}}" target="_zendesk_lotus"&gt;{{author.name}}&lt;/a&gt;
{{else}}
{{author.name}}
{{/if}}</pre>
<p class="p">with
the following <code class="ph codeph">link</code>
helper:</p>
<pre class="pre">{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}</pre>
<strong class="ph b">Updating
the search results in older themes</strong><p class="p">If you have an older theme, the search results
might use the <code class="ph codeph">{{meta}}</code> helper instead. In that case you can use the
code described in this section to link author names to profile pages in your help
center.</p>
<p class="p">You may need to update your CSS styling for the search results page to
look uniform.</p>
<strong class="ph b">Updating the author names of articles in the results</strong><p class="p">Replace
the following div
tags:</p>
<pre class="pre">&lt;div class="search-result-meta"&gt;{{meta}}&lt;/div&gt;
&lt;div class="search-result-description"&gt;{{text}}&lt;/div&gt;</pre>
<p class="p">With
the
following:</p>
<pre class="pre">&lt;ol
class="breadcrumbs"&gt;
{{#each path_steps}}
&lt;li title="{{name}}"&gt;&lt;a href="{{url}}"&gt;{{name}}&lt;/a&gt;&lt;/li&gt;
{{/each}}
&lt;/ol&gt;
&lt;div class="search-result-description"&gt;
{{text}}
&lt;/div&gt;
&lt;div class="search-result-meta"&gt;
&lt;span dir="auto" class="search-result-meta-name"&gt;
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
&lt;/span&gt;
&lt;span class="search-result-meta-time"&gt;{{date created_at}}&lt;/span&gt;
&lt;/div&gt;</pre>
<p class="p">For
end
result:</p>
<pre class="pre">{{#each article_results}}
&lt;li class="search-result"&gt;
&lt;a href="{{url}}" class="search-result-link"&gt;{{title}}&lt;/a&gt;
{{#if vote_sum}}
&lt;span class="search-result-votes"&gt;{{vote_sum}}&lt;/span&gt;
{{/if}}
&lt;ol class="breadcrumbs"&gt;
{{#each path_steps}}
&lt;li title="{{name}}"&gt;&lt;a href="{{url}}"&gt;{{name}}&lt;/a&gt;&lt;/li&gt;
{{/each}}
&lt;/ol&gt;
&lt;div class="search-result-description"&gt;
{{text}}
&lt;/div&gt;
&lt;div class="search-result-meta"&gt;
&lt;span dir="auto" class="search-result-meta-name"&gt;
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
&lt;/span&gt;
&lt;span class="search-result-meta-time"&gt;{{date created_at}}&lt;/span&gt;
&lt;/div&gt;
&lt;/li&gt;
{{/each}}</pre>
<strong class="ph b">Updating
the author names of posts in the
results</strong><p class="p">Add:</p>
<pre class="pre">&lt;ol class="breadcrumbs"&gt;
{{#each path_steps}}
&lt;li title="{{name}}"&gt;&lt;a href="{{url}}"&gt;{{name}}&lt;/a&gt;&lt;/li&gt;
{{/each}}
&lt;/ol&gt;</pre>
<p class="p">For
end
result:</p>
<pre class="pre">{{#each post_results}}
&lt;li class="search-result"&gt;
&lt;a href="{{url}}" class="search-result-link"&gt;{{title}}&lt;/a&gt;
&lt;ol class="breadcrumbs"&gt;
{{#each path_steps}}
&lt;li title="{{name}}"&gt;&lt;a href="{{url}}"&gt;{{name}}&lt;/a&gt;&lt;/li&gt;
{{/each}}
&lt;/ol&gt;
&lt;div class="search-result-description"&gt;
{{text}}
&lt;/div&gt;
&lt;div class="search-result-meta"&gt;
&lt;span dir="auto" class="search-result-meta-name"&gt;
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
&lt;/span&gt;
&lt;span class="search-result-meta-time"&gt;{{date created_at}}&lt;/span&gt;
&lt;span class="search-result-meta-count"&gt;
{{t 'comments_count' count=comment_count}}
&lt;/span&gt;
&lt;/div&gt;
&lt;/li&gt;
{{/each}}</pre>
</div>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title32" class="topic nested1" id="topic_k23_2bj_chb">
<h2 class="title topictitle2" id="ariaid-title32">Enable subsections in your help center theme</h2>
<div class="body">
<p class="p">You can <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408834687130" target="_blank">add subsections</a> to your help center knowledge base
to create more levels in your content hierarchy. If you are using a theme that was
customized before March 29, 2019, you must add code to your help center custom theme to
enable subsections. The following code comes with later versions of the Copenhagen
theme.</p>
<div class="p">
<div class="note">
<span class="notetitle">Note:</span> Subsections are available for Guide Enterprise by default in <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408839332250#topic_zkg_rxf_sv" target="_blank">standard themes</a> and themes that were customized after March 29,
2019.</div>
</div>
<div class="p">
<strong class="ph b">Applicable template</strong><ul class="ul" id="topic_k23_2bj_chb__ul_apr_hbj_chb">
<li class="li">Section</li>
</ul>
<strong class="ph b">Applicable object</strong><ul class="ul" id="topic_k23_2bj_chb__ul_bpr_hbj_chb">
<li class="li"><code class="ph codeph">section.sections</code></li>
</ul>
</div>
<div class="p">
<strong class="ph b">Recipe</strong><ul class="ul" id="topic_k23_2bj_chb__ul_cpr_hbj_chb">
<li class="li">Insert the following snippet into the Zendesk section page template,
<strong class="ph b">section_page.hbs</strong>, after the header tag (<code class="ph codeph">&lt;header
class="page-header"&gt;...&lt;/header&gt;</code>) and before the pagination tag
(<code class="ph codeph">{{pagination}}</code>)
:<pre class="pre codeblock"><code>{{#if section.sections}}
&lt;ul class="section-list section-list--collapsed"&gt;
{{#each section.sections}}
&lt;li class="section-list-item"&gt;
&lt;a href="{{url}}"&gt;
&lt;span&gt;{{name}}&lt;/span&gt;
&lt;svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true"&gt;
&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M5 14.5l6.1-6.1c.2-.2.2-.5 0-.7L5 1.5"/&gt;
&lt;/svg&gt;
&lt;/a&gt;
&lt;/li&gt;
{{/each}}
&lt;a tabindex="0" class="see-all-sections-trigger" aria-hidden="true" id="see-all-sections-trigger" title="{{t 'see_all_sections'}}"&gt;{{t 'see_all_sections'}}&lt;/a&gt;
&lt;/ul&gt;
{{/if}}

{{#if section.articles}}
&lt;ul class="article-list"&gt;
{{#each section.articles}}
&lt;li class="article-list-item {{#if promoted}} article-promoted{{/if}}"&gt;
{{#if promoted}}&lt;span data-title="{{t 'promoted'}}" class="icon-star"&gt;&lt;/span&gt;{{/if}}
&lt;a href="{{url}}" class="article-list-link"&gt;{{title}}&lt;/a&gt;
&lt;/li&gt;
{{/each}}
&lt;/ul&gt;
{{else}}
&lt;i class="section-empty"&gt;
&lt;a href="{{section.url}}"&gt;{{t 'empty'}}&lt;/a&gt;
&lt;/i&gt;
{{/if}}</code></pre>
</li>
</ul>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title33" class="topic nested1" id="topic_ykx_gms_y3b">
<h2 class="title topictitle2" id="ariaid-title33">Add sidebar filters and results for multiple help centers to the search results page</h2>
<div class="body">
<p class="p">The help center search enables users to search across help centers, if you have multiple
help centers, and presents the search results from help centers and from knowledge base and
community, in a single unified feed with filters on the search results page. </p>
<p class="p">If you are using a theme that was customized before March 29, 2019, you must add code to
your help center custom theme to support unified search results and search across multiple
help centers. If you have multiple help centers, you'll need to update your theme for each
help center.</p>
<div class="p">
<div class="note">
<span class="notetitle">Note:</span> Unified search results and search across multiple help centers is supported by default
in <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408839332250#topic_zkg_rxf_sv" target="_blank">standard themes</a> and themes that were customized after September
25, 2019.</div>
</div>
<p class="p">The fastest way to get the changes needed into your theme is to import the latest version
of the Copenhagen theme that supports unified search results. To do so, see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408821790618" target="_blank">Adding a help center theme to Guide</a>. </p>
<div class="p">If you prefer to update your existing, custom theme, this section provides an overview of
all of the changes you need to make. The solutions discussed in this section
involve using the <code class="ph codeph">help_center_filters</code>, <code class="ph codeph">filters</code>, and
<code class="ph codeph">subfilters</code> helpers in the Curlybars templating language to update the
following files:<ul class="ul" id="topic_ykx_gms_y3b__ul_h3h_ssd_cjb">
<li class="li"><a class="xref" href="#topic_q1h_5sd_cjb">Search results</a></li>
<li class="li"><a class="xref" href="#topic_yvw_vsd_cjb">CSS</a></li>
<li class="li"><a class="xref" href="#topic_xzf_ysd_cjb">JavaScript</a></li>
</ul>
</div>
</div>
<div aria-labelledby="ariaid-title34" class="topic nested2" id="topic_q1h_5sd_cjb">
<h3 class="title topictitle3" id="ariaid-title34">Updating the search results template to add sidebar filters</h3>
<div class="body">
<p class="p">You need to update the search results template to add sidebar filters and to loop through
the results.</p>
<p class="p"><strong class="ph b">Adding sidebar filters</strong></p>
<p class="p">This snippet is an example of how you can implement search facets in the search results
page sidebar using the new filter helpers.</p>
<p class="p">Insert the following code in <code class="ph codeph">&lt;div class="search-results"&gt;</code> in the
search results template:</p>
<div class="p">
<pre class="pre codeblock"><code>
&lt;section class="search-results-sidebar"&gt;
{{#if help_center.community_enabled}}
&lt;section class="filters-in-section collapsible-sidebar"&gt;
&lt;h3 class="collapsible-sidebar-title sidenav-title"&gt;{{t 'filter_by_type'}}&lt;/h3&gt;
&lt;ul&gt;
{{#each filters}}
&lt;li&gt;
&lt;a href="{{url}}" class="sidenav-item" aria-selected="{{selected}}"&gt;{{name}} ({{count}})&lt;/a&gt;
&lt;/li&gt;
{{/each}}
&lt;/ul&gt;
&lt;/section&gt;
{{/if}}
{{#if subfilters}}
&lt;section class="filters-in-section collapsible-sidebar"&gt;
{{#is current_filter.identifier 'knowledge_base'}}
&lt;h3 class="collapsible-sidebar-title sidenav-title"&gt;{{t 'filter_by_category'}}&lt;/h3&gt;
{{/is}}
{{#is current_filter.identifier 'community'}}
&lt;h3 class="collapsible-sidebar-title sidenav-title"&gt;{{t 'filter_by_topic'}}&lt;/h3&gt;
{{/is}}
&lt;ul&gt;
{{#each subfilters}}
&lt;li&gt;
&lt;a href="{{url}}" class="sidenav-item" aria-selected="{{selected}}"&gt;{{name}} ({{count}})&lt;/a&gt;
&lt;/li&gt;
{{/each}}
&lt;/ul&gt;
&lt;/section&gt;
{{/if}}
&lt;/section&gt;</code></pre>
</div>
<div class="p">
<div class="div">
<strong class="ph b">Looping through the results</strong><p class="p">This snippet is an example of how you can use
the {{results}} helper to loop through the unified search results.</p>
<p class="p">Replace both
the <code class="ph codeph">{{article_results}}</code> and <code class="ph codeph">{{post_results}}</code> helpers
and their associated search-results-subheading H3s</p>
<p class="p">in the search results
template with the
following:</p>
<pre class="pre">{{#if results}}
&lt;ul class="search-results-list"&gt;
{{#each results}}
&lt;li class="search-result-list-item result-{{type}}"&gt;
&lt;h2 class="search-result-title"&gt;
&lt;a href="{{url}}" class="results-list-item-link"&gt;{{title}}&lt;/a&gt;
&lt;/h2&gt;
&lt;article&gt;
&lt;div class="search-result-icons"&gt;
{{#if vote_sum}}
&lt;span class="search-result-votes"&gt;{{vote_sum}}&lt;/span&gt;
{{/if}}
{{#if comment_count}}
&lt;span class="search-result-meta-count"&gt;
{{comment_count}}
&lt;/span&gt;
{{/if}}
&lt;/div&gt;
&lt;ul class="meta-group"&gt;
&lt;li&gt;
&lt;ol class="breadcrumbs search-result-breadcrumbs"&gt;
{{#each path_steps}}
&lt;li title="{{name}}"&gt;&lt;a href="{{url}}"&gt;{{name}}&lt;/a&gt;&lt;/li&gt;
{{/each}}
&lt;/ol&gt;
&lt;/li&gt;
&lt;li class="meta-data"&gt;{{author.name}}&lt;/li&gt;
&lt;li class="meta-data"&gt;{{date created_at}}&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="search-results-description"&gt;{{text}}&lt;/div&gt;
&lt;/article&gt;
&lt;/li&gt;
{{/each}}
&lt;/ul&gt;
{{else}}
&lt;p&gt;
{{t 'no_results_unified'}}
{{#link 'help_center'}}
{{t 'browse_help_center'}}
{{/link}}
&lt;/p&gt;
{{/if}}</pre>
</div>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title35" class="topic nested2" id="topic_yvw_vsd_cjb">
<h3 class="title topictitle3" id="ariaid-title35">Updating CSS styling for the sidebar filters in the search results page</h3>
<div class="body">
<p class="p">You can add CSS styling for the sidebar filters. The following example is based on the
Copenhagen theme.</p>
<p class="p">Make sure the following CSS rules are included in your style.css file:</p>
<div class="p">
<pre class="pre">/***** Search results *****/
.search-results {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
}

@media (min-width: 1024px) {
.search-results {
flex-direction: row;
}
}

.search-results-column {
flex: 1;
}

@media (min-width: 1024px) {
.search-results-column {
flex: 0 0 75%;
}
}

.search-results-sidebar {
border-top: 1px solid #ddd;
flex: 1 0 auto;
margin-bottom: 20px;
padding: 0;
}

@media (min-width: 1024px) {
.search-results-sidebar {
border: 0;
flex: 0 0 20%;
height: auto;
}
}

.search-results-sidebar .sidenav-item[aria-selected="true"] {
background-color: $brand_color;
color: $brand_text_color;
text-decoration: none;
}

.search-results-subheading {
font-size: 18px;
font-weight: 600;
}

.search-results-list {
margin-bottom: 25px;
}

.search-results-list &gt; li {
padding: 20px 0;
}

.search-results-list &gt; li:first-child {
border-top: 1px solid #ddd;
}

.search-results-list &gt; li h2 {
margin-bottom: 0;
}

.search-result-title {
font-size: 16px;
}

.search-result-description {
margin-top: 15px;
word-break: break-word;
}

.search-result-votes, .search-result-meta-count {
color: lighten($text_color, 20%);
display: inline-block;
font-size: 13px;
font-weight: 300;
padding: 4px 5px;
position: relative;
}

.search-result-votes::before, .search-result-meta-count::before {
color: $brand_color;
}

[dir="ltr"] .search-result-votes, [dir="ltr"] .search-result-meta-count {
margin-left: 5px;
}

[dir="ltr"] .search-result-votes::before, [dir="ltr"] .search-result-meta-count::before {
margin-right: 3px;
}

[dir="rtl"] .search-result-votes, [dir="rtl"] .search-result-meta-count {
margin-right: 5px;
}

[dir="rtl"] .search-result-votes::before, [dir="rtl"] .search-result-meta-count::before {
margin-left: 3px;
}

.search-result-votes::before {
content: "\1F44D";
}

.search-result-meta-count::before {
content: "\1F4AC";
}

.search-result .meta-group {
align-items: center;
}

.search-result-breadcrumbs {
margin: 0;
}

.search-result-breadcrumbs li:last-child::after {
content: "·";
display: inline-block;
margin: 0 5px;
}

/* Non-latin search results highlight */
/* Add a yellow background for Chinese */
html[lang|="zh"] .search-result-description em {
font-style: normal;
background: yellow;
}

/* Use bold to highlight for the rest of supported non-latin languages */
html[lang|="ar"] .search-result-description em,
html[lang|="bg"] .search-result-description em,
html[lang|="el"] .search-result-description em,
html[lang|="he"] .search-result-description em,
html[lang|="hi"] .search-result-description em,
html[lang|="ko"] .search-result-description em,
html[lang|="ja"] .search-result-description em,
html[lang|="ru"] .search-result-description em,
html[lang|="th"] .search-result-description em {
font-style: bold;
}</pre>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title36" class="topic nested2" id="topic_xzf_ysd_cjb">
<h3 class="title topictitle3" id="ariaid-title36">Updating JavaScript for the collapsible sidebar in the search results page</h3>
<div class="body">
<p class="p">You can add JavaScript for the collapsible sidebar in the search results page. The
following example is based on the Copenhagen theme.</p>
<p class="p">Replace the following block in the script.js file in the custom theme:</p>
<pre class="pre">// Toggles expanded aria to collapsible elements
Array.prototype.forEach.call(document.querySelectorAll('.collapsible-nav, .collapsible-sidebar'), function(el) {
el.addEventListener('click', function(e) {
e.stopPropagation();
var isExpanded = this.getAttribute('aria-expanded') === 'true';
this.setAttribute('aria-expanded', !isExpanded);
});
});</pre>
<p class="p">with the following code snippet:</p>
<pre class="pre">// Toggles expanded aria to collapsible elements
var collapsible = document.querySelectorAll('.collapsible-nav, .collapsible-sidebar');

Array.prototype.forEach.call(collapsible, function(el) {
var toggle = el.querySelector('.collapsible-nav-toggle, .collapsible-sidebar-toggle');

el.addEventListener('click', function(e) {
toggleNavigation(toggle, this);
});

el.addEventListener('keyup', function(e) {
if (e.keyCode === 27) { // Escape key
closeNavigation(toggle, this);
}
});
});</pre>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title37" class="topic nested1" id="topic_hcb_nws_l4">
<h2 class="title topictitle2" id="ariaid-title37">Adding the spam filter to help center</h2>
<div class="body">
<p class="p">If you're using a custom help center theme created before April 1, 2014, you need to add
some extra styling to your stylesheet to support the spam filter. </p>
<div class="p">The following new HTML elements have been added:<ul class="ul" id="topic_hcb_nws_l4__ul_jk5_tws_l4">
<li class="li">Article page<ul class="ul" id="topic_hcb_nws_l4__ul_a2d_5ws_l4">
<li class="li">
<code class="ph codeph">section</code> element with class
<code class="ph codeph">"pending-comments-list"</code>
</li>
<li class="li">
<code class="ph codeph">span</code> element with class
<code class="ph codeph">"pending-moderation-comment-badge"</code>
</li>
</ul>
</li>
<li class="li">Question page<ul class="ul" id="topic_hcb_nws_l4__ul_ikh_hly_l4">
<li class="li">
<code class="ph codeph">section</code> element with class
<code class="ph codeph">"pending-answers-list"</code>
</li>
<li class="li">
<code class="ph codeph">span</code> element with class
<code class="ph codeph">"pending-moderation-answer-badge"</code>
</li>
</ul>
</li>
</ul>
</div>
<div class="p">Add the following to your custom theme
stylesheet:<pre class="pre codeblock"><code>.pending-moderation-comment-badge, .pending-moderation-answer-badge {
border-style: solid;
border-width: 1px;
border-color: #c7aa2b;
color: #c7aa2b;
padding: 3px5px;
margin-top: 10px;
font-size: 12px;
}</code></pre>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title38" class="topic nested1" id="topic_xrf_2r4_yfc">
<h2 class="title topictitle2" id="ariaid-title38">Adding approvals to your help center</h2>
<div class="body">
<div class="p">The standard Copenhagen theme displays approvals by default when the approval request
feature is <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/9475816348442" target="_blank">turned on</a>. If you're using a custom or marketplace
theme, you must update your theme to display approval requests to end users. <div class="note">
<span class="notetitle">Note:</span>
<ul class="ul" id="topic_xrf_2r4_yfc__ul_gx1_r1w_dgc">
<li class="li">Approvals is available by default in standard themes and themes that were customized
after July 28, 2025. If your help center uses a custom help center theme that was
customized before July 28, 2025, you need to update your custom theme to support
approvals.</li>
<li class="li">The service catalog requires <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408820214554" target="_blank">templating API v4</a>. If you're using v3 or lower, <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408820214554-About-Guide-templating-versions#topic_llb_t5g_skb__section_rxc_dbd_tkb" target="_blank">upgrade to v4</a> before updating your custom
theme or <a class="xref" href="#topic_ppb_4cn_bgc">manually customize</a> the
lower templating API version to support approvals.</li>
</ul>
</div>
</div>
<div class="p">
<strong class="ph b">Applicable templates</strong><ol class="ol" id="topic_xrf_2r4_yfc__ul_v1m_js4_yfc">
<li class="li"><a class="xref" href="https://github.com/zendesk/copenhagen_theme/blob/beta/templates/approval_request_page.hbs" target="_blank">approval_request_page.hbs</a></li>
<li class="li"><a class="xref" href="https://github.com/zendesk/copenhagen_theme/blob/beta/templates/approval_request_list_page.hbs" target="_blank">approval_request_list_page.hbs</a></li>
<li class="li">The following <a class="xref" href="https://github.com/zendesk/copenhagen_theme/tree/beta/assets" target="_blank">assets</a>:<ul class="ul" id="topic_xrf_2r4_yfc__ul_wsv_yvj_cgc">
<li class="li">approval_requests_bundle.js</li>
<li class="li">approval_requests_translations_bundle.js</li>
</ul>
</li>
</ol>
</div>
<div class="p">
<strong class="ph b">Recipe</strong><ul class="ul" id="topic_xrf_2r4_yfc__ul_umz_xs4_yfc">
<li class="li">Click the <strong class="ph b">Download raw file</strong> icon on each template and asset file to
download.<p class="p"><img class="image" id="topic_xrf_2r4_yfc__image_azh_fjg_22c" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/serv-cat-download-raw-file.png" width="200"></p>
</li>
<li class="li">Add the template files (.hbs) to the templates folder in your unzipped live
theme.</li>
<li class="li">Copy all assets to the assets folder in your unzipped live theme.</li>
<li class="li">Add the following code snippet to the <strong class="ph b">document_head.hbs</strong> template, then delete
any other script starting with <code class="ph codeph">&lt;script
type="importmap"&gt;</code>.<pre class="pre codeblock"><code>&lt;script type="importmap"&gt;
{
"imports": {
"new-request-form": "{{asset 'new-request-form-bundle.js'}}",
"flash-notifications": "{{asset 'flash-notifications-bundle.js'}}",
"service-catalog": "{{asset 'service-catalog-bundle.js'}}",
"approval-requests": "{{asset 'approval-requests-bundle.js'}}",
"approval-requests-translations": "{{asset 'approval-requests-translations-bundle.js'}}",
"new-request-form-translations": "{{asset 'new-request-form-translations-bundle.js'}}",
"service-catalog-translations": "{{asset 'service-catalog-translations-bundle.js'}}",
"shared": "{{asset 'shared-bundle.js'}}",
"ticket-fields": "{{asset 'ticket-fields-bundle.js'}}",
"wysiwyg": "{{asset 'wysiwyg-bundle.js'}}"
}
}
&lt;/script&gt;</code></pre>
</li>
<li class="li">If necessary, you can <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408839332250" target="_blank">customize the page templates</a>.</li>
<li class="li">Zip the theme and upload it to your help center.</li>
</ul>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title39" class="topic nested1" id="topic_r3w_fr4_yfc">
<h2 class="title topictitle2" id="ariaid-title39">Adding the service catalog to your help center</h2>
<div class="body">
<p class="p">The standard Copenhagen theme displays service catalog by default when the service catalog
request feature is <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/9443951511450" target="_blank">turned on</a>. If you're using a custom or marketplace
theme, you must update your theme to display the service catalog to end users. </p>
<div class="p">You can copy the service catalog implementation from the Copenhagen theme following the
steps described below. Alternatively, if you want to completely customize the UI, you can
fork the <a class="xref" href="https://github.com/zendesk/copenhagen_theme/" target="_blank"><u class="ph u">Copenhagen theme</u></a> and change the implementation in the
<code class="ph codeph">src/modules/service-catalog</code> folder.<div class="note" id="topic_r3w_fr4_yfc__note_vvs_tf5_g2c">
<span class="notetitle">Note:</span>
<ul class="ul" id="topic_r3w_fr4_yfc__ul_zgx_c1w_dgc">
<li class="li">Service catalog is available by default in standard themes and themes that were
customized after July 31, 2025. If your help center uses a custom help center theme
that was customized before July 31, 2025, you need to update your custom theme to
support service catalog.</li>
<li class="li">The service catalog requires <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408820214554" target="_blank">templating API v4</a>. If you're using v3 or lower, <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408820214554-About-Guide-templating-versions#topic_llb_t5g_skb__section_rxc_dbd_tkb" target="_blank">upgrade to v4</a> before updating your custom
theme or <a class="xref" href="#topic_ppb_4cn_bgc">manually customize</a> the
lower templating API version to support the service catalog.</li>
</ul>
</div>
</div>
<div class="p">
<strong class="ph b">Applicable templates</strong><ul class="ul" id="topic_r3w_fr4_yfc__ul_h15_nt4_yfc">
<li class="li"><a class="xref" href="https://github.com/zendesk/copenhagen_theme/blob/service-catalog-eap/templates/service_page.hbs" target="_blank">service_page.hbs</a></li>
<li class="li"><a class="xref" href="https://github.com/zendesk/copenhagen_theme/blob/service-catalog-eap/templates/service_list_page.hbs" target="_blank">service_list_page.hbs</a></li>
<li class="li"><a class="xref" href="https://github.com/zendesk/copenhagen_theme/tree/service-catalog-eap/assets" target="_blank">assets</a></li>
</ul>
</div>
<div class="p">
<strong class="ph b">Recipe</strong><ol class="ol" id="topic_r3w_fr4_yfc__ul_tsd_nt4_yfc">
<li class="li">Click the <strong class="ph b">Download raw file</strong> icon on each template and asset file to
download.<p class="p"><img class="image" id="topic_r3w_fr4_yfc__image_usd_nt4_yfc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/serv-cat-download-raw-file.png" width="200"></p>
</li>
<li class="li">Add the template files (.hbs) to the templates folder in your unzipped live
theme.</li>
<li class="li">Copy all assets to the assets folder in your unzipped live theme.</li>
<li class="li">Add the following code snippet to the <strong class="ph b">document_head.hbs</strong> template, then delete
any other script starting with <code class="ph codeph">&lt;script
type="importmap"&gt;</code>.<pre class="pre codeblock"><code>&lt;script type="text/javascript"&gt;
// Load ES module polyfill only for browsers that don't support ES modules
if (!(HTMLScriptElement.supports &amp;&amp; HTMLScriptElement.supports('importmap'))) {
document.write('&lt;script async src="{{asset 'es-module-shims.js'}}"&gt;&lt;\/script&gt;');
}
&lt;/script&gt;
&lt;script type="importmap"&gt;
{
"imports": {
"new-request-form": "{{asset 'new-request-form-bundle.js'}}",
"flash-notifications": "{{asset 'flash-notifications-bundle.js'}}",
"service-catalog": "{{asset 'service-catalog-bundle.js'}}",
"approval-requests": "{{asset 'approval-requests-bundle.js'}}",
"approval-requests-translations": "{{asset 'approval-requests-translations-bundle.js'}}",
"new-request-form-translations": "{{asset 'new-request-form-translations-bundle.js'}}",
"service-catalog-translations": "{{asset 'service-catalog-translations-bundle.js'}}",
"shared": "{{asset 'shared-bundle.js'}}",
"ticket-fields": "{{asset 'ticket-fields-bundle.js'}}",
"wysiwyg": "{{asset 'wysiwyg-bundle.js'}}"
}
}
&lt;/script&gt;
&lt;script type="module"&gt;
import { renderFlashNotifications } from "flash-notifications";

const settings = {{json settings}};
const baseLocale = {{json help_center.base_locale}};

renderFlashNotifications(settings, baseLocale);
&lt;/script&gt;</code></pre>
</li>
<li class="li">Use the link helper to add a link to the service catalog page in the <strong class="ph b">header.js</strong>
template.</li>
<li class="li">Copy the following styles into your <strong class="ph b">style.css</strong>
file:<pre class="pre codeblock"><code>.service-catalog-description {
display: flow-root;
}
.service-catalog-description a {
color: $link_color;
text-decoration: underline;
}
.service-catalog-description a:visited {
color: $visited_link_color;
}
.service-catalog-description a:hover, .service-catalog-description a:active, .service-catalog-description a:focus {
color: $hover_link_color;
}
.service-catalog-description img {
height: auto;
max-width: 100%;
}
.service-catalog-description p &gt; img.image-style-align-left {
float: left;
margin: 8px 20px 6px 0;
}
.service-catalog-description p &gt; img.image-style-align-right {
float: right;
margin: 8px 0px 6px 20px;
}
.service-catalog-description p &gt; img.image-style-block-align-right {
margin-left: auto;
margin-right: 0;
}
.service-catalog-description p &gt; img.image-style-block-align-left {
margin-left: 0;
margin-right: auto;
}
.service-catalog-description figure.image {
display: table;
margin: 0 auto;
}
.service-catalog-description figure.image &gt; img {
display: block;
width: 100%;
}
.service-catalog-description figure.image.image-style-align-left {
float: left;
margin: 8px 20px 6px 0;
}
.service-catalog-description figure.image.image-style-align-right {
float: right;
margin: 8px 0px 6px 20px;
}
.service-catalog-description figure.image.image-style-block-align-right {
margin-left: auto;
margin-right: 0;
}
.service-catalog-description figure.image.image-style-block-align-left {
margin-left: 0;
margin-right: auto;
}
.service-catalog-description figcaption {
padding: 10px 0;
font-size: 12px;
text-align: center;
background-color: darken($background_color, 5%);
}
.service-catalog-description ul,
.service-catalog-description ol {
padding-left: 20px;
list-style-position: outside;
margin: 20px 0 20px 20px;
}
[dir=rtl] .service-catalog-description ul,
[dir=rtl] .service-catalog-description ol {
padding-right: 20px;
padding-left: 0;
margin-left: 0;
margin-right: 20px;
}
.service-catalog-description ul &gt; ul,
.service-catalog-description ol &gt; ol,
.service-catalog-description ol &gt; ul,
.service-catalog-description ul &gt; ol,
.service-catalog-description li &gt; ul,
.service-catalog-description li &gt; ol {
margin: 0;
}
.service-catalog-description ul {
list-style-type: disc;
}
.service-catalog-description :not(pre) &gt; code {
background: darken($background_color, 3%);
border: 1px solid #ddd;
border-radius: 3px;
padding: 0 5px;
margin: 0 2px;
}
.service-catalog-description pre {
background: darken($background_color, 3%);
border: 1px solid #ddd;
border-radius: 3px;
padding: 10px 15px;
overflow: auto;
white-space: pre;
}
.service-catalog-description blockquote {
border-left: 1px solid #ddd;
color: lighten($text_color, 20%);
font-style: italic;
padding: 0 15px;
}</code></pre>
</li>
<li class="li">If necessary, you can <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408839332250" target="_blank">customize the page templates</a>.</li>
<li class="li">Zip the theme and upload it to your help center.</li>
</ol>
</div>
</div>
<div aria-labelledby="ariaid-title40" class="topic nested2" id="topic_ppb_4cn_bgc">
<h3 class="title topictitle3" id="ariaid-title40">Adding a service catalog or approvals on Templating API versions lower than 4</h3>
<div class="body">
<p class="p">The Templating API version 4 includes a <a class="xref" href="https://developer.zendesk.com/api-reference/help_center/help-center-templates/helpers/#json-helper" target="_blank">JSON helper</a> that is required for the service
catalog and approvals functionality. However, if you need to continue using a lower
templating version, you can serialize the data differently.</p>
<div class="p">
<strong class="ph b">To use the service catalog or approvals with lower Templating API versions</strong><ol class="ol" id="topic_ppb_4cn_bgc__ul_w2f_c3f_dgc">
<li class="li" dir="ltr">Remove the JSON helper from boolean and numbers.</li>
<li class="li" dir="ltr">Serialize strings with the <a class="xref" href="https://developer.zendesk.com/api-reference/help_center/help-center-templates/helpers/#json_stringify-helper" target="_blank"><u class="ph u">json_stringify helper</u></a>.</li>
<li class="li" dir="ltr">For complex objects, serialize each property individually.</li>
</ol>
</div>
<p class="p">The following example demonstrates how to adapt the <a class="xref" href="https://github.com/zendesk/copenhagen_theme/blob/service-catalog-eap/templates/service_page.hbs" target="_blank">service_page.hbs</a> template. You'll need to modify
the other required templates in a similar way as well.</p>
<div class="p">Replace the following original
code:<pre class="pre codeblock"><code>&lt;script type="module"&gt;
import { renderServiceCatalogItem } from "service-catalog";

const settings = {{json settings}};
const container = document.getElementById("service-catalog-item");

// Extract the ID from the URL
const id = window.location.pathname.split("/").pop()

const props = {
baseLocale: {{json help_center.base_locale}},
hasAtMentions: {{json help_center.at_mentions_enabled}},
userRole: {{json user.role}},
userId: {{json user.id}},
brandId: {{json brand.id}},
organizations: {{json user.organizations}},
serviceCatalogItemId: id,
helpCenterPath: {{json (page_path 'help_center')}},
}

renderServiceCatalogItem(container, settings, props);
&lt;/script&gt;
</code></pre>
</div>
<div class="p">With the
following:<pre class="pre codeblock"><code>&lt;script type="module"&gt;
import { renderServiceCatalogItem } from "service-catalog";

const settings = {
background_color: {{json_stringify settings.background_color}},
text_color: {{json_stringify settings.text_color}},
brand_color: {{json_stringify settings.brand_color}},
brand_text_color: {{json_stringify settings.brand_text_color}},
link_color: {{json_stringify settings.link_color}},
hover_link_color: {{json_stringify settings.hover_link_color}},
visited_link_color: {{json_stringify settings.visited_link_color}},
};
const container = document.getElementById("service-catalog-item");

// Extract the ID from the URL
const id = window.location.pathname.split("/").pop()

const props = {
baseLocale: {{json_stringify help_center.base_locale}},
hasAtMentions: {{help_center.at_mentions_enabled}},
userRole: {{json_stringify user.role}},
userId: {{user.id}},
brandId: {{brand.id}},
organizations: [
{{#each user.organizations}}
{id: {{id}}},
{{/each}}
],
serviceCatalogItemId: id,
helpCenterPath: {{json_stringify (page_path 'help_center')}},
}

renderServiceCatalogItem(container, settings, props);
&lt;/script&gt;
</code></pre>
</div>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title41" class="topic nested1" id="topic_xnr_cyz_hkc">
<h2 class="title topictitle2" id="ariaid-title41">Adding support for multi-lookup fields to your help center</h2>
<div class="body">
<p class="p">The standard Copenhagen theme v4.49.0 and later support multi-lookup fields by default.
Custom themes based on Copenhagen v4.49.0 and later or v3.x or earlier are also able to
display multi-lookup fields by default. However, if you're using a custom or marketplace
theme based on v4.0.0 - v4.48.0, you must update your theme to display multi-lookup fields
to end users. </p>
<p class="p">The Copenhagen theme's JavaScript modules import shared code from each other at runtime.
Therefore, it is necessary to update all .js files in your theme's assets directory.</p>
<div class="p">
<strong class="ph b">Applicable files</strong><ul class="ul" id="topic_xnr_cyz_hkc__ul_dbm_241_3kc">
<li class="li">All .js files in the <a class="xref" href="https://github.com/zendesk/copenhagen_theme/tree/master/assets" target="_blank">assets directory</a><div class="note" id="topic_xnr_cyz_hkc__note_mlj_vp1_3kc">
<span class="notetitle">Note:</span> If you've
confirmed your account doesn't use the <a class="xref" href="#topic_r3w_fr4_yfc">service catalog
or approvals features</a>, you only need to replace <em class="ph i">shared-bundle.js</em>,
<em class="ph i">ticket-fields-bundle.js</em>, and <em class="ph i">new-request-form-bundle.js</em> in the assets
director.</div>
</li>
</ul>
</div>
<div class="p">
<strong class="ph b">Recipe</strong><ol class="ol" id="topic_xnr_cyz_hkc__ol_ebm_241_3kc">
<li class="li">Click the <strong class="ph b">Download raw file</strong> icon on each .js file in the asset directory to
download.<p class="p"><img class="image" id="topic_xnr_cyz_hkc__image_fbm_241_3kc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/serv-cat-download-raw-file.png" width="200"></p>
</li>
<li class="li">Replace the .js files in the <strong class="ph b">assets</strong> directory of your unzipped live theme.</li>
<li class="li">Zip the theme and upload it to your help center.<p class="p">Your customized theme now supports
multi-lookup fields. You can tes this by adding a multi-lookup field to one of your
ticket forms and ensuring it renders </p>
</li>
</ol>
</div>
</div>
</div>
<script id="docs-schema-markup" type="application/ld+json">{
"@context": "https://schema.org",
"@type": "TechArticle",
"@id": "https://support.zendesk.com/hc/en-us/articles/4408832681626-Help-center-templating-cookbook",
"url": "https://support.zendesk.com/hc/en-us/articles/4408832681626-Help-center-templating-cookbook",
"headline": "Help center templating cookbook",
"description": "This article provides detailed instructions and code snippets for customizing help center themes using the Curlybars templating language to modify page templates, search features, user interactions, and other advanced functionalities.",
"articleSection": "Using themes and customizing your help center",
"datePublished": "2021-10-16T03:47:21+00:00",
"dateModified": "2026-08-25T17:59:27.153351+00:00",
"inLanguage": "en-US",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://support.zendesk.com/hc/en-us/articles/4408832681626-Help-center-templating-cookbook"
},
"author": {
"@type": "Organization",
"name": "Zendesk",
"url": "https://www.zendesk.com"
},
"publisher": {
"@type": "Organization",
"name": "Zendesk"
},
"isPartOf": {
"@type": "WebSite",
"name": "Zendesk Help",
"url": "https://support.zendesk.com/hc/en-us"
},
"about": {
"@type": "SoftwareApplication",
"name": "Zendesk"
}
}</script><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>
</body>