Each help center theme consists of a collection of editable page templates. 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.
- 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 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
- Add voting buttons to articles
- 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
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 page templates that define the layout of different types
of pages in
help
center. 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}}.
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}}
<li>
<div class="comment-avatar">
<img src="{{author.avatar_url}}" alt="Avatar" />
</div>
<div class="comment-author">
{{author.name}}
</div>
</li>
{{/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.
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.
- Category
- Section
- Article
- Specify the category, section, or article id in a
isblock:{{#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}}
<p><strong>This is important security information! Pay attention!</strong></p>
{{/is}}
{{#is section.id 203133596}}
<p>Videos available at <a href="https://www.somelink.com">Learning to fly</a></p>
{{/is}}Reference
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".
- Header
{{#if alternative_locales}}...{{/if}}
- 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}}
<div class="dropdown language-selector" aria-haspopup="true">
<a class="dropdown-toggle">
{{#is current_locale.name 'English (US)'}}
English
{{else}}
{{current_locale.name}}
{{/is}}
</a>
<span class="dropdown-menu dropdown-menu-end" role="menu">
{{#each alternative_locales}}
<a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem">
{{#is name 'English (US)'}}
English
{{else}}
{{name}}
{{/is}}
</a>
{{/each}}
</span>
</div>
{{/if}}Reference
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.
- Header
{{#each alternative_locales}}...{{/each}}
- Replace the
<a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem"> {{name}} </a>expression with the following conditional expression:{{#is name 'Français'}} {{! do nothing }} {{else}} <a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem"> {{name}} </a> {{/is}}
Example
{{#each alternative_locales}}
{{#is name 'Français'}}
{{! do nothing }}
{{else}}
<a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem">
{{name}}
</a>
{{/is}}
{{/each}}Reference
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.
- Article
<section class="article-comments">...</section>
- Insert the following div tag after the comment section's heading tag,
<h2>{{t 'comments'}}</h2>, preferably after the{{#if comments}}expression, if any, to ensure the sorters don't appear if nobody left comments yet:<div class="comment-sorter"> Sort by: {{#each comment_sorters}} <a aria-selected="{{selected}}" href="{{url}}">{{name}}</a> {{/each}} </div>
Example
<section class="article-comments">
<h2>{{t 'comments'}}</h2>
{{#if comments}}
<div class="comment-sorter">
Sort by:
{{#each comment_sorters}}
<a aria-selected="{{selected}}" href="{{url}}">{{name}}</a>
{{/each}}
</div>
<ul class="comment-list">
{{#each comments}}
...Reference
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.
- Article
{{#form 'comment'}}...{{/form}}
- Find and replace the
{{textarea 'body'}}expression in the form object with{{wysiwyg 'body'}}
Example
{{#form 'comment' class='comment-form'}}
<div class="comment-avatar">
{{user_avatar class='user-avatar'}}
</div>
<div class="comment-container">
{{wysiwyg 'body'}}
<div class="comment-form-controls">
{{input type='submit'}}
</div>
</div>
{{/form}}Reference
Enable users to vote on article comments
By default, users can vote on articles. You can also let them vote on article comments.
- Article
{{#each comments}}...{{/each}}
- Insert the following div tag after the
<li id="{{anchor}}">tag:<div class="comment-vote vote"> {{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"}} </div>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}}
<li id="{{anchor}}" class="comment">
<div class="comment-vote vote">
{{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"}}
</div>
<div class="comment-avatar {{#if author.agent}} comment-avatar-agent {{/if}}">
<img src="{{author.avatar_url}}" alt="Avatar">
</div>
...Reference
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.
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.
- Whichever template contains your Search expression, (most often it's the Header or Home page template)
Applicable expression
- {{search}}
- Add
instant=trueto the Search expression.{{search instant=true}}
Example
<div class="search-box">
<h1 class="help-center-name">{{help_center.name}}</h1>
{{search instant=true}}
</div>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.
- Following page
- Under the
<nav>tag, insert the following code:<div class="my-activities-following-header"> <span class="dropdown"> <span class="dropdown-toggle"> {{current_filter.label}} </span> <span class="dropdown-menu" role="menu"> {{#each filters}} <a href="{{url}}" aria-selected="{{selected}}" role="menuitem"> {{name}} </a> {{/each}} </span> </span> </div>
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.
- 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}}
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.
- Request list page
{{#form 'requests_filter'}}...{{/form}}
- 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'}}
<div class="request-table-filters">
{{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'}}
</div>
{{/form}}Reference
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.
After you add the code to your custom theme, you must enable the feature, see Setting CC permissions.
- Request page
{{#form 'comment' class='comment-form'}}...{{/form}}
- Insert the following snippet inside
the comment form.
{{#if help_center.request_ccs_enabled}} <div class="comment-ccs"> {{token_field 'ccs' class="ccs-input"}} </div> {{/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.
- 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}} <dl class="request-details"> <dt>{{t 'followup'}}</dt> <dd>{{link 'request' id=request.followup_source_id}} </dd> </dl> {{/if}}
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.
- Article
- Add the following code to the Article Page template:
{{#with article}} <div class="article-votes"> <span class="article-votes-question">{{t 'was_this_article_helpful'}}</span> <div class="article-votes-controls" role='radiogroup'> {{vote 'up' role='radio' class='button article-vote article-vote-up'}} {{vote 'down' role='radio' class='button article-vote article-vote-down'}} </div> <small class="article-votes-count"> {{vote 'label' class='article-vote-label'}} </small> </div> {{/with}}
Add badges to your custom help center theme
This topic covers:
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:
<li class="meta-data">{{author.name}}</li> - Add this snippet to the line after
it:
{{#each author.badges}} <li class="meta-data"> {{#is category_slug "titles"}} <span class="status-label">{{name}}</span> {{/is}} </li> {{/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:
<li class="meta-data">{{author.name}}</li> - Add this snippet to the line after
it:
{{#each author.badges}} <li class="meta-data"> {{#is category_slug "titles"}} <span class="status-label">{{name}}</span> {{/is}} </li> {{/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:
<h1 class="name"> {{#if user.url}} <a href="{{user.url}}" target="_zendesk_lotus" title="{{t 'open_user_in_support'}}">{{user.name}}</a> {{else}} {{user.name}} {{/if}} </h1> - Replace that snippet with the
following:
<h1 class="name"> {{#if user.url}} <a href="{{user.url}}" target="_zendesk_lotus" title="{{t 'open_user_in_support'}}">{{user.name}}</a> {{else}} {{user.name}} {{/if}} {{#each user.badges}} {{#is category_slug "titles"}} <span class="status-label">{{name}}</span> {{/is}} {{/each}} </h1> <div style="margin-top: 1em;"> {{#each user.badges}} {{#is category_slug "achievements"}} <div style="float: left; text-align: center; padding: 0.5em; margin: 0.5em; background: white; border-radius: 0.2em;"> <img src="{{icon_url}}" height="40"><br> <span style="font-size: 0.8em;">{{name}}</span> </div> {{/is}} {{/each}} </div>
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.
link helper in the Curlybars templating language,
see link helper in the templating
documentation
to update the following templates:
ArticlesMake the following updates to the Article page template.
Updating the article's author nameReplace the following
if
block:
{{#if article.author.url}}
<a href="{{article.author.url}}" target="_zendesk_lotus">
{{article.author.name}}
</a>
{{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 namesReplace the following if
block:
{{#if author.url}}
<a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
{{author.name}}
{{/if}}
with
the following link
helpfer:
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
Updating
the avatar of the article and comment authorsReplace the following image tag:
<img src="{{article.author.avatar_url}}" alt="Avatar"/>
with the
following link
helper:
{{#link "user_profile" id=article.author.id class="user-profile"}}
<img src="{{article.author.avatar_url}}" alt="Avatar" />
{{/link}}
Community
postsMake the following updates to the Community Post page template.
Updating the names of post authorsReplace the following if
block:
{{#if post.author.url}}
<a href="{{post.author.url}}" target="_zendesk_lotus">
{{post.author.name}}
</a>
{{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 authorsReplace the following if
block:
{{#if author.url}}
<a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{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 authorsReplace the following image tag:
<img src="{{post.author.avatar_url}}" alt="Avatar"/>
with the
following link
helper:
{{#link "user_profile" id=post.author.id class="user-profile"}}
<img src="{{post.author.avatar_url}}" alt="Avatar" />
{{/link}}
Updating
the avatars of the comment authorsReplace the following image tag:
<img src="{{author.avatar_url}}" alt="Avatar"/>
with the following
link
helper:
{{#link "user_profile" id=author.id class="user-profile"}}
<img src="{{author.avatar_url}}" alt="Avatar" />
{{/link}}
Search
resultsMake the following updates to the Search results template.
Updating the author names of articles in the resultsReplace the following
if block in the {{#each article_results}}
block:
{{#if author.url}}
<a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{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 resultsReplace the following if
block in the {{#each post_results}}
block:
{{#if author.url}}
<a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{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 themesIf 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 resultsReplace the following div tags:
<div class="search-result-meta">{{meta}}</div>
<div class="search-result-description">{{text}}</div>
With the following:
<ol
class="breadcrumbs">
{{#each path_steps}}
<li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
{{/each}}
</ol>
<div class="search-result-description">
{{text}}
</div>
<div class="search-result-meta">
<span dir="auto" class="search-result-meta-name">
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
</span>
<span class="search-result-meta-time">{{date created_at}}</span>
</div>
For end result:
{{#each article_results}}
<li class="search-result">
<a href="{{url}}" class="search-result-link">{{title}}</a>
{{#if vote_sum}}
<span class="search-result-votes">{{vote_sum}}</span>
{{/if}}
<ol class="breadcrumbs">
{{#each path_steps}}
<li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
{{/each}}
</ol>
<div class="search-result-description">
{{text}}
</div>
<div class="search-result-meta">
<span dir="auto" class="search-result-meta-name">
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
</span>
<span class="search-result-meta-time">{{date created_at}}</span>
</div>
</li>
{{/each}}
Updating
the author names of posts in the
resultsAdd:
<ol class="breadcrumbs">
{{#each path_steps}}
<li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
{{/each}}
</ol>
For end result:
{{#each post_results}}
<li class="search-result">
<a href="{{url}}" class="search-result-link">{{title}}</a>
<ol class="breadcrumbs">
{{#each path_steps}}
<li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
{{/each}}
</ol>
<div class="search-result-description">
{{text}}
</div>
<div class="search-result-meta">
<span dir="auto" class="search-result-meta-name">
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
</span>
<span class="search-result-meta-time">{{date created_at}}</span>
<span class="search-result-meta-count">
{{t 'comments_count' count=comment_count}}
</span>
</div>
</li>
{{/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.
- Section
section.sections
- Insert the following snippet into the Zendesk section page template, wherever you want
to display the list of
subsections:
{{#if section.sections}} <div class="section-tree"> {{#each section.sections}} <section class="section"> <h3 class="section-tree-title"> <a href="{{url}}">{{name}}</a> </h3> {{#if articles}} <ul class="article-list"> {{#each articles}} <li class="article-list-item{{#if promoted}} article-promoted{{/if}}"> {{#if promoted}} <span data-title="{{t 'promoted'}}" class="icon-star"></span> {{/if}} <a href="{{url}}" class="article-list-link">{{title}}</a> {{#if internal}} <span class="icon-lock" title="{{t 'internal'}}"></span> {{/if}} </li> {{/each}} </ul> {{#if more_articles}} <a href="{{url}}" class="see-all-articles"> {{t 'show_all_articles' count=article_count}} </a> {{/if}} {{/if}} </section> {{/each}} </div> {{/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.
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.
help_center_filters, filters, and
subfilters helpers in the Curlybars templating language to update the
following files:
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 <div class="search-results"> in the
search results template:
<section class="search-results-sidebar">
{{#if help_center.community_enabled}}
<section class="filters-in-section collapsible-sidebar">
<h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_type'}}</h3>
<ul>
{{#each filters}}
<li>
<a href="{{url}}" class="sidenav-item" aria-selected="{{selected}}">{{name}} ({{count}})</a>
</li>
{{/each}}
</ul>
</section>
{{/if}}
{{#if subfilters}}
<section class="filters-in-section collapsible-sidebar">
{{#is current_filter.identifier 'knowledge_base'}}
<h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_category'}}</h3>
{{/is}}
{{#is current_filter.identifier 'community'}}
<h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_topic'}}</h3>
{{/is}}
<ul>
{{#each subfilters}}
<li>
<a href="{{url}}" class="sidenav-item" aria-selected="{{selected}}">{{name}} ({{count}})</a>
</li>
{{/each}}
</ul>
</section>
{{/if}}
</section>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}}
<ul class="search-results-list">
{{#each results}}
<li class="search-result-list-item result-{{type}}">
<h2 class="search-result-title">
<a href="{{url}}" class="results-list-item-link">{{title}}</a>
</h2>
<article>
<div class="search-result-icons">
{{#if vote_sum}}
<span class="search-result-votes">{{vote_sum}}</span>
{{/if}}
{{#if comment_count}}
<span class="search-result-meta-count">
{{comment_count}}
</span>
{{/if}}
</div>
<ul class="meta-group">
<li>
<ol class="breadcrumbs search-result-breadcrumbs">
{{#each path_steps}}
<li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
{{/each}}
</ol>
</li>
<li class="meta-data">{{author.name}}</li>
<li class="meta-data">{{date created_at}}</li>
</ul>
<div class="search-results-description">{{text}}</div>
</article>
</li>
{{/each}}
</ul>
{{else}}
<p>
{{t 'no_results_unified'}}
{{#link 'help_center'}}
{{t 'browse_help_center'}}
{{/link}}
</p>
{{/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 > li {
padding: 20px 0;
}
.search-results-list > li:first-child {
border-top: 1px solid #ddd;
}
.search-results-list > 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);
}
});
});
64 Comments
FYI - the template formatting is messed up for: "Add sorting for subscription types in the My Activities Following"
Thanks for the heads-up, Peter! I'll send this over to our Documentation team.
I tested this in our Sandbox and the CC appears in two places on the Request page. In addition, the CC is off to the left of the comment box. Is there a way to get the CC to show up only once? See screen prints:
Appears only to left when clicking into a request.
appears both on Left and above comment once I click into the comment field.
I tested this on our live Help Center and the appearance and double CC is the same as in our Sandbox as seen in the above screen prints.
Any way to have the CC show up only once (preferably above the comment instead of to the left as seen on submit a request form)?
Hey Corrin! I'm going to see if I can find somebody to look over this with you.
Thanks Jessica! That would be great!
I have added {{related_articles}} and {{recent_activity}} helpers to my article page. One displays a list with a h2 tag and the other displays a list with a h3 tag!
Also my {{recent_activity}} is showing just a '0' instead of '0 comments' I'd like to change that too.
Can I get to these templates and alter one of them so the headings are both the same size?
Can I get to these templates and alter one of them so the headings are both the same size and the comment count has extra text?
Thanks,
Michael
Hi Michael-
By design the various helpers and objects of Curlybars have different default formatting, they are not related to each other but instead intended to provide different customization opportunities. However Help Center is highly customizable and it is possible to customize the CSS or implement JS/jQuery to change the default behavior. The recent activity formatting, for example, has its own section of CSS that can be easily customized directly within Help Center:
The Related articles helper has less options but is also customizable within the CSS:
This can however vary depending on the theme you're using the Help Center therefore it is recommended to use your browser's developer tools to locate the CSS class for the various Helpers. In regards to the 0 in the recent activity helper, this count is associated to the number of comments on an article, however it should hide itself if the comment count is 0. Therefore, I'd recommend submitting a ticket to support@zendesk.com including your code and the page it's added to in your Help Center and we'd be happy to take a look into this behavior.
Hey.This is awesome! Is there plans to make Instant Search available via the search API?
Hey Brenden!
Instant Search is really just a visual/UI type of feature; It's returning the same results you'd get in a regular search; it just surfaces them without needing to click "Search". That being the case, the regular search endpoints should get you the information you need. Unless I'm misunderstanding your question, in which case please let me know!
Hey don't know if any one has any ideas, or if this is the place to ask (sorry newbie question!):
Is it possible to use Curlybars to display a block of HTML depending on the language the user is currently on? So for example, in the Homepage template, I'd only like to show a block of HTML if the user is visiting the page in English, all other languages, don't show the block of HTML.
I've found that the customizing page templates for specific categories, sections or articles is really helpful. However, I'd like to customize all articles within one category with the same content. Is that possible? Or do I have to use the "is helper" and list every article's id on the article template page?
@Liam
You can use Dynamic Content to insert html into the Help Center.
@Eura
Are you trying to have different article templates depending on the Category they belong to? It's way out of my skill level, but an interesting use case, hope someone here can give a real answer.
@Eura,
Currently working on the same problem: multiple categories I'd like to put into different groups of styles. I tried listing out their IDs on the category template using the #is helper, but I can only get this to work for a single ID.
I also tried nesting #is helpers, building an array of helpers and using #each and #is, and trying to combine #is helpers and parameters with OR and AND statements, but I couldn't get anything to work.
Zooming out, the idea is to have a one off landing page for a special theme of articles that share a specific style, and then to have another one off category that serves as a news/updates page, also with a separate style.
Appreciate any advice and/or solutions.
Thanks.
@jacob - yes, that was the use case. It would be really great if you could use #is tags wth category ids in the article page.
@kevin we were even trying do something simple like have a button that only shows up on the article pages within one category! We ended up going another direction, but wish there was more customization that could be done to the article pages.
@Eura
Sounds like the same issue. I've been testing on a sandbox instance by going through all available properties in a template page. For example, I'll open up the editor, go to the category page, and the referencing the API docs I'll list out each property in {{property}} to see what works. Not all of them go through.
For your specific issue, it looks like the Article template can reference a section property. So if all of the articles you wanted to include a button on were in a single section, I think you could have a separate article template by splitting the article template code as follows:
##Article template source:
{{#isnt section.id <insert section id you want to be custom>}}...
regular article template code
...
{{/isnt}}
{{#is section.id <insert same section id as above>}}
...
custom article template code
...
{{/is}}
I didn't have time to fully test this.
Thanks,
Kevin
Hello, I would like to know if I can include a dynamic content placeholder in a '#is name' statement. So, instead of specifying the name here, if I can have a dynamic placeholder, something like
Thanks!
Hey @Vassillios,
Sorry but you cannot use DC in a '#is name' statement.
Can you please elaborate what is the reason behind using DC in a '#is' statement?
Thanks
This is the reason:
I have adapted the homepage as following:
The dynamic content I have created for showing the 'Get Started' in Greek. is the following:
@Vassillios,
I recommend you to use categories ID instead of name. This way you do not have to worry about language.
Thanks
Brilliant @Trapta!!
Thanks a lot!!! You made my life easier today :)
@Vassillios,
Glad to hear that. Enjoy! :)
I have a similar question to https://support.zendesk.com/hc/en-us/articles/216367358/comments/115002121127.
I would like to reference a settings variable in an {{is}} statement.
I need to conditionally show some content only on the contact article, but I'd prefer not to hard-code the article ID directly into the template. The settings variable would be a perfect fit for this, but it doesn't seem to work.
Is this behavior supported?
Thank you!
Hi Devorah! Let me check with some of our coding gurus to see this is possble. Stand by!
Hi @Devorah!
Sorry but this behavior is not supported. You cannot use settings variable in {{is}} statement :(
Thanks
Hi Devorah,
We do support comparison with a setting. However, text field settings will be text strings, which fail the comparison with article ids which are integers.
You could try to do it in css, by, for example, adding the article.id as a css id to the element you want to show/hide, and then use the setting in css to target that element.
For example:
I was wondering, though, if, in your specific use case, you couldn't just add that content directly to the article?
Hope this helps
@Augusto, Cool Tip!
+1
Thanks
Thanks for the responses @Jessie, @Trapta!
@Augusto -
I inverted my example for simplicity sake, but what I actually need to do is show some content on EVERY article page except one:
I'd prefer not to put template-level content into an article and run the risk that content-editors modify or delete it. The class solution is clever but perhaps a bit more brittle than using {{#is}} with the integer because then we've got to hard-code the article id in two places as opposed to one. But a good alternative!
And thanks for the explanation about the settings text field. That explains why this worked:
but this didn't:
Any plans to introduce an integer field into the manifest.json file?
Hi,
I am trying to make the below-mentioned code work but for some reason it is not working. Can anyone guide me why it is not working or how to make it work?
Hi Trapta,
I think you need to escape the context. Something like:
{{#is ../settings.visibility 'show'}}as described in https://developer.zendesk.com/apps/docs/help-center-templates/introduction#array-iterator-helper
@Augusto, I did it and the only difference I found is that escaping the context doesn't throws any error but it doesn't work as expected.
Thanks
Trapta
Please sign in to leave a comment.