Help Center templating cookbook (Guide Professional and Enterprise)

 

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.

Access to the page code is available on Guide Professional and Enterprise.

Note: Trial users are given the Guide Professional plan, which includes code editing options, but they can no longer access that feature if they do not purchase Guide Professional or Enterprise.

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 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 (Guide Enterprise)
• Add sidebar filters and results for multiple Help Centers to the search results page

About the Curlybars templating language

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.

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

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

• 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}} </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

• 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 the release of the new Community on November 30th, 2015.

Applicable template

• Article

Applicable HTML element

• <section class="article-comments">...</section>

Recipe

• 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

• 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 the release of the new Community on 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'}}
  <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

• 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 the release of the new Community on November 30th, 2015.

Applicable template

• Article

Applicable expression

• {{#each comments}}...{{/each}}

Recipe

• 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

• vote helper

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. In standard themes you can disable Instant Search if needed.

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

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

Applicable templates

• Following page

Recipe

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

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

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

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}}
    <dl class="request-details">
      <dt>{{t 'followup'}}</dt>
      <dd>{{link 'request' id=request.followup_source_id}}
  </dd>
    </dl>
  {{/if}}

Reference

• new request page

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

Note: Badges are available by default on a Professional plan 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 Achievements 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

1. Open the theme online code editor, go to an agent's user profile page.

   Page filename: user_profile_page.hbs

2. Find the edit helper declaration.

   {{edit}}

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

1. Open the theme online code editor, and go to

   Page filename: community_topic_page.hbs

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

   <li class="meta-data">{{author.name}}</li>

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

1. Open the theme online code editor, and go to

   Page filename: community_post_page.hbs

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

   <li class="meta-data">{{author.name}}</li>

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

1. Open the theme online code editor, and go to

   Page filename: user_profile_page.hbs

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

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

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 Curlybars 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}}
  <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 authors

Replace 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 results

Replace 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 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:

<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 (Guide Enterprise)

On Guide Enterprise, 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.

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

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. You can find all the code snippets in this GitHub gist. 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 <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>

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}}
        <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);
      }
    });
  });