Algolia's Help Center Search

NOTE FOR PUBLIC RELEASE

This is a public copy of the custom zendesk search for Algolia. It previously used Algolia answers, but now uses the search endpoint instead-- some naming conventions use "answers" however.

This public fork is not currently a supported integration. We will not be providing support for implementation of this public repository.

What is this

The front-end bundle for Algolia's Help Center search experience. It consists of:

• The autocomplete search present on the homepage with the main search bar as well as on all pages with a smaller search bar on the top right. This is leveraging classic InstantSearch and Algolia Answers for the "best hit".
• The ticket form request search: when typing in the "Subject" field, search results will display right underneath the input. This is leveraging Algolia Answers.

Searches are happening on 3 indices across 3 apps:

• Help Center articles
• Documentation
• Discourse posts

How does it work

When built and released, the css and js bundles are hosted on jsdelivr. We then add the files to our Zendesk Help Center theme through simple <link> and <script> tags in the theme code editor.

In Zendesk's HC document_head.hbs template, add the styles, replacing @{THE_VERSION} with your prefered version, eg @1 or @1.1.0:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@algolia/algolia-custom-helpcenter-search@{THE_VERSION}/lib/index.css"
/>

In the footer.hbs template, add the javascript:

<script src="https://cdn.jsdelivr.net/npm/@algolia/algolia-custom-helpcenter-search@{THE_VERSION}/lib/index.js"></script>

Configuration

This package does not (at least for now) expose any kind of module or global function in the browser. This means any configuration change must happen through a commit on this repository and then a release.

Almost all of the configuration happens in the src/constants.ts file. There you will find variables that you can change if needed for:

• Sources (this is where the algolia indices and apps are defined)
• CSS Selectors (for your autocomplete and ticket form search initialization, default selectors are the one from the default Help Center theme)
• Placeholder for the autocomplete
• Base Urls for the search redirections.

Development

To start developing:

1. Install all dependencies:

yarn

or

npm install

2. Launch the dev server:

yarn dev

or

npm run dev

You can find everything related to the autocomplete search in src/autocomplete.tsx. We are using Algolia's autocomplete library to develop our autocomplete and are leveraging some styles from DocSearch.

You can find everything related to the ticket form input search in src/ticketForm.tsx. It's basically a mini app written using preact.

You can find the config variables in src/constants.ts. See configuration.

Don't forget to update the tests in src/__tests__if needed. Jest and Testing Library are used for testing.