algoliasearch.zendesk-hc
Advanced tools
algoliasearchZendeskHC
This JavaScript library allows you to replace the default search of your Zendesk Help Center by Algolia. Algolia is a hosted full-text, numerical, and faceted search engine capable of delivering realtime results from the first keystroke.
When you install our Zendesk integration, it creates what we call a connector in your Algolia account. You can access it with the left sidebar in your dashboard.
This connector will every day take your public Help Center articles and put them inside an Algolia index. In most cases, this should be enough to have an up-to-date search.
However, if you'd rather have it updated right now, like when you add a lot of support articles, you can manually trigger a full reindex. On this page, just click the "Reindex" button in the bottom right corner. A few minutes later, your search index will be updated.
Once your data has been extracted to Algolia, you need to update your Help Center theme in order to replace the search feature by Algolia.
Here is a full breakdown of the available options for the JavaScript library:
<link
rel="stylesheet"
type="text/css"
href="//cdn.jsdelivr.net/algoliasearch.zendesk-hc/3/algoliasearch.zendesk-hc.min.css"
/>
<script
type="text/javascript"
src="//cdn.jsdelivr.net/algoliasearch.zendesk-hc/3/algoliasearch.zendesk-hc.min.js"
></script>
<script type="text/javascript">
algoliasearchZendeskHC({
applicationId: '<YOUR APPLICATION_ID>',
apiKey: '<YOUR SEARCH ONLY API KEY>',
subdomain: '<YOUR ZENDESK APPLICATION NAME>',
//
// Optional configuration:
//
indexPrefix: 'zendesk_', // or your custom <INDEX_PREFIX>
analytics: true, // should queries be processed by Algolia 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: true, // whether or not to enable the clickAnalytics feature (available on the Enterprise plan)
debug: false, // debug mode prevents the autocomplete to close when trying to inspect it
color: '#158EC2', // main color (used for links)
highlightColor: '#158EC2', // highlight color to emphasize matching text
autocomplete: {
enabled: true, // is the autocomplete feature enabled?
inputSelector: '#query', // the DOM selector to select the search box
hitsPerPage: 5, // the number of suggestions to display
},
// TODO: restore this
// instantsearch: {
// enabled: true, // is the instantsearch feature enabled?
// hitsPerPage: 20, // the number of suggestions to display
// paginationSelector: '.pagination', // the DOM selector for the current pagination (to hide it)
// reuseAutocomplete: false, // do not add a search input for the instant-search page
// hideAutocomplete: true, // whether or not to hide the autocomplete on the instantsearch page (ignored if reuseAutocomplete is used)
// selector: '.search-results', // the DOM selector for the results container
// tagsLimit: 15, // maximum number of tags to display
// },
templates: {
// template objects (see the templates section)
autocomplete: {},
// TODO: restore this
// instantsearch: {},
},
translations: {}, // translation strings
});
</script>
This library supports out of the box Help Centers with multiple languages.
The results sent to the user are always limited to the ones in the currently selected locale.
Some constant strings like the ones used in the sentence "12 results found in 1ms" need to be translated. The library already supports these locales:
If you want to support another locale, please help us by [opening an issue on GitHub][locale_issue].
If some translations don't fit what you want, you can change them using this syntax:
translations: {
placeholder: {
de: 'In unseren Help Center suchen',
'en-us': 'Search in our Help Center',
fr: 'Recherchez dans notre Help Center'
}
}
For reference, here is the list of all the translations for the en-us locale:
translations: {
nbResults: {
en: function (nb) {
return `${formatNumber(nb)} result${nb > 1 ? 's' : ''}`;
}
},
noResultsFor: {
en: function (query) {
return 'No result found for ' + this.quoted(query);
}
},
placeholder: {
en: 'Search in our articles'
},
searchByAlgolia: {
en: function (algolia) { return 'Search by ' + algolia; }
},
}
You can index localized tags based on locales prefix (e.g. en-us or en). If we detect a locale, we'll only index localized tags for this translation. For instance, an article with those tags:
[
'Wow',
'en:Awesome',
'en-gb:Good',
'fr:Incroyable'
]
For fr and fr-* locales, we'll index { "label_names": ["Incroyable"] }. For en-au, en-ca and en-us locales, we'll index { "label_names": ["Awesome"] }. For the en-gb locale, we'll index { "label_names": ["Good"] }. For all the other locales, we'll index { "label_names": ["Wow"] }.
We do not index community forums for now. If you're using them, you'll probably want to disable instantsearch by setting enabled: false and just use the auto-complete feature.
Since we're providing a front-end search, and we can't securely know which access a user has in Zendesk's templates, we have to limit our indexing to public articles only. A public article is not a draft and is visible to Everybody. If you're in such a scenario, we recommend you to disable instantsearch by setting enabled: false and just use the auto-complete feature.
You can let our script know that you'd want for an article not to be indexed. For this, all you need to do is to add an algolia-ignore tag on your article. After the next reindex, the article should not be searchable anymore.
To prevent certain specific portion of your article to be indexed to Algolia, you can wrap the html source code of these portion between <!-- algolia-ignore --> <!-- /algolia-ignore --> tags. This way, these portions of text won't be searchable.
Example:
<h1>This is a test article</h1>
<!-- algolia-ignore -->
<p>This paragraph won't be indexed to Algolia.</p>
<!-- /algolia-ignore -->
<p>This paragraph will be indexed to Algolia.</p>
In case you're using Zendesk's IP restrictions feature, you'll need to whitelist our IPs for our indexing to work. Here are those IPs:
3.221.200.552.204.20.3952.22.248.248The package.json holds multiple scripts:
clean: Removes dist/ and node_modules/build: Compiles the JS & CSS files to dist/algoliasearch.zendesk-hc.{css,js}dev: Launches parcel, and watches the files to rebuild them if neededlint: Lints the JS filesformat: Runs prettierWe're considering any contribution and PR, please go ahead!
This project is under the MIT License.
FAQs
Algolia Search for Zendesk's Help Center
The npm package algoliasearch.zendesk-hc receives a total of 161 weekly downloads. As such, algoliasearch.zendesk-hc popularity was classified as not popular.
We found that algoliasearch.zendesk-hc demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 7 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.