Help Center templating cookbook (Professional and Enterprise) Follow

team professional enterprise plans

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.

Note: Access to the page code is available on Team, Professional, and Enterprise. Trial users are given the Professional plan, which includes code editing options, but they can no longer access that feature if they purchase the Essential plan.
This article covers the following topics:

Related topics:

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.

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

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

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

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

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

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

Add Instant Search (autocomplete search) results to your Help Center

You can display links to suggested articles while the user is entering their search term by enabling Instant Search. The user can select matched articles directly from the Search box without going to the search result page first.

Note: Instant Search is available by default in standard themes and themes that were customized after the release Instant Search on July 5th, 2016.
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}}

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

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

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:
    <div class="comment-actions-container">
     <div class="comment-vote vote" role='radiogroup'>
     {{vote 'up' role='radio' class='vote-up' selected_class='vote-voted'}}
     {{vote 'sum' class='vote-sum'}}
     {{vote 'down' role='radio' class='vote-down' selected_class='vote-voted'}}
     </div>
     <div class="comment-actions actions">
     {{actions}}
     </div>
     </div>
Have more questions? Submit a request

Comments

  • 0

    FYI - the template formatting is messed up for: "Add sorting for subscription types in the My Activities Following"

     

  • 0

    Thanks for the heads-up, Peter! I'll send this over to our Documentation team. 

  • 0

    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)?

  • 0

    Hey Corrin! I'm going to see if I can find somebody to look over this with you.

  • 0

    Thanks Jessica!  That would be great!

  • 0

    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

  • 0

    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. 

  • 0

    Hey.This is awesome! Is there plans to make Instant Search available via the search API?

  • 0

    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!

  • 0

    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.

Please sign in to leave a comment.

Powered by Zendesk