Help center templating cookbook


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.


What's my plan?






All Suites

Growth, Professional, Enterprise, or Enterprise Plus









Support with

Knowledge Professional or Enterprise








Note: This article is provided for instructional purposes only. Zendesk does not support or
guarantee custom code.

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.
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 standard theme or a customized theme and the date you enabled your
help center.
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.
This article covers the following topics:
About the Curlybars templating
language
Customize page templates for specific
categories, sections, or articles
Customize the language names in the
language selector
Hide one or more languages in the language
selector
Let users sort article comments by date or
votes
Add a formatting toolbar to the article
comment editor
Enable users to vote on article
comments
Add Instant Search (autocomplete) results
to your help center
Add Federated Search to include external content in help center search
Add generative search results to your custom theme
Add the new request list experience to your custom theme
Add sorting for subscription types in the
My Activities Following page
Add sorting options “created at” and
“updated at” for requests in My Activities
Add Follow/Unfollow for users in a shared
organization
Add ability for users to CC other users on
support requests
Add a link on follow-up requests to the
parent request
Enable CSAT for solved tickets on the
Customer Portal
Add voting buttons to articles
Add content tags to articles and
posts
Add badges to your custom help center
theme
Enable users to view user profiles to your help center
Enable subsections in your help center theme
Add sidebar filters and results for multiple help centers to the search results page
Adding the spam filter to help center
Adding approvals to your help center
Adding the service catalog to your help center




About the Curlybars templating language

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.
Editable page templates 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 {{post.title}}.
Custom pages 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.
The templating language is named Curlybars and implements a large subset of the Handlebars language.
But unlike Handlebars which renders on the client-side, Curlybars renders on the
server-side.
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:

{{#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}}

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.
For more information, see:
Help center templating language reference
Using the help center templating language
Customizing content with Curlybars





Customize page templates for specific categories, sections, or articles

You can customize the Category, Section, and Article templates for specific categories,
sections, and articles respectively.

Applicable templates
Category
Section
Article



Recipe
Specify the category, section, or article id in a is block:
{{#is id 200646205}}
...
{{/is}}




Example
Inserting the following block in the Section template customizes the template for sections
200646205 and 203133596:

{{#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}}

Reference


is helper





Customize the language names in the language selector

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".

Applicable template
Header

Applicable expression
{{#if alternative_locales}}...{{/if}}



Recipe
Replace the {{current_locale.name}} expression with the following
conditional expression:
{{#is current_locale.name 'English (US)'}}
English
{{else}}
{{current_locale.name}}
{{/is}}

Also replace the alternative locale {{name}} expression with the
following conditional expression:

{{#is name 'English (US)'}}
English
{{else}}
{{name}}
{{/is}}




Example

{{#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}}

Reference


is helper





Hide one or more languages in the language selector

Hiding a language in the language selector can be useful if the content in that language
isn't ready for release.

Applicable template
Header

Applicable expression
{{#each alternative_locales}}...{{/each}}



Recipe
Replace the <a href="{{url}}" dir="{{direction}}" rel="nofollow"
role="menuitem"> {{name}} expression with the following
conditional expression:
{{#is name 'Français'}}
{{! do nothing }}
{{else}}
&lt;a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem"&gt;
{{name}}
&lt;/a&gt;
{{/is}}




Example

{{#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}}

Reference


is helper





Let users sort article comments by date or votes

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.


Note: The Date and Votes sorting links are available by default in standard themes and themes that were customized after November
30th, 2015.


Applicable template
Article



Applicable HTML element
...



Recipe
Insert the following div tag after the comment section's heading tag,
{{t 'comments'}} , preferably after the
{{#if comments}} expression, if any, to ensure the sorters don't
appear if nobody left comments yet:

Sort by:
{{#each comment_sorters}}
&lt;a aria-selected="{{selected}}" href="{{url}}"&gt;{{name}}&lt;/a&gt;
{{/each}}





Example


&lt;h2&gt;{{t 'comments'}}&lt;/h2&gt;
{{#if comments}}


Sort by:
{{#each comment_sorters}}
&lt;a aria-selected="{{selected}}" href="{{url}}"&gt;{{name}}&lt;/a&gt;
{{/each}}


&lt;ul class="comment-list"&gt;
{{#each comments}}
...

Reference



comment_sorters property






Add a formatting toolbar to the article comment editor

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.


Note: The formatting toolbar is available by default in standard themes and themes that were customized after November
30th, 2015.


Applicable template
Article



Applicable object
{{#form 'comment'}}...{{/form}}



Recipe
Find and replace the {{textarea 'body'}} expression in the form
object with {{wysiwyg 'body'}}



Example

{{#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;
{{wysiwyg 'body'}}
&lt;div class="comment-form-controls"&gt;
{{input type='submit'}}
&lt;/div&gt;
&lt;/div&gt;
{{/form}}

Reference



wysiwyg helper






Enable users to vote on article comments

By default, users can vote on articles. You can also let them vote on article comments.


Note: The voting links are available by default in standard themes and themes that were customized after November
30th, 2015.


Applicable template
Article



Applicable expression
{{#each comments}}...{{/each}}



Recipe
Insert the following div tag after the tag:

{{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"}}


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.



Example

{{#each comments}}
&lt;li id="{{anchor}}" class="comment"&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 class="comment-avatar {{#if author.agent}} comment-avatar-agent {{/if}}"&gt;
&lt;img src="{{author.avatar_url}}" alt="Avatar"&gt;
&lt;/div&gt;
...

Reference



vote helper






Add generative search results to your custom theme

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.

Note: Generative search is available by default in standard themes 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 search settings.

Note: 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 Automatically updating your help center theme for generative search
(Beta).

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 federated search 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 Using generative search to provide AI-powered answers to search
queries.

Applicable template
Search results page (search_results.hbs)



Recipe
Add the {{generative_answers}} helper to the theme's
search_results.hbs template where you want the generative answers to appear.


Example


{{generative_answers}}


Reference


search_results.hbs
generative_answers helper



To update your custom theme (Knowledge admins)
In Knowledge admin, click Customize design
( ) in the sidebar. The Themes page opens.

Click Customize on the theme you want to edit.
Click Edit code.

Under Templates, click search_results.hbs.
Add the {{generative_answers}} helper code to the theme's search_results.hbs
template where you want the generative answers to appear.

Click Save.
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:
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 Branding your help center.
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 Github, replacing the value of each
identifier with the font or color code that matches your theme:
Color settings identifiers:
text_color
link_color
hover_link_color
visited_link_color


Fonts settings identifiers
heading_font
text_font











Add the new request list experience to your custom theme

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 Submitting and tracking requests in the help center Customer
Portal.

Note: The new request list experience is available by default in standard themes 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.
Requests page template
The request list UI is implemented in the Copenhagen theme repository in the request-list codebase. To customize the
request list experience, update the components in request-list and render
them from your theme’s requests page template.


In templates/requests_page.hbs, add a container element and
include a block that imports
renderRequestList from request-list, then render the
request list inside the container. The following example shows the required markup and
initialization code.


Example


&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;


To see the current implementation used by non-customized themes, review the requests_page.hbs template and the
request-list components in the Copenhagen theme repository.
Reference


the request-list codebase
Reference documentation





Add Instant Search (autocomplete search) results to your custom help center theme

You can display links to suggested articles as the user types in the Search box by adding
Instant Search to your custom theme.


Note: Instant Search is available by default in standard themes 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.

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.

Applicable templates
Whichever template contains your Search expression (most often it's the Header or
Home page template)


Applicable expression


{{search}}



Recipe
Add instant=true to the Search expression.
{{search instant=true}}




Example


&lt;h1 class="help-center-name"&gt;{{help_center.name}}&lt;/h1&gt;
{{search instant=true}}





Add Federated Search to include external content in help center search

There are two parts to enabling Federated Search in your help center Search Results template:

Adding sidebar filters
Looping through the results


Note: You must be using Knowledge templating version 2 and above to
enable Federated search in your help center. For more information, see Upgrading from Templating API v1 and About templating versions for help center themes.


Adding sidebar filters

You need to update the search results template by updating the properties used in the
sidebar filters.
Update the following code in <div
class="search-results">.
{{#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}}





Looping through the results

This snippet is an example of how you can use the {{results}} helper to
loop through the Federated Search results:

{{#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}}





Add sorting for subscription types in the My Activities Following page

You can make it easier for users to view their subscriptions by enabling them to sort
subscriptions by type in the My Activities > Following page.

Applicable templates
Following page



Recipe
Under the tag, insert the following code:

&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;









Add sorting options “created at” and “updated at” for requests in My Activities

You can add the sorting options “created at” and “updated at” for end-users on the request
page in My Activities.


Note: The “created at” and “updated at” sorting options are available by default in standard themes and themes that were customized after August
2016.


Applicable template
Request list page


Recipe


Replace {{t 'created'}}
with: {{#link 'requests' sort_by='created_at'}}{{t 'created'}}{{/link}}

Replace {{t 'last_activity'}}
with: {{#link 'requests' sort_by='updated_at'}}{{t 'last_activity'}}{{/link}}




Reference
requests link helper





Add Follow/Unfollow for users in a shared organization

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.


Note: The Follow button for shared organizations is available by default in standard themes and themes that were customized after January
23th, 2016.


Applicable template
Request list page

Applicable object
{{#form 'requests_filter'}}...{{/form}}



Recipe
Add the {{subscribe}} helper to the form object.


Example

{{#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}}

Reference


subscribe helper





Add ability for signed-in users to CC other users on support requests

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.


Note: The CC option is available for support requests by default in standard themes and themes that were customized after December
14th, 2015.

After you add the code to your custom theme, you must enable the feature (see Setting CC permissions).

Applicable template
Request page

Applicable object
{{#form 'comment' class='comment-form'}}...{{/form}}



Recipe
Insert the following snippet inside
the comment form. {{#if help_center.request_ccs_enabled}}
&lt;div class="comment-ccs"&gt;
{{token_field 'ccs'
class="ccs-input"}}
&lt;/div&gt;
{{/if}}






Add a link on follow-up requests to the parent request

You can display a link in a follow-up request to the parent request, if there is one.


Note: The link to the parent request in the follow-up request is available by default in
standard themes and themes that were customized after August
2016.



Applicable template
Request page


Recipe


Add the following snippet to the Request page template where you want to display the
link to the parent ticket, if one is present:
{{#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}}





Reference
new request page





Enable CSAT for solved tickets on the Customer Portal

You can use CSAT to collect feedback from end users via the Customer Portal.
Note: 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 v3.2.0 (released on February 8, 2024) or higher.


Applicable template
Request page



Recipe
Add a {{#with satisfaction_response}}...{{/with}} block to the
request_page.hbs template.



Example

See the Copenhagen theme request page.hbs on GitHub.


Add the following template
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}}




Reference
satisfaction_response





Add voting buttons to articles

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.
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.

Applicable template
Article



Recipe
Add the following code to the Article Page template:
{{#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}}







Add content tags to articles and posts

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:

article_page.hbs
community_post_page.hbs
new_community_post_page.hbs
search_results.hbs

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.
{{#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}}



Add badges to your custom help center theme




Note: Badges are available by default from September 1st, 2020.
You can create a
custom theme if you do not want to use the standard Copenhagen theme. However, badges
require that you use the Theme Templating API v2. If you're still using v1, use the
upgrade instructions to do this. You can also find
inspiration for doing this in the Zendesk example theme on GitHub.
This topic covers:

Adding the new user
profile actions helper
Showing Title badges
on the post listings page
Showing Title badges
on a post and comments page
Showing Title and
Achivements badges on a user profile page



Adding the new user profile actions helper
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.
To add the actions helper declaration

Open the theme online code editor, go to an agent's user profile
page. Page filename: user_profile_page.hbs

Find the edit helper declaration. {{edit}}

Replace the edit helper declaration with the new actions helper declaration
instead. {{actions}}


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 example theme.


Showing Title badges on the post listings page
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.
To show Title badges on a post listings page

Open the theme online code editor, and go
to Page filename: community_topic_page.hbs

Find the author name declaration. In the Copenhagen theme the line looks like
this: {{author.name}}

Add this snippet to the line after
it: {{#each author.badges}}
&lt;li class="meta-data"&gt;
{{#is category_slug "titles"}}
&lt;span class="status-label"&gt;{{name}}&lt;/span&gt;
{{/is}}
&lt;/li&gt;
{{/each}}


For advanced users - do not (re)use thestatus-label CSS class for this
scenario, instead create a new specialized CSS class that you can modify independently of
the status label's style.
Here is an example of a Title badge for a Community Member



Showing Title badges on a post and comments page
To show Title badges on a post listings page

Open the theme online code editor, and go
to Page filename: community_post_page.hbs

Find the author name declaration. In the Copenhagen theme the line looks like
this: {{author.name}}

Add this snippet to the line after
it: {{#each author.badges}}
&lt;li class="meta-data"&gt;
{{#is category_slug "titles"}}
&lt;span class="status-label"&gt;{{name}}&lt;/span&gt;
{{/is}}
&lt;/li&gt;
{{/each}}




Showing Title and Achievements badges on a user profile page
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:

To show Title and Achievement badges on a user's profile page

Open the theme online code editor, and go
to Page filename: user_profile_page.hbs

Find the lines in the file where the user's name is rendered. For
example:
{{#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}}


Replace that snippet with the
following:
{{#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}}
{{#each user.badges}} {{#is category_slug "titles"}}
&lt;span class="status-label"&gt;{{name}}&lt;/span&gt;
{{/is}} {{/each}}
&lt;/h1&gt;
&lt;div style="margin-top: 1em;"&gt;
{{#each user.badges}} {{#is category_slug "achievements"}}
&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;
{{/is}} {{/each}}



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




Enable users to view user profiles to your help center


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.


Note: User profiles are available by default in standard themes and themes that were customized after June
20th, 2016.

The solutions discussed in this section involve using the link helper
in the help center templating language. See link helper in the templating documentation to
update the following templates:
Articles
Community posts
Search results page




Articles


Make the following updates to the Article page template.
Updating the
article's author name Replace the following if
block:
{{#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}}
with
the following link
helper:
{{#link "user_profile" id=article.author.id class="user-profile"}}
{{article.author.name}}
{{/link}}
Updating
comment author names Replace the following if
block:
{{#if author.url}}
&lt;a href="{{author.url}}" target="_zendesk_lotus"&gt;{{author.name}}&lt;/a&gt;
{{else}}
{{author.name}}
{{/if}}
with
the following link
helper:
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
Updating
the avatar of the article and comment authors Replace the following image
tag:

with
the following link
helper:
{{#link "user_profile" id=article.author.id class="user-profile"}}
&lt;img src="{{article.author.avatar_url}}" alt="Avatar" /&gt;
{{/link}}




Community posts


Make the following updates to the Community Post page template.
Updating the
names of post authors Replace the following if
block:
{{#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}}
with
the following link
helper:
{{#link "user_profile" id=post.author.id class="user-profile"}}
{{post.author.name}}
{{/link}}
Updating
the names of comment authors Replace the following if
block:
{{#if author.url}}
&lt;a href="{{author.url}}" target="_zendesk_lotus"&gt;{{author.name}}&lt;/a&gt;
{{else}}
{{author.name}}
{{/if}}
with
the following link
helper:
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
Updating
the avatars of post authors Replace the following image
tag:

with the
following link
helper:
{{#link "user_profile" id=post.author.id class="user-profile"}}
&lt;img src="{{post.author.avatar_url}}" alt="Avatar" /&gt;
{{/link}}
Updating
the avatars of the comment authors Replace the following image
tag:

with the
following link
helper:
{{#link "user_profile" id=author.id class="user-profile"}}
&lt;img src="{{author.avatar_url}}" alt="Avatar" /&gt;
{{/link}}




Search results


Make the following updates to the Search results template.
Updating the author
names of articles in the results Replace the following if block
in the {{#each article_results}}
block:
{{#if author.url}}
&lt;a href="{{author.url}}" target="_zendesk_lotus"&gt;{{author.name}}&lt;/a&gt;
{{else}}
{{author.name}}
{{/if}}
with
the following link
helper:
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
Updating
the author names of posts in the results Replace the following if
block in the {{#each post_results}}
block:
{{#if author.url}}
&lt;a href="{{author.url}}" target="_zendesk_lotus"&gt;{{author.name}}&lt;/a&gt;
{{else}}
{{author.name}}
{{/if}}
with
the following link
helper:
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
Updating
the search results in older themes If you have an older theme, the search results
might use the {{meta}} 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.
You may need to update your CSS styling for the search results page to
look uniform.
Updating the author names of articles in the results Replace
the following div
tags:
{{meta}}
{{text}}
With
the
following:
<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;

For
end
result:
{{#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}}
Updating
the author names of posts in the
results Add:

{{#each path_steps}}
&lt;li title="{{name}}"&gt;&lt;a href="{{url}}"&gt;{{name}}&lt;/a&gt;&lt;/li&gt;
{{/each}}

For
end
result:
{{#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}}





Enable subsections in your help center theme

You can add subsections 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.


Note: Subsections are available for Guide Enterprise by default in standard themes and themes that were customized after March 29,
2019.


Applicable template
Section

Applicable object
section.sections



Recipe
Insert the following snippet into the Zendesk section page template,
section_page.hbs, after the header tag (<header
class="page-header">... ) and before the pagination tag
({{pagination}})
: {{#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}}






Add sidebar filters and results for multiple help centers to the search results page

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.
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.


Note: Unified search results and search across multiple help centers is supported by default
in standard themes and themes that were customized after September
25, 2019.

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 Adding a help center theme to Guide.
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 help_center_filters, filters, and
subfilters helpers in the Curlybars templating language to update the
following files:
Search results
CSS
JavaScript




Updating the search results template to add sidebar filters

You need to update the search results template to add sidebar filters and to loop through
the results.
Adding sidebar filters
This snippet is an example of how you can implement search facets in the search results
page sidebar using the new filter helpers.
Insert the following code in in the
search results template:


&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}}




Looping through the results This snippet is an example of how you can use
the {{results}} helper to loop through the unified search results.
Replace both
the {{article_results}} and {{post_results}} helpers
and their associated search-results-subheading H3s
in the search results
template with the
following:
{{#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}}





Updating CSS styling for the sidebar filters in the search results page

You can add CSS styling for the sidebar filters. The following example is based on the
Copenhagen theme.
Make sure the following CSS rules are included in your style.css file:

/***** 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;
}




Updating JavaScript for the collapsible sidebar in the search results page

You can add JavaScript for the collapsible sidebar in the search results page. The
following example is based on the Copenhagen theme.
Replace the following block in the script.js file in the custom theme:
// 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);
});
});
with the following code snippet:
// 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);
}
});
});




Adding the spam filter to help center

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.
The following new HTML elements have been added:
Article page

section element with class
"pending-comments-list"


span element with class
"pending-moderation-comment-badge"



Question page

section element with class
"pending-answers-list"


span element with class
"pending-moderation-answer-badge"





Add the following to your custom theme
stylesheet: .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;
}




Adding approvals to your help center

The standard Copenhagen theme displays approvals by default when the approval request
feature is turned on. If you're using a custom or marketplace
theme, you must update your theme to display approval requests to end users.
Note:

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.
The service catalog requires templating API v4. If you're using v3 or lower, upgrade to v4 before updating your custom
theme or manually customize the
lower templating API version to support approvals.




Applicable templates
approval_request_page.hbs
approval_request_list_page.hbs
The following assets:
approval_requests_bundle.js
approval_requests_translations_bundle.js





Recipe
Click the Download raw file icon on each template and asset file to
download.

Add the template files (.hbs) to the templates folder in your unzipped live
theme.
Copy all assets to the assets folder in your unzipped live theme.
Add the following code snippet to the document_head.hbs template, then delete
any other script starting with <script
type="importmap">.
{
"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'}}"
}
}


If necessary, you can customize the page templates.
Zip the theme and upload it to your help center.





Adding the service catalog to your help center

The standard Copenhagen theme displays service catalog by default when the service catalog
request feature is turned on. If you're using a custom or marketplace
theme, you must update your theme to display the service catalog to end users.
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 Copenhagen theme and change the implementation in the
src/modules/service-catalog folder.
Note:

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.
The service catalog requires templating API v4. If you're using v3 or lower, upgrade to v4 before updating your custom
theme or manually customize the
lower templating API version to support the service catalog.




Applicable templates
service_page.hbs
service_list_page.hbs
assets



Recipe
Click the Download raw file icon on each template and asset file to
download.

Add the template files (.hbs) to the templates folder in your unzipped live
theme.
Copy all assets to the assets folder in your unzipped live theme.
Add the following code snippet to the document_head.hbs template, then delete
any other script starting with <script
type="importmap">.
// 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);


Use the link helper to add a link to the service catalog page in the header.js
template.
Copy the following styles into your style.css
file: .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;
}

If necessary, you can customize the page templates.
Zip the theme and upload it to your help center.




Adding a service catalog or approvals on Templating API versions lower than 4

The Templating API version 4 includes a JSON helper 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.

To use the service catalog or approvals with lower Templating API versions
Remove the JSON helper from boolean and numbers.
Serialize strings with the json_stringify helper.
For complex objects, serialize each property individually.


The following example demonstrates how to adapt the service_page.hbs template. You'll need to modify
the other required templates in a similar way as well.
Replace the following original
code:
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;


With the
following:
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;





{
"@context": "https://schema.org",
"@type": "TechArticle",
"@id": "https://support.zendesk.com/hc/en-us/articles/4408832681626",
"url": "https://support.zendesk.com/hc/en-us/articles/4408832681626",
"headline": "Help center templating cookbook",
"description": "You can customize your help center's page templates and features using the Curlybars templating language to manipulate content, add functionalities like search enhancements, voting, sorting, and user profiles, and update your theme accordingly.",
"articleSection": "Using themes and customizing your help center",
"datePublished": "2021-10-16T03:47:21+00:00",
"dateModified": "2026-04-07T14:40:12.332172+00:00",
"inLanguage": "en-US",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://support.zendesk.com/hc/en-us/articles/4408832681626"
},
"author": {
"@type": "Organization",
"name": "Zendesk",
"@id": "https://www.zendesk.com"
},
"publisher": {
"@type": "Organization",
"name": "Zendesk",
"@id": "https://www.zendesk.com"
},
"isPartOf": {
"@type": "WebSite",
"name": "Zendesk Help",
"@id": "https://support.zendesk.com/hc/"
},
"about": {
"@type": "SoftwareApplication",
"name": "Zendesk",
"@id": "https://www.zendesk.com",
"softwareAddOn": {
"@type": "SoftwareApplication",
"name": "Guide",
"@id": "https://support.zendesk.com/hc/en-us/sections/4405298860954"
}
}
}
