> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.
# How to install InstantSearch.js
> Learn how to install InstantSearch.js with a package manager or use it directly from a content delivery network.
Install InstantSearch.js with a packaging system, with a direct link in your web page, or with `create-instantsearch-app`.
## With a packaging system
If you have a JavaScript build tool, you can install InstantSearch.js from npm:
```sh Command line icon=square-terminal theme={"system"}
npm install algoliasearch instantsearch.js
```
Then in your module, you can load the main package:
```js JavaScript theme={"system"}
// Import InstantSearch.js
import { liteClient as algoliasearch } from "algoliasearch/lite";
import instantsearch from "instantsearch.js";
import { searchBox, hits } from "instantsearch.js/es/widgets";
const appID = "ALGOLIA_APPLICATION_ID";
const apiKey = "ALGOLIA_SEARCH_API_KEY";
const indexName = "INDEX_NAME";
const searchClient = algoliasearch(appID, apiKey);
const search = instantsearch({
indexName,
searchClient,
});
search.addWidgets([
searchBox({
container: "#searchbox",
}),
hits({
container: "#hits",
}),
]);
search.start();
```
[`instantsearch`](/doc/api-reference/widgets/instantsearch/js) is the root InstantSearch.js component.
All widgets must be wrapped within it
In a production environment, [secure your API keys](/doc/guides/security/security-best-practices#secure-your-api-keys) as environment variables.
## Directly in your page
This method uses the version of **InstantSearch.js** from the [jsDelivr](https://www.jsdelivr.com/) CDN:
```html HTML icon=code-xml theme={"system"}
```
```html HTML icon=code=xml theme={"system"}
```
You then have access to the [`instantsearch`](/doc/api-reference/widgets/instantsearch/js) function in the global scope (`window`).
```js JavaScript icon=code theme={"system"}
const { liteClient: algoliasearch } = window["algoliasearch/lite"];
const appID = "ALGOLIA_APPLICATION_ID";
const apiKey = "ALGOLIA_SEARCH_API_KEY";
const indexName = "INDEX_NAME";
const searchClient = algoliasearch(appID, apiKey);
const search = instantsearch({
indexName,
searchClient,
});
search.addWidgets([
instantsearch.widgets.searchBox({
container: "#searchbox",
}),
instantsearch.widgets.hits({
container: "#hits",
}),
]);
search.start();
```
[`instantsearch`](/doc/api-reference/widgets/instantsearch/js) is the root InstantSearch.js component.
All widgets must be wrapped within it.
In a production environment, [secure your API keys](/doc/guides/security/security-best-practices#secure-your-api-keys) as environment variables.
### Load the styles
You need to manually load the companion [CSS file](https://cdn.jsdelivr.net/npm/instantsearch.css@8.5.1/themes/reset-min.css) into your page:
```html HTML icon=code-xml theme={"system"}
```
Or you can load the [satellite theme](https://cdn.jsdelivr.net/npm/instantsearch.css@8.5.1/themes/satellite-min.css) widget styles into your page.
```html HTML icon=code-xml theme={"system"}
```
You can customize the themes using CSS variables. For a complete reference of customization options, see [Styling and theming](/doc/guides/building-search-ui/styling/js).
## With `create-instantsearch-app`
Use [`create-instantsearch-app`](https://github.com/algolia/instantsearch/tree/master/packages/create-instantsearch-app#create-instantsearch-app) to create a working InstantSearch app.
Similar to other interactive command-line apps,
run it with `npm` or `yarn`:
```sh npm theme={"system"}
npx create-instantsearch-app@latest 'getting-started'
```
```sh yarn theme={"system"}
yarn create instantsearch-app 'getting-started'
```
To launch the app, type inside your terminal:
```sh Command line icon=square-terminal theme={"system"}
cd getting-started
npm start # or yarn start
```
## Send click and conversion events
Capturing real-time user interactions as events gives you actionable insights with [click and conversion metrics](/doc/guides/search-analytics/concepts/metrics#click-through-rate),
and they help you increase your customer engagement and conversions.
Events are used to activate Algolia features and products like [NeuralSearch](/doc/guides/ai-relevance/neuralsearch/get-started),
[Dynamic Re-Ranking](/doc/guides/algolia-ai/re-ranking),
[Query Categorization](/doc/guides/algolia-ai/query-categorization),
[Recommend](/doc/guides/algolia-recommend/overview),
and [Personalization](/doc/guides/personalization/classic-personalization/what-is-personalization).
To send click and conversion events when users interact with your search UI, set the [`insights`](/doc/api-reference/widgets/instantsearch/js#param-insights) option to `true`.
## Browser support
Algolia supports the last two versions of the major browsers: Chrome, Edge, Firefox, Safari.
To support [Internet Explorer 11](https://wikipedia.org/wiki/Internet_Explorer_11) you need [polyfills](https://wikipedia.org/wiki/Polyfill_\(programming\)) for:
`Array.prototype.find`, `Array.prototype.includes`, `Promise`, `Object.entries`, and `Object.assign`.
The code samples in this documentation use a JavaScript syntax that isn't natively supported by older browsers like Internet Explorer 11.
If your site needs to support older browsers, use a tool like [Babel](https://babeljs.io/repl) to make your code work in the browsers you target.