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