> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

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

```js JavaScript icon=code theme={"system"}
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](/doc/guides/sending-events) 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 HTML icon=code-xml theme={"system"}
...
<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`](https://github.com/algolia/algoliasearch-zendesk/blob/master/app/css/index.scss).

<Tip>
  When styling the autocomplete,
  set `debug` to `true` to keep the autocomplete menu open.
</Tip>

## Customize the templates

When customizing the templates,
[include the CSS and JavaScript snippets](/doc/integration/zendesk/get-started#update-your-theme) 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`](https://github.com/algolia/algoliasearch-zendesk/blob/master/app/src/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`](https://twitter.github.io/hogan.js/) templating engine.
To prevent conflicts with the Zendesk templates, these templates use square brackets `[]` instead of curly braces `{}` inside the compile functions.