> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Frontend configuration

> Learn how to configure your Netlify frontend.

export const Index = () => <Tooltip tip="An Algolia index is a searchable dataset that consists of records and configuration settings. These settings define how the records are searched and ranked.">
    index
  </Tooltip>;

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.

<img src="https://mintcdn.com/algolia/KSYHF7soFPXylOAb/doc/tools/crawler/netlify-plugin/frontend-configuration.jpg?fit=max&auto=format&n=KSYHF7soFPXylOAb&q=85&s=05b00d7b1230c0a08f5fc069fff8e2e2" alt="Screenshot of a search result for a partial query showing 'Algolia x Netlify' and 'Crawler' options with descriptive text and a 'Search by Algolia' tag." width="1280" height="536" data-path="doc/tools/crawler/netlify-plugin/frontend-configuration.jpg" />

## Usage

```html HTML icon=code-xml theme={"system"}
<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_APPLICATION_ID',
    apiKey: 'ALGOLIA_API_KEY',
    siteId: 'NETLIFY_SITE_ID',
    branch: 'TARGET_GIT_BRANCH',
    selector: 'div#search',
  });
</script>
```

## Available parameters

| Parameter     | Required? | Type    | Description                                                                                                                                                                                                                                                                   |
| ------------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `appId`       | Yes       | String  | Find the Application ID in the [Algolia dashboard](https://dashboard.algolia.com/account/api-keys/)                                                                                                                                                                           |
| `apiKey`      | Yes       | String  | Find the API key in the [Algolia dashboard](https://dashboard.algolia.com/account/api-keys/)                                                                                                                                                                                  |
| `siteID`      | Yes       | String  | Find the Netlify Site ID in [crawler.algolia.com](https://crawler.algolia.com/admin/netlify)                                                                                                                                                                                  |
| `branch`      | Yes       | String  | Target git branch or [branches](#multiple-git-branches). It's either fixed, such as **main**, or dynamic using `process.env.HEAD`                                                                                                                                             |
| `selector`    | Yes       | String  | The HTML element that the Autocomplete menu will replace. It may not be an `input` element.<br />Default is `div#search`.                                                                                                                                                     |
| `analytics`   | No        | Boolean | Indicates whether to enable [search analytics](/doc/guides/search-analytics/overview).<br />Default is `true`                                                                                                                                                                 |
| `hitsPerPage` | No        | Number  | Number of results to display.<br />Default is `5`                                                                                                                                                                                                                             |
| `placeholder` | No        | String  | Search input placeholder text.<br />Default is `Search...`                                                                                                                                                                                                                    |
| `openOnFocus` | No        | Boolean | Indicates whether to open the panel on focus when there's no query.<br />Default is `true`                                                                                                                                                                                    |
| `detached`    | No        | String  | Decide 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.<br />Default is:<br />`{`<br />`detached: { mediaQuery: '(max-width: 500px)' },`<br />`detached: false,`<br />`}` |
| `theme`       | No        | Object  | Change the [appearance of the Autocomplete menu](#theme).                                                                                                                                                                                                                     |

## 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](https://webpack.js.org/plugins/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:

```js JavaScript icon=code theme={"system"}
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.

```js JavaScript icon=code theme={"system"}
// Example of dark theme:
{
  theme: {
    mark: "#fff",
    background: "#23263b",
    selected: "#111432",
    text: "#d6d6e7",
    colorSourceIcon: "#d6d6e7",
  },
}
```

<img src="https://mintcdn.com/algolia/KSYHF7soFPXylOAb/doc/tools/crawler/netlify-plugin/frontend-dark.png?fit=max&auto=format&n=KSYHF7soFPXylOAb&q=85&s=bedd18dbe401808ce7b8b81f1b0f73da" alt="Screenshot of a search interface with 'Algolia' entered, showing a result for an Algolia Search Netlify test website and a 'Search by Algolia' label." width="852" height="346" data-path="doc/tools/crawler/netlify-plugin/frontend-dark.png" />

To go further, check the [autocomplete.js documentation](/doc/ui-libraries/autocomplete/introduction/what-is-autocomplete),
or implement your own search with [InstantSearch.js](/doc/guides/building-search-ui/what-is-instantsearch/js).