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