Popular search terms

Allow visitors to access popular searches below the search bar.

The Popular Search Terms extension allows you to display a curated list of search keyword suggestions to users in order to help them find helpful content. When a user clicks on a keyword they are taken to the Search Results page to view results for that keyword.

Suggestions as badges
View code
<template id="tmpl-popular-keywords">
  <div class="flex flex-first flex-wrap mt-5 mb-4{{#is settings.hero_content_alignment 'center'}} justify-content-center{{/is}}"
   x-data="Widgets.popularKeywords"
   x-init="parseKeywords('<%= keywords %>')">
    {{~#if settings.popular_keywords_heading}}
     <p class="font-semibold m-1">
        {{~#if settings.use_translations}}
          {{dc settings.popular_keywords_heading}}
        {{else}}
          {{settings.popular_keywords_heading}}
        {{/if~}}
      </p>
    {{/if~}}
    <div class="flex flex-wrap align-items-center">
      <template x-for="(keyword, index) in keywords" :key="index">
        <div class="flex align-items-center m-1">
          <a class="inline-block text-inherit{{#is settings.popular_keywords_style 'badges'}} badge bg-translucent blur text-inherit rounded px-3 py-2{{else}} hover:text-inherit{{/is}}"
            :href="keyword.html_url"
            :title="keyword.title"
            x-text="keyword.title">
          </a>{{#is settings.popular_keywords_style 'links'}}<span x-show="index !== keywords.length - 1">,</span>{{/is}}
        </div>
      </template>
    </div>
  </div>
</template>
Suggestions as badges
View code
<template id="tmpl-popular-keywords">
  <div class="flex flex-first flex-wrap mt-5 mb-4{{#is settings.hero_content_alignment 'center'}} justify-content-center{{/is}}"
   x-data="Widgets.popularKeywords"
   x-init="parseKeywords('<%= keywords %>')">
    {{~#if settings.popular_keywords_heading}}
     <p class="font-semibold m-1">
        {{~#if settings.use_translations}}
          {{dc settings.popular_keywords_heading}}
        {{else}}
          {{settings.popular_keywords_heading}}
        {{/if~}}
      </p>
    {{/if~}}
    <div class="flex flex-wrap align-items-center">
      <template x-for="(keyword, index) in keywords" :key="index">
        <div class="flex align-items-center m-1">
          <a class="inline-block text-inherit{{#is settings.popular_keywords_style 'badges'}} badge bg-translucent blur text-inherit rounded px-3 py-2{{else}} hover:text-inherit{{/is}}"
            :href="keyword.html_url"
            :title="keyword.title"
            x-text="keyword.title">
          </a>{{#is settings.popular_keywords_style 'links'}}<span x-show="index !== keywords.length - 1">,</span>{{/is}}
        </div>
      </template>
    </div>
  </div>
</template>

The Popular Search Terms extension is bundled into all of our themes by default, so you can start using it straight away. It builds upon our powerful micro-templating system and gives you full control over how the search terms look and behave.

Our themes allow you to add a list of popular search terms on the Home page using theme settings.

  1. In Zendesk Guide, click the Customize design icon (Customize icon) in the sidebar.

  2. Click Customize on the theme you want to edit.

  3. Expand the Home page elements section select a style from the Popular keywords style setting dropdown list. You can add an optional heading using the Popular keywords heading setting.

  4. Add one or more search terms to the Popular keywords setting in a comma-separated list.

If you’d like to display the list of popular search terms outside of the Home page hero section, you can copy-and-paste the following HTML and JavaScript code into your desired position:

{{#if settings.popular_keywords}}
  <div id="popular-keywords">
    <script type="text/javascript">
      ready(function() {
        Util.renderTemplate(document.getElementById('popular-keywords'), 'popular-keywords', {
          keywords: '{{#if settings.use_translations}}{{dc settings.popular_keywords}}{{else}}{{settings.popular_keywords}}{{/if}}'
        });
      })
    </script>
  </div>
{{/if}}

Custom micro-templates

Each theme comes with a number of built-in styles that you can choose from using the Popular keywords style theme setting, but you can add additional styles to your theme by:

  1. Editing the micro-template of your chosen style on the footer.hbs template.
  2. Copying a style across from another theme if you purchased our Complete Package.
  3. Copying a style from our Pattern Library.

All popular search term micro-templates use the same keyword list defined in theme settings but can differ significantly in terms of their look-and-feel and behavior.

Related extensions

Animations and transitions Free

Animations and transitions

Add engaging animation and transition effects to elements.

Carousels Free

Carousels

Present content in well defined and easy to follow steps.

Content blocks and icons Free

Content blocks and icons

Display icons against categories, sections and articles.