Integrations / Zendesk

Configure your help center theme

The following code lists all options of the algoliasearchZendeskHC function.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
algoliasearchZendeskHC({
  applicationId: '<ALGOLIA-APPLICATION-ID>',
  apiKey: '<ALGOLIA-SEARCH-API-KEY>',
  subdomain: '<ZENDESK-APPLICATION-NAME>',

  // These settings are optional
  indexPrefix: 'zendesk_',              // Custom prefix for your index name
  analytics: true,                      // Collect search analytics
  baseUrl: '/hc/',                      // The base URL of your help center
  poweredBy: true,                      // Show the "Search by Algolia" link (required if you're on Algolia's FREE plan)
  clickAnalytics: false,                // If true, enable the `queryID` for click and conversion analytics
  debug: false,                         // If true, the autocomplete menu remains open even if it isn't focussed
  color: '#158EC2',                     // The main color (used for links)
  highlightColor: '#158EC2',            // The highlight color to emphasize matching text
  responsive: true,                     // If true, the search results page is responsive
  autocomplete: {
    enabled: true,                      // If true, the autocomplete search box is turned on
    inputSelector: '#query',            // The DOM selector for the search box
    hitsPerPage: 5                      // The number of search results to show in the autocomplete menu
  },
  instantsearch: {
    enabled: true,                      // If true, the search results page is turned on
    hitsPerPage: 20,                    // The number of search results to show on the search results page
    paginationSelector: '.pagination',  // The DOM selector for the pagination
    reuseAutocomplete: false,           // If true, add an autocomplete search box to the search results page
    hideAutocomplete: true,             // If true, hide the autocomplete menu on the search results page (ignored if `reuseAutocomplete` is `true`)
    selector: '.search-results',        // The DOM selector for the search results
    tagsLimit: 15,                      // The maximum number of tags to display
    useEditedAt: false                  // Show a timestamp for every search result, when the article was last edited
  },
  instantsearchPage,                    // A function to check if the current page is the search results page
  templates: {                          // See https://www.algolia.com/doc/integration/zendesk/configure/theming/#customize-the-templates
    autocomplete: {},
    instantsearch: {}
  },
  translations: {}                      // Localized strings (See https://www.algolia.com/doc/integration/zendesk/configure/localization/)
});

Analytics

Algolia collects search analytics, for example, popular searches or searches without any results. If you don’t want to collect search analytics, set analytics to false.

If you want to track click-through and conversion rates for your help center articles, set clickAnalytics to true. You can then use the function algoliasearchZendeskHC.trackConversion() on article pages with a call to action to track the conversion.

Customize the CSS

You can customize the style of the Algolia search interface by adding a <style> to the code snippet:

1
2
3
4
5
6
7
8
9
...
<style>
  .aa-dropdown-menu {
    background-color: #ccc;
  }
</style>
<script type="text/javascript">
  algoliasearchZendeskHC(/* ... */);
</script>

You can see all available classes in the file index.scss.

When styling the autocomplete, set debug to true to keep the autocomplete menu open.

Customize the templates

To customize the templates, you should specify the full version when including the Algolia integration because the templates may change between versions.

To see which templates you can customize, see the file templates.js. Each template is a key in the defaultTemplates object.

The default templates use ES6 syntax. Some templates use a compile function, which compiles the templates with the Hogan.js templating engine. To avoid conflicts with the Zendesk templates, the templates inside the compile functions use square brackets [] instead of curly braces {}.

Did you find this page helpful?