JavaScript library: 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.
To browse through the crawler, visit the crawler/ folder.
Documentation
To be able to setup your new search on your Zendesk Help Center you'll need to have an Algolia account with a configured Zendesk Help Center crawler.
Synchronize Algolia with your Help Center data
- Login or sign-up on Algolia
- Visit our Zendesk community page and click
Join the beta
- Enter your zendesk subdomain (
your_subdomain
in your_subdomain.zendesk.com
) - When Zendesk asks you to approve Algolia in your Zendesk instance, click
Allow
- That's it! Algolia now automatically handles the indexing of your Help Center
Updating your Help Center theme
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.
- Click "Customize the design"
- In the "Theme" section, click on "Edit theme"
- In the top left corner dropdown, Select the "Document Head" template
- Add the following lines at the end of the template:
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/algoliasearch.zendesk-hc/1/algoliasearch.zendesk-hc.min.css">
<script type="text/javascript" src="//cdn.jsdelivr.net/algoliasearch.zendesk-hc/1/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>',
indexPrefix: 'zendesk_',
baseUrl: '/hc/',
poweredBy: true,
colors: {
primary: '#D4D4D4',
secondary: '#D4D4D4'
},
autocomplete: {
enabled: true,
inputSelector: '#query',
hits: 5
},
instantsearch: {
enabled: true,
tagsLimit: 15
},
translations: {
article: 'Article',
articles: 'Articles',
categories: 'Categories',
sections: 'Sections',
tags: 'Tags',
search_by: 'Search by',
no_result: 'No result',
result: 'Result',
results: 'Results',
found_in: 'Found in',
search_by: 'Search by',
placeholder_autocomplete: 'Search in sections and articles',
placeholder_instantsearch: 'Search in articles'
}
});
</script>
Development
The package.json
holds multiple scripts:
build:css
: Compiles the CSS files to dist/algoliasearch.zendesk-hc.css
build:docs
: Extracts the documentation from this README.md
to ../docs/documentation.md
build:js
: Compiles the JS files to dist/algoliasearch.zendesk-hc.js
and dist-es5-module/*.js
build
: Launches all 3 previous buildsclean
: Removes dist/
and dist-es5-module
dev
: Launches build
and server
, and watches the files to rebuild them if neededlint
: Lints the JS filesserver
: Runs a simple HTTP server pointing to dist/
test:coverage
: Runs test
with coverage enabledtest
: Runs the test suite
build:js
, build:css
, build
and dev
can be passed a NODE_ENV
environment variable.
If set to production, it also creates minified files and map files.
server
accepts a PORT
environment variable to change on which port it will run.
Contributing
We're considering any contribution and PR, please go ahead!
License
This project is under the MIT License.