Configure your help center theme

Configure the Algolia search box for your Zendesk help center theme.

The following code lists all options of the algoliasearchZendeskHC function.

JavaScript

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: {
    autocomplete: {},
    instantsearch: {},
  },
  translations: {},
});

Click and conversion events

To track clicks and conversions for your help center articles, set clickAnalytics to true. This sends click events when users click search results. If you have defined conversion events, you can track them using the algoliasearchZendeskHC.trackConversion() function.

Customize the CSS

To customize the style of the Algolia search interface, add a <style> element:

HTML

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

When customizing the templates, include the CSS and JavaScript snippets for the Algolia integration with its full version. This prevents breaking your customizations if templates change between versions.

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

By default, the templates use ES6 syntax. Some templates use a compile function to compile them with the Hogan.js templating engine. To prevent conflicts with the Zendesk templates, these templates use square brackets [] instead of curly braces {} inside the compile functions.