Skip to main content
With the official Algolia plugin for Netlify, Algolia recommends to use this frontend bundle. It’s designed to be compatible with the index structure extracted by Algolia’s Netlify plugin. It creates a new search input on your site with an Autocomplete menu, providing search as you type results. Default frontend

​
Usage

HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.js"></script>
<script type="text/javascript">
  algoliasearchNetlify({
    appId: 'ALGOLIA_APP_ID',
    apiKey: 'ALGOLIA_API_KEY',
    siteId: 'NETLIFY_SITE_ID',
    branch: 'TARGET_GIT_BRANCH',
    selector: 'div#search',
  });
</script>

​
Available parameters

ParameterRequired?TypeDescription
appIdYesStringFind the Application ID in the Algolia dashboard
apiKeyYesStringFind the API key in the Algolia dashboard
siteIDYesStringFind the Netlify Site ID in crawler.algolia.com
branchYesStringTarget git branch or branches. It’s either fixed, such as main, or dynamic using process.env.HEAD
selectorYesStringThe HTML element that the Autocomplete menu will replace. It may not be an input element.
Default is div#search.
analyticsNoBooleanIndicates whether to enable search analytics.
Default is true
hitsPerPageNoNumberNumber of results to display.
Default is 5
placeholderNoStringSearch input placeholder text.
Default is Search...
openOnFocusNoBooleanIndicates whether to open the panel on focus when there’s no query.
Default is true
detachedNoStringDecide when the search popup should open in detached mode (full screen, modal). Can be set to true or false to always or never go into detached mode.
Default is:
{
detached: { mediaQuery: '(max-width: 500px)' },
detached: false,
}
themeNoObjectChange the appearance of the Autocomplete menu.

​
Multiple git branches

If you’ve set up the plugin to index multiple branches using the branches option, each configured branch has a dedicated index. You also need to pass the information of which index you want to search in using the branch parameter of the integration. To get access to the currently building branch, you can configure your build tool to forward the HEAD environment variable. For instance, with webpack’s environment plugin configured to forward HEAD, you would pass branch: process.env.HEAD. If you’ve configured your plugin to index only specific branches, you need to duplicate the logic here so that it picks the correct branch only when appropriate. You can also use wildcards in the branch names. For instance, with branches = ['main', 'develop', 'feat/*'], and using webpack’s environment plugin to inject HEAD, here’s how the snippet could look like:
JavaScript
const currentBranch = process.env.HEAD; // Injected by your build tool
let targetBranch = "main";
if (currentBranch === "develop" || currentBranch.startsWith("feat/")) {
  targetBranch = currentBranch;
}
algoliasearchNetlify({
  // ...
  branch: targetBranch,
});

​
Theme

You can theme the input and the autocomplete by using the theme property.
JavaScript
// Example of dark theme:
{
  theme: {
    mark: '#fff',
    background: '#23263b',
    selected: '#111432',
    text: '#d6d6e7',
    colorSourceIcon: '#d6d6e7'
  }
}
Frontend with dark-mode To go further, check the autocomplete.js documentation, or implement your own search with InstantSearch.js.
⌘I