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 Federated Search to include external content in help center search
- 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 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.
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">
<section class="search-results-sidebar">
{{#if source_filters}}
<section class="filters-in-section collapsible-sidebar" aria-expanded="false">
<button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
</button>
<h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_source'}}</h3>
<ul class="multibrand-filter-list multibrand-filter-list--collapsed">
{{#each source_filters}}
<li>
{{#if selected}}
<a href="{{url}}" class="sidenav-item current" aria-current="page">
{{else}}
<a href="{{url}}" class="sidenav-item">
{{/if}}
<span class="sidenav-subitem filter-name">{{name}}</span>
<span class="sidenav-subitem doc-count">({{count}})</span>
</a>
</li>
{{/each}}
<button class="see-all-filters" aria-hidden="true" aria-label="{{t 'show_more_sources'}}">{{t 'show_more_sources'}}</button> </ul>
</section>
{{/if}}
{{#if type_filters}}
<section class="filters-in-section collapsible-sidebar" aria-expanded="false">
<button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
</button>
<h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_type'}}</h3>
<ul class="multibrand-filter-list multibrand-filter-list--collapsed">
{{#each type_filters}}
<li>
{{#if selected}}
<a href="{{url}}" class="sidenav-item current" aria-current="page">
{{else}}
<a href="{{url}}" class="sidenav-item">
{{/if}}
<span class="sidenav-subitem filter-name">{{name}}</span>
<span class="sidenav-subitem doc-count">({{count}})</span>
</a>
</li>
{{/each}}
</ul>
</section>
{{/if}}
{{#if subfilters}}
<section class="filters-in-section collapsible-sidebar" aria-expanded="false">
<button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
</button>
{{#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 class="multibrand-filter-list multibrand-filter-list--collapsed">
{{#each subfilters}}
<li>
{{#if selected}}
<a href="{{url}}" class="sidenav-item current" aria-current="page">
{{else}}
<a href="{{url}}" class="sidenav-item">
{{/if}}
<span class="sidenav-subitem filter-name">{{name}}</span>
<span class="sidenav-subitem doc-count">({{count}})</span>
</a>
</li>
{{/each}}
{{#is current_filter.identifier 'knowledge_base'}}
<button class="see-all-filters" aria-hidden="true" aria-label="{{t 'show_more_categories'}}">{{t 'show_more_categories'}}</button>
{{/is}}
{{#is current_filter.identifier 'community'}}
<button class="see-all-filters" aria-hidden="true" aria-label="{{t 'show_more_topics'}}">{{t 'show_more_topics'}}</button>
{{/is}}
</ul>
</section>
{{/if}}
</section>
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}}
<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}}" target="{{target}}">{{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}}
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:
Articles
Make 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 names
Replace 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 authors
Replace 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 posts
Make 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 authors
Replace 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 authors
Replace 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 authors
Replace 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 results
Make 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 results
Replace 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 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 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 results
Add:
<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);
}
});
});
66 Comments
@Augusto, Thanks! I got it working now.
Trapta
@Trapta Happy to hear that :)
Hi,
I have added this part of coding in order to have a functioning CC field for our webform:
{{#if help_center.request_ccs_enabled}}
<div class="comment-ccs">
{{token_field 'ccs'
class="ccs-input"}}
</div>
{{/if}}
However in this way the CC field is appearing as first field
I also already tried the following:
$('#new_request.request-form label:contains("Subject")').parent().insertBefore('#new_request.request-form label:contains("CC")');
$('#new_request.request-form label:contains("Description")').parent().insertBefore('#new_request.request-form label:contains("CC")');
but it is not working.
Thanks for your help,
Marco
Hi Marco! Welcome to the Community!
I'm checking to see if one of our Community Moderators can jump in here to help you out. Stand by!
I'm wondering if there is a way to manually show or hide custom html elements based on permissions.
Thanks!
Hi James,
You may find this article, Hide or show HTML based on user's role or group, useful for that.
Hi Marco,
I'm not really getting why you would need to do this to make a cc field work on your webform? You should be able to create and place a custom field any way you want as I understand it.
There is a post on rearranging ticket fields here - it is a bit dated and you may need to browse through the comments to find the best fit for you - if you still need to do it this way.
Hope that helps you out!
Hi,
I'm starting to use Zendesk HC and I would like to know how to fire an event when the user votes UP or DOWN in the article page.
I already tried some options, but did not work.
Thanks in advance.
Renato
Hi Renato,
I don't know the specific answer to your question, but there is a Tips & Tricks post here that also deals with the article vote event, so perhaps it includes something to get you started.
Hope that helps.
I'm searching a way to allow that the search result overview snippets of the articles are defined. That text is taken from the articles first lines. However, if I add a warning or something then the warning appears. Which makes no sense. So I would like to have the actual article still show the warning at the top, but the snippet in search results should skip the warning. Can this be done somehow?
Hi Sebastian
If the warning is part of the content is will be shown in the search results, but depending on how generic the warning is or how many different ones you need to apply, you could maybe use templates to solve the problem.
If you are on Guide Professional or Enterprise and you need a generic warning to appear on all article pages you can change the default article template to include your warning.
If you need the warning to appear only on some articles and you are on Guide Enterprise you can create multiple theme templates and have up to 10 different templates with different warnings and apply them to the articles that should have them.
When the warning is a part of the template and not the article it self it will not render in search results.
If this does not solve your problem, could you provide a bit more details about your use case?
Hello Gorka,
We have many help articles without a warning. The actual case is an article about our telegram support channel. We added a red warning at the top about scammers being active on the channel, imposing admin names or the "send x receive 10*x" scam and so on. So it's a warning especially for that task.
We are on Enterprise Level.
We have other warnings in other articles, I guess maybe 2 or 3% of the articles have warnings related to it's content. And unique.
I saw the search engines on here are more google like. So a snippet taken out of the content of an article. So more seems to be possible.
Hi Sebastian
The snippet shown in the search results are based on the search term the user inputs. If your warning has relevancy in the search it will then show up, provided that the warning is part of the content of the article.
For us to understand your use case better, could you provide a screenshot of the search results page including the search term with an explanation of what you would like not to be shown in the search results
Got a pop-up prompting me to apply this code to section_page.hbs, but now the sub-sections results page is completely blank. Haven't heard from Zendesk Support. Anyone know what may be causing the issue?
Hi @Robert Cabral,
I think it's because according to the document when you replace the code of section template with the code mentioned in the document, you remove the else condition too which checks if a section has sub-section or not.
I recommend updating the code with else condition. Try the below code and let me know if it works for you:
Let me know if this solves your issue.
Team Diziana
@Trapta, that somewhat helped, but the alignment is way off. Instead of looking like this: https://support.datacamp.com/hc/en-us/categories/360000134714-Individual-User-Subscriptions
It looks like this: https://support.datacamp.com/hc/en-us/sections/360001206094-Purchasing-a-New-Subscription
I'm experiencing the same issue as Robert Cabral. The page alignment is completely off. Is there another page where edits need to be made in conjunction with this one? I've tried various 'fixes' and nothing seems to work.
TIA.
+1 experiencing similar issues as Robert and Dawn. Seems like the code Trapta added 2 months ago worked a bit because before (using the code that's still on the Zendesk page) no longer showed my articles, but showed a blank page. Now the articles are showing with Trapta's code, but it's just slightly off. What needs to be done to fix this?
Replace the code in section template with the below code:
It should fix the alignment issue.
Thanks
I have an issue in android, that vote section doesn't appear.
I changed to an anonymous vote.
I tried to add these lines of code "add voting buttons to the article" section, but I can't find the article template file.
How could I do that in Android?
For the search filter sidebar, I'd like to hide the top level filter... Types, and just display the subfilter on categories because I do not use multiple brands or the community at this time
Can I do this?
Hi Amy Gracer,
Drop this code into your search_results.hbs and let me know if thats what you are trying to accomplish.
<script>
window.onload = function(){
document.getElementsByClassName('sidenav-item')[0].style.display = 'none';
}
</script>
Hope this helps!
Ryan
Ryan
Thank you so much for providing the code snippet. I was able to accomplish what I needed to by hiding several sections of the default code, including all of the community helpers and the expanders.
I actually got it pretty quickly, but didn't realize it because the preview still showed "By Types" even though my help center was showing only By Category as I intended.
,
Glad you got it figured out! :-)
I think most of the data here is no longer relevant as it already implemented by default in the newer themes
Hey Efrat,
Thanks for sharing your feedback!
In some cases, the above documentation can be useful to show what code does what in your Guide theme. Although this is already implemented by default, the above can show them exactly where to go to remove the functionality from their Help Center if they wish to do so.
Let me know if you have any questions for me.
Cheers!
Amy Gracer would you be able to provide more detail or a code example as to how you hid the top level filter in the search results sidebar? I would like to do the same as you as we don't use Communities and I want the Category filters to be obvious and immediately available upon arrival. Note: We are using Guide Enterprise. Thanks.
Additional question: Has anyone found a way to offer the user a way to filter in the sidebar by some kind of tag or label associated with the article?
Eric Miller this is only possible after heavy customization.
In order for this to work you have to get all the articles from the search results thru javascript.
Then get all the tags/labels and build a navigation tree, and insert that in the sidebar, again with javascript.
With some additional Javascripts functions you'll be able to toggle/show/hide the articles from the search results.
I would say a rather experienced developer should be able to build this within 2 days
Hi!
So I want to have a different header on each category page. I have the main header on the main page of the Help Center. Each of our categories is one of our products, so on those category pages, I want to have a different header image that would match the product. And then the appropriate header on the sections and articles again based on the product. So, to maybe clarify a little, on the main page, I want our company header. Then on Product A's category, section and article pages, I want Product A's logo in the header. In Product B's category, section and article pages, I want Product B's logo. And so on.
I see there is an option to edit category, section and article templates using the #is option but not the header file.
Would there be a way to accomplish something like that?
Please sign in to leave a comment.