English (US)
  1. Zendesk help
  2. Guide
  3. Using Guide for help center
  4. Using themes and customizing your Help Center

Help center templating cookbook

Charles Nadeau
  • Edited
Zendesk Documentation Team

What's my plan?

Suite Growth, Professional, Enterprise, and Enterprise Plusprofessional enterprise plans

Each help center theme consists of a collection of editable page templates and custom pages. You can use the help center templating language, Curlybars, to access help center data and manipulate the content in your pages.

This article provides a list of recipes with code snippets you can use. Keep in mind that, some of the functionality in these recipes might already be in your help center, depending on whether you are usinga standard theme or a customized themeand the date you enabled your help center.

Note:Trial users are given the Professional plan, which includes code editing options, but they will no longer be able to access that feature if they purchase Suite Team.
This article covers the following topics:

About the Curlybars templating language

Your help center is built on a theming framework that includes its own templating language for advanced customizations. Each help center theme consists of a collection of editable templates and optional custom pages.

Editable page templatesdefine the layout of each page. For example, there's a template for knowledge base articles, a template for the list of requests, and so on. A template is simply a text file to be rendered into an HTML page when a user wants to see it. Each template consists of a mix of HTML markup and expressions identifiable by double curly brackets such as{{post.title}}.

Custom pagesare built into the code base of your help center theme and have a specific URL that you can link from anywhere in your help center. You can use custom pages to create and code pages from scratch that meet your individual requirements. For example, you can use custom pages to create special landing pages for your help center or even create new pages to embed content from sources outside of Zendesk.

The templating language is named Curlybars and implements a large subset of theHandlebarslanguage. 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}} 
  •  
     Avatar 
     
     {{author.name}} 
     
    •  {{/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:

    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 aisblock:
      {{#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}} 
    This is important security information! Pay attention!
     {{/is}} {{#is section.id 203133596}} 
    Videos available at Learning to fly
     {{/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}} 
      {{#is current_locale.name 'English (US)'}} English {{else}} {{current_locale.name}} {{/is}}   {{#each alternative_locales}}  {{#is name 'English (US)'}} English {{else}} {{name}} {{/is}}  {{/each}}  
     {{/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 {{name}} expression with the following conditional expression:
      {{#is name 'Français'}} {{! do nothing }} {{else}}  {{name}}  {{/is}}

    Example

    {{#each alternative_locales}} {{#is name 'Français'}} {{! do nothing }} {{else}}  {{name}}  {{/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 instandard themesand themes that were customized after the release of the new Community on November 30th, 2015.
    Applicable template
    • Article
    Applicable HTML element
    • ...
    Recipe
    • Insert the following div tag after the comment section's heading tag,

      {{t 'comments'}}

      , preferably after the{{#if comments}}expression, if any, to ensure the sorters don't appear if nobody left comments yet:
       Sort by: {{#each comment_sorters}} {{name}} {{/each}}

    Example

     
    {{t 'comments'}}
     {{#if comments}}
     Sort by: {{#each comment_sorters}} {{name}} {{/each}} 
       {{#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 instandard themesand 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'}} 
     {{user_avatar class='user-avatar'}} 
     
    {{wysiwyg 'body'}}
     {{input type='submit'}} 
     
     {{/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 instandard themesand 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<李id = "{{锚}}">tag:
       {{vote 'up' class="article-vote-up" selected_class="vote-voted"}} {{vote 'sum' class="article-vote-sum"}} {{vote 'down' class="article-vote-down" selected_class="vote-voted"}}

      The vote helpers above borrow the CSS classes for articles votes to style the comment vote links. You can define your own classes to style the comment votes.

    Example

    {{#each comments}} 
  •  {{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"}} 
     Avatar 
     ...

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

    Note:Instant Search is available by default instandard themesand themes that were customized after the release Instant Search on July 5th, 2016. You can disable Instant Search, if needed, by removing it from your theme.

    当启用即时搜索时,最多6 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
    • Addinstant=trueto the Search expression.
      {{search instant=true}}

    Example

     
    {{help_center.name}}
     {{searchinstant=true}}

    Add Federated Search to include external content in help center search

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

    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
    .
     {{#if source_filters}}  {{/if}} {{#if type_filters}}  {{/if}} {{#if subfilters}}  {{/if}}

    Looping through the results

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

    {{#如果结果}}< ul类= >“search-results-list”{{#each results}} 
  •  
      {{title}} {{#if is_external}}    {{/if}}  
     
     
     {{#if vote_sum}} {{vote_sum}} {{/if}} {{#if comment_count}}  {{comment_count}}  {{/if}} 
     
       
    •  
         {{#each path_steps}} 
      1. {{name}}
        2.  {{/each}} 
       
      •  
    • {{author.name}}
      •  
    • {{date created_at}}
      •  
     
    {{text}}
     
     
    •  {{/each}}  {{else}} 
     {{t 'no_results_unified'}} {{#link 'help_center'}} {{t 'browse_help_center'}} {{/link}} 
     {{/if}}

    Add sorting for subscription types in the My Activities Following page

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

    Applicable templates
    • Following page
    Recipe
    • Under the

    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 instandard themesand 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

    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 instandard themesand 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'}} 
     {{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'}} 
     {{/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.

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

    After you add the code to your custom theme, you must enable the feature, seeSetting 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}} 
       {{token_field 'ccs' class="ccs-input"}} 
       {{/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 instandard themesand 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}} 
       
      {{t 'followup'}}
       
      {{link 'request' id=request.followup_source_id}} 
       
       {{/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:
      {{#with article}} 
       {{t 'was_this_article_helpful'}} 
       {{vote 'up' role='radio' class='button article-vote article-vote-up'}} {{vote 'down' role='radio' class='button article-vote article-vote-down'}} 
        {{vote 'label' class='article-vote-label'}}  
       {{/with}}

    Add content tags to articles and posts

    The standard Copenhagen theme displays content tags on article, community post, and search pages by default. If you're using a custom or marketplace theme, you may need to update your theme to display content tags on these pages. To get started, you can use the following template files from the Copenhagen theme as a guide:

    Once you're comfortable, you can add content tags to other pages. For example, the following snippet adds a list of content tags to the community topic page template.

    {{#each posts}} ... {{#if (compare content_tags.length ">" 0)}} 
       {{#each content_tags}} 
    •  {{#link "search_result" content_tag_id=id}} {{name}} {{/link}} 
      •  {{/each}} 
     {{/if}} ... {{/each}}

    Add badges to your custom help center theme

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

    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

    1. Open the theme online code editor, go to an agent's user profile page.
      Page filename:user_profile_page.hbs
    2. Find theedithelper 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 Zendeskexample 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 theauthorname declaration. In the Copenhagen theme the line looks like this:
    3. {{author.name}}
    4. Add this snippet to the line after it:
      {{#each author.badges}}
    5. {{#is category_slug "titles"}}{{name}}{{/is}}
      6. {{/each}}

    For advanced users - do not (re)use thestatus-labelCSS 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

    Gather badges title badge example.

    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 theauthorname declaration. In the Copenhagen theme the line looks like this:
    3. {{author.name}}
    4. Add this snippet to the line after it:
      {{#each author.badges}}
    5. {{#is category_slug "titles"}}{{name}}{{/is}}
      6. {{/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:

    Gather badges for title and achievement.

    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. 找到该文件中的代码行,用户的名字我s rendered. For example:
       {{#if user.url}} {{user.name}} {{else}} {{user.name}} {{/if}}
    3. Replace that snippet with the following:
       {{#if user.url}} {{user.name}} {{else}} {{user.name}} {{/if}}{{#each user.badges}}{{#is category_slug "titles"}}{{name}}{{/is}}{{/each}}
       
      {{#each user.badges}}{{#is category_slug "achievements"}}
       
       {{name}} 
      {{/is}}{{/each}}

    In this example all of the CSS styling is inlined to keep the example simple. For best practices, use these examples for inspiration, but spend time ensuring that the styling fits your theme

    Enable users to view user profiles to your help center

    This section describes how to update the necessary templates so that users in your help center can click the author name or avatar and view the user's profile.

    Note:User profiles are available by default instandard themesand themes that were customized after June 20th, 2016.
    The solutions discussed in this section involve using thelinkhelper in the Curlybars templating language, seelink helperin the templating documentation to update the following templates: Articles

    Make the following updates to the Article page template.

    Updating the article's author name

    Replace the followingifblock:

    {{#if article.author.url}}  {{article.author.name}}  {{else}} {{article.author.name}} {{/if}}

    with the followinglinkhelper:

    {{#link "user_profile" id=article.author.id class="user-profile"}} {{article.author.name}} {{/link}}
    Updating comment author names

    Replace the followingifblock:

    {{#if author.url}} {{author.name}} {{else}} {{author.name}} {{/if}}

    with the followinglinkhelpfer:

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

    Avatar

    with the followinglinkhelper:

    {{#link "user_profile" id=article.author.id class="user-profile"}} Avatar {{/link}}
    Community posts

    Make the following updates to the Community Post page template.

    Updating the names of post authors

    Replace the followingifblock:

    {{#if post.author.url}}  {{post.author.name}}  {{else}} {{post.author.name}} {{/if}}

    with the followinglinkhelper:

    {{#link "user_profile" id=post.author.id class="user-profile"}} {{post.author.name}} {{/link}}
    Updating the names of comment authors

    Replace the followingifblock:

    {{#if author.url}} {{author.name}} {{else}} {{author.name}} {{/if}}

    with the followinglinkhelper:

    {{#link "user_profile" id=author.id class="user-profile"}} {{author.name}} {{/link}}
    Updating the avatars of post authors

    Replace the following image tag:

    Avatar

    with the followinglinkhelper:

    {{#link "user_profile" id=post.author.id class="user-profile"}} Avatar {{/link}}
    Updating the avatars of the comment authors

    Replace the following image tag:

    Avatar

    with the followinglinkhelper:

    {{#link "user_profile" id=author.id class="user-profile"}} Avatar {{/link}}
    Search results

    Make the following updates to the Search results template.

    Updating the author names of articles in the results

    Replace the followingifblock in the{{#each article_results}}block:

    {{#if author.url}} {{author.name}} {{else}} {{author.name}} {{/if}}

    with the followinglinkhelper:

    {{#link "user_profile" id=author.id class="user-profile"}} {{author.name}} {{/link}}
    Updating the author names of posts in the results

    Replace the followingifblock in the{{#each post_results}}block:

    {{#if author.url}} {{author.name}} {{else}} {{author.name}} {{/if}}

    with the followinglinkhelper:

    {{#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{{元}}helper instead. In that case you can use the code described in this section to link author names to profile pages in your help center.

    You may need to update your CSS styling for the search results page to look uniform.

    Updating the author names of articles in the results

    Replace the following div tags:

    {{meta}}
     
    {{text}}

    With the following:

       {{#each path_steps}} 
    1. {{name}}
      2.  {{/each}} 
     
     {{text}} 
     
      {{#link "user_profile" id=author.id class="user-profile"}} {{author.name}} {{/link}}  {{date created_at}}

    For end result:

    {{#each article_results}} 
  •  {{title}} {{#if vote_sum}} {{vote_sum}} {{/if}} 
       {{#each path_steps}} 
    1. {{name}}
      2.  {{/each}} 
     
     {{text}} 
     
      {{#link "user_profile" id=author.id class="user-profile"}} {{author.name}} {{/link}}  {{date created_at}} 
     
    •  {{/each}}
    Updating the author names of posts in the results

    Add:

       {{#each path_steps}} 
    1. {{name}}
      2.  {{/each}}

    For end result:

    {{#each post_results}} 
  •  {{title}} 
       {{#each path_steps}} 
    1. {{name}}
      2.  {{/each}} 
     
     {{text}} 
     
      {{#link "user_profile" id=author.id class="user-profile"}} {{author.name}} {{/link}}  {{date created_at}}  {{t 'comments_count' count=comment_count}}  
     
    •  {{/each}}

    Enable subsections in your help center theme

    You canadd subsectionsto your help center knowledge base to create more levels in your content hierarchy. If you are using a theme that was customized before March 29, 2019, you must add code to your help center custom theme to enable subsections. The following code comes with later versions of the Copenhagen theme.

    Note:Subsections are available for Guide Enterprise by default instandard themesand themes that were customized after March 29, 2019.
    Applicable template
    • Section
    Applicable object
    • section.sections
    Recipe
    • Insert the following snippet into the Zendesk section page template,section_page.hbs, after the header tag (
      ...
      ) and before the pagination tag ({{pagination}}) :
      {{#if section.sections}}  {{/if}} {{#if section.articles}} 
         {{#each section.articles}} 
      •  {{#if promoted}}{{/if}} {{title}} 
        •  {{/each}} 
       {{else}}  {{t 'empty'}}  {{/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 instandard themesand themes that were customized after September 25, 2019.

    最快的方式到你所需的更改r theme is to import the latest version of the Copenhagen theme that supports unified search results. To do so, seeAdding a help center theme to Guide.

    如果你喜欢更新现有的自定义它们e, this section provides an overview of all of the changes you need to make. The solutions discussed in this section involve using thehelp_center_filters,filters, andsubfiltershelpers 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

    in the search results template:

    <节课= " search-results-sidebar " >{{#如果冥界p_center.community_enabled}} 
     
    {{t 'filter_by_type'}}
      
     {{/if}} {{#if subfilters}} 
     {{#is current_filter.identifier 'knowledge_base'}} 
    {{t 'filter_by_category'}}
     {{/is}} {{#is current_filter.identifier 'community'}} 
    {{t 'filter_by_topic'}}
     {{/is}}  
     {{/if}}
    Looping through the results

    This snippet is an example of how you can use the {{results}} helper to loop through the unified search results.

    Replace both the{{article_results}}and{{post_results}}helpers and their associated search-results-subheading H3s

    in the search results template with the following:

    {{#如果结果}}< ul类= >“search-results-list”{{#each results}} 
  •  
     {{title}} 
     
     
     {{#if vote_sum}} {{vote_sum}} {{/if}} {{#if comment_count}}  {{comment_count}}  {{/if}} 
     
       
    •  
         {{#each path_steps}} 
      1. {{name}}
        2.  {{/each}} 
       
      •  
    • {{author.name}}
      •  
    • {{date created_at}}
      •  
     
    {{text}}
     
     
    •  {{/each}}  {{else}} 
     {{t 'no_results_unified'}} {{#link 'help_center'}} {{t 'browse_help_center'}} {{/link}} 
     {{/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{说play: 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); } }); });
    Return to top

    27 Comments

    • Catherine Michalak
      Community Moderator

      Hi,

      Is there anyone who could help me add subsections to my custom HC code?

      I am struggling to get the section with subsections to show if it doesn't have an article in it (ie. the subsections have articles but until there's an article in the section itself, it doesn't show on the category page) and struggling to keep the layout the same on the section with subsections level as it is on the category with sections level.

      TIA!

      Catherine

      0
    • Emelie Stjernquist

      Hello@...,

      Just so I get it right, you wish to display an "empty" section?

      I'm not sure that that is possible to do (at least I've not manage to do that), however I have a suggested work-around which is to:

      1. Create an Article on the Section you wish to display (one that is OK to find if found via search function)
      2. Create a custom Section-template where you modify the html, remove the part that displays/list the articles -Guide from Zendesk help
      3. Edit the Section and assign the new template and publish the Section and Article

      我通常精心制作,测试支持d forth in the templates until I get the result I want. You can also preview it in "Preview mode" before publishing it.

      I hope this helps you to get closer to what you wish to accomplish, good luck!

      //Emelie

      0
    • Francois Spinnael

      The Current_local.name trick isn't working.

      I'm using this list:https://support.zendesk.com/hc/en-us/articles/203761906-Zendesk-language-support-by-product

      And for some reason, the rename of the "language" is working forEnglish (World)that is defined as a "Variant" but all the other ones, aren't working (Estonia, Lithuania, Latvia, Luxembourg,...)

      0
    • Augusto Silva
      Zendesk Engineering

      Hey@...

      Try something like this instead (language names can change):

      {{#contains current_locale.url "/en-us"}}
      true
      {{else}}
      false
      {{/contains}}
      0
    • blak3r
      • Edited

      我的活动“{{请求}}”模板变量on it. The Home Page does not. Is there a simple way to expose the `{{requests}}` to the home page for signed in users?

      I'd like to show them their 5 most recent requests on the homepage so it's more visible.

      If that cannot be done, could a Custom Page do this? Essentially I want a landing page from our product for support that has both their requests and then knowledge base shown under it. One stop landing page from my product. We use SSO so our users are already authenticated when going there from the app.

      1
    • Greg Katechis
      Zendesk Developer Advocacy

      你好,布莱克!我想到这一点看看I could get creative, but there isn't any way that I could envision where this could be accomplished. As you noted, `{{requests}}` don't exist in the home page template and custom pages alsodo not contain that helper. I wish I had better news and if I think of anything, I'll drop you a line here.

      0
    • blak3r

      Greg Katechis- thanks for giving it some thought. I suppose this would need to be accomplished with custom javascript to call an api endpoint we'd host that would then use the REST api and return the data back. Blockers here: 1) simple documentation showing how to add javascript that invokes web requests to a third party server 2) Any tips on how we could authenticate on our server code that the user account is in fact authenticated... like if we had /api/getTickets?user= we need to verify the user is in fact logged into zendesk somehow so they couldn't exploit the api to get other peoples tickets.

      1
    • Greg Katechis
      Zendesk Developer Advocacy

      1) For this, you could just make an AJAX request from the custom code in your help center to initiate this call to your server/middleware. While it isn't the exact scenario that you're looking to accomplish,this articleshould give the basic framework that you would need and then you can just swap out your URL/endpoint.

      2) This one is giving me all sorts of problems...both from a basic implementation standpoint, but especially from a security standpoint. We don't have any method of using OAuth in Guide, which would be the easiest way to accomplish this. You could also use the signed_in helper to confirm that someone is signed in and then grab the CSRF token to do...something clever? Like I mentioned, I don't feel comfortable with this, but maybe the idea would spark something in someone else to a function solution!

      0
    • blak3r

      Thanks Greg. Appreciate the link and the quick response. Maybe I can get a value that is set by the login to uniquely identify the session or something. I’ll hack around. I could provide a token in the return_to portion of the jwt flow. Then modify every page template to store that token in a cookie. And pass that along with server Ajax calls and of course have that same token stored in the user db for checking against. Or maybe just the primary entry point page and have it only work if they redirected there. I’ll sleep on it.

      1
    • Greg Katechis
      Zendesk Developer Advocacy

      Oh that's a great idea if you use JWT! I wouldn't recommend storing the token in the DB, as that will change on each login, but you could use the shared secret from Zendesk to verify the signature on your server. The JTI might cause a problem, although if you're just storing that as a cookie and not doing any authentication/authorization in the traditional sense, this could work.

      Let me know if you get this working or hit any snags with this. This could be a great tip for other users looking for a similar solution!

      0
    • blak3r

      It appears the jwt token is stored in an object in ```Session Storage.z2_sunco_widget_auth.jwt```

      So, in the requests to our server we could include the users email, jwt, and the JTI. The server would take the JTI and resign the payload. If that payload matched the jwt supplied with the request then we could assume that the user was in fact the email provided to the request.

      In terms of how to get the JTI, there are two approaches I see...
      1. Store the JTI in our user table each time a request is built... Con here is possible synchronization issues. For example, we were planning on having links in our product just include the jwt to avoid any perceived glitchy redirect behavior from enduser standpoint. For example to go to /hc/article/103 our link would behttps://subdomain.zendesk.com/jwt?jwt=&return_to=https://subdomain.zendesk.com/hc/article/103

      2. Pass the JTI as a GET param in the return_to and store that to a cookie with custom Javascript code on each page template. CON here is long urls look gross and add potential for user to bookmark a link with a JTI in it... Probably could mitigate this by updating the url.

      3. Get our helpdesk working on a subdomain of our domain. Usehttps://support.mydomain.cominstead of https://.zendesk.com and have our webapp set a cookie to root domain that the zendesk code could also see. Probably the best option.

      Questions for you... is this z2_sunco_widget_auth a reliable key for the JWT token? That sunco part is throwing me off. Also, I'm not a JWT security specialist, I can't see why having the JTI exposed would be that insecure... given you can't sign a payload without the shared secret but maybe i'm missing something. Feel free to DM me personally if you prefer.

      0
    • Maxim Ageev | null | null
      • Edited

      I need to disable search indexing on the zendesk subdomain.
      To only allow it on our company domain.
      I would like to add in header template the following line
      But only if the domain is helpcenter. Is there a variable in a template that stores the current domain?
      https://stackoverflow.com/q/71527073/7921383



      0
    • Katrina Greeves

      Is it possible to filter search results by label?

      e.g

      Article 1 is labelled A
      Article 2 is labelled B
      Article 3 is labelled A C

      I'd like to add a sidebar filter for each label.

      If I select filter A, I will only then see articles 1 and 3.

      0
    • Dave Dyson
      Hi Katrina,

      There isn't currently a way to filter by label, although articles with labels matching the search terms will be featured higher in the search results. If you'd like to suggest this to our product team, please post your use case to ourFeedback - Help Center (Guide)topic, using thistemplate. Thanks!
      0
    • Taehyoung Kim

      Hi, I'm trying to add the content tag feature in our customized template (Copenhagen 1.8.1) but facing some problems.

      I have successfully added content tags in our knowledge base article, but still figuring out how to add them to the search result. I'm basically having a look atsearch_results.hbsof the recent release. But if I add the lines here to my old template, it said that 'content_tag_filters' does not exist. Does the variable name differ from version to version? Is there a way to implement this on Copenhagen 1.8.1?

      Thanks in advance :)

      Taehyoung

      4
    • Beth

      I'm having the same issue asTaehyoung Kimabove. Appreciate any help - thank you!

      3
    • Christian de Heij

      Having the same for my template content_tag_filters does not exists. Any help to get it in?

      1
    • Sabine Hanna

      Same here regarding the content_tag_filters. Any help would be appreciated!

      0
    • mfg

      blak3r- were you able to solve for securely getting the requests on a separate/home page without exposing tickets the authenticated user shouldn't have access to?

      We are looking to have something similar (buttons for the forms at the top, [requests | article list] in a flex box beneath. Without that "{{requests}}" helper, the current solution we're considering is an iFrame / EMBED SRC= , and then style with CSS. It works - but it's not as secure as we'd like.

      0
    • Dane
      Zendesk Engineering
      Hi All,

      The current version of Copenhagen is Theme version 2.19.4. I have tried the content_tag_filters onsearch_results.hbsand it worked without any issues. Unfortunately, as customization is outside our scope the best option is to use the lates version of the Copenhagen Theme.

      0
    • Gorka Cardona-Lauridsen
      • Edited
      Zendesk Product Manager

      Hi All,

      We are conducting research to improve our Help Center developer experience and would love to talk to any of you that have tried to edit Help Center theme code.

      If you are interested please answersign up hereand answer the 3 survey questions. I will reach out to you to setup a 30 min Zoom call.

      The interview will be a semi-structured interview where we would like to hear you take us through examples of what you have done or tried to do with customizations and your experience with the tools, documentation etc. you used.

      Looking forward to talking to all of you.

      Gorka Cardona-Lauridsen
      Sr. Product Manager, Zendesk Guide

      0
    • Tomas M. Parra

      Hello!
      I'm trying to add a snippet of each article's body underneath the articles' title in the category page.
      This is the code as is:


        {{#each articles}}

      • {{#if promoted}}
        http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="icon-star" title="{{t 'promoted'}}">


        {{/if}}
        {{title}}
        {{#if internal}}
        http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-lock" title="{{t 'internal'}}">



        {{/if}}

        • {{/each}}


      What I want is to add {{body}} underneath {{title}} but I can only print the full article's body, which obviously breaks the whole layout.

      I tried many things like {{body.slice 0 50}} and more, but nothing seems to work.

      For the records: I am a developer, I have been through Zendesk documentation (Plus forums, stack overflow, your support, etc) and nothing seems to work.
      Can you give me a hand to achieve this?

      Thanks!

      1
    • Tomas M. Parra

      By the way, your console says either something like "body.slice cannot be accessed" , or something like "body doesn't accept these parameters".

      1
    • Ryan Gilomen
      • Edited

      Tomas M. Parra,

      I use {{excerpt body characters=150}} on my section pages to achieve this.

      Hope this helps!
      -Ryan

      1
    • Tomas M. Parra
      • Edited

      Hello @Ryan!
      That worked great for me. Thanks so much!

      0
    • c.keefe

      Hey Zendesk & Community! I am trying to use current_locale.name on home_page.hbs to change content based on selected language.

      I have been able to use this in both header.hbs and footer.hbs with no problems, but getting the following error when I try to use it on home_page.hbs

      I am trying to avoid using the Dynamic Content feature if at all possible (just haven't had good luck with it).Thanks!

      0
    • Cory Waddingham

      Is there a way to add metadata for a page? For example, on article pages, I want to add a tag to the page header, so that page crawlers will know the title of the article without any trouble. But I can't find a way to add that page tag, either in the article_page.hbs or the document_head.hbs (adding</p> <pre>{{#if article.title}}<br><title>{{article.title}}
      {{/if}}

      just results in an error.

      0

    Pleasesign into leave a comment.

    Related articles

    Powered by Zendesk