# Integrate a relevant search bar to your documentation
Source: https://www.meilisearch.com/docs/guides/front_end/search_bar_for_docs

Use Meilisearch to index content in a text-heavy website. Covers installing Meilisearch, configuring a text scraper, and creating a simple front end.

This tutorial will guide you through the steps of building a relevant and powerful search bar for your documentation 🚀

* [Run a Meilisearch instance](#run-a-meilisearch-instance)
* [Scrape your content](#scrape-your-content)
  * [Configuration file](#configuration-file)
  * [Run the scraper](#run-the-scraper)
* [Integrate the search bar](#integrate-the-search-bar)
  * [For VuePress documentation sites](#for-vuepress-documentation-sites)
  * [For all kinds of documentation](#for-all-kinds-of-documentation)
* [What's next?](#whats-next)

## Run a Meilisearch instance

First, create a new Meilisearch project on Meilisearch Cloud. You can also [install and run Meilisearch locally or in another cloud service](/learn/self_hosted/getting_started_with_self_hosted_meilisearch#setup-and-installation).

<Note>
  The host URL and the API key you will provide in the next steps correspond to the credentials of this Meilisearch instance.
</Note>

## Scrape your content

The Meilisearch team provides and maintains a [scraper tool](https://github.com/meilisearch/docs-scraper) to automatically read the content of your website and store it into an index in Meilisearch.

### Configuration file

The scraper tool needs a configuration file to know what content you want to scrape. This is done by providing selectors (for example, the `html` tag).

Here is an example of a basic configuration file:

```json theme={null}
{
  "index_uid": "docs",
  "start_urls": [
    "https://www.example.com/doc/"
  ],
  "sitemap_urls": [
    "https://www.example.com/sitemap.xml"
  ],
  "stop_urls": [],
  "selectors": {
    "lvl0": {
      "selector": ".docs-lvl0",
      "global": true,
      "default_value": "Documentation"
    },
    "lvl1": {
      "selector": ".docs-lvl1",
      "global": true,
      "default_value": "Chapter"
    },
    "lvl2": ".docs-content .docs-lvl2",
    "lvl3": ".docs-content .docs-lvl3",
    "lvl4": ".docs-content .docs-lvl4",
    "lvl5": ".docs-content .docs-lvl5",
    "lvl6": ".docs-content .docs-lvl6",
    "text": ".docs-content p, .docs-content li"
  }
}
```

The `index_uid` field is the index identifier in your Meilisearch instance in which your website content is stored. The scraping tool will create a new index if it does not exist.

The `docs-content` class is the main container of the textual content in this example. Most of the time, this tag is a `<main>` or an `<article>` HTML element.

`lvlX` selectors should use the standard title tags like `h1`, `h2`, `h3`, etc. You can also use static classes. Set a unique `id` or `name` attribute to these elements.

All searchable `lvl` elements outside this main documentation container (for instance, in a sidebar) must be `global` selectors. They will be globally picked up and injected to every document built from your page.

If you use VuePress for your documentation, you can check out the [configuration file](https://github.com/meilisearch/documentation/blob/main/docs-scraper.config.json) we use in production.
In our case, the main container is `theme-default-content` and the selector titles and subtitles are `h1`, `h2`...

<Tip>
  More [optional fields are available](https://github.com/meilisearch/docs-scraper#all-the-config-file-settings) to fit your needs.
</Tip>

### Run the scraper

You can run the scraper with Docker. With our local Meilisearch instance set up at [the first step](#run-a-meilisearch-instance), we run:

```bash theme={null}
docker run -t --rm \
  --network=host \
  -e MEILISEARCH_HOST_URL='MEILISEARCH_URL' \
  -e MEILISEARCH_API_KEY='MASTER_KEY' \
  -v <absolute-path-to-your-config-file>:/docs-scraper/config.json \
  getmeili/docs-scraper:latest pipenv run ./docs_scraper config.json
```

<Note>
  If you don't want to use Docker, here are [other ways to run the scraper](https://github.com/meilisearch/docs-scraper#installation-and-usage).
</Note>

`<absolute-path-to-your-config-file>` should be the **absolute** path of your configuration file defined at [the previous step](#configuration-file).

The API key should have the permissions to add documents into your Meilisearch instance. In a production environment, we recommend providing the `Default Admin API Key` as it has enough permissions to perform such requests.
*More about [Meilisearch security](/learn/security/basic_security).*

<Tip>
  We recommend running the scraper at each new deployment of your documentation, [as we do for the Meilisearch's one](https://github.com/meilisearch/documentation/blob/main/.github/workflows/scraper.yml).
</Tip>

## Integrate the search bar

If your documentation is not a VuePress application, you can directly go to [this section](#for-all-kinds-of-documentation).

### For VuePress documentation sites

If you use VuePress for your documentation, we provide a [Vuepress plugin](https://github.com/meilisearch/vuepress-plugin-meilisearch). This plugin is used in production in the Meilisearch documentation.

In your VuePress project:

<Tabs>
  <Tab title="yarn">
    ```bash theme={null}
    yarn add vuepress-plugin-meilisearch
    ```
  </Tab>

  <Tab title="npm">
    ```bash theme={null}
    npm install vuepress-plugin-meilisearch
    ```
  </Tab>
</Tabs>

In your `config.js` file:

```js theme={null}
module.exports = {
  plugins: [
    [
      "vuepress-plugin-meilisearch",
      {
        "hostUrl": "<your-meilisearch-host-url>",
        "apiKey": "<your-meilisearch-api-key>",
        "indexUid": "docs"
      }
    ],
  ],
}
```

The `hostUrl` and the `apiKey` fields are the credentials of the Meilisearch instance. Following on from this tutorial, they are respectively `MEILISEARCH_URL` and `MASTER_KEY`.

`indexUid` is the index identifier in your Meilisearch instance in which your website content is stored. It has been defined in the [config file](#configuration-file).

These three fields are mandatory, but more [optional fields are available](https://github.com/meilisearch/vuepress-plugin-meilisearch#customization) to customize your search bar.

<Warning>
  Since the configuration file is public, we strongly recommend providing a key that can only access [the search endpoint](/reference/api/search) , such as the `Default Search API Key`, in a production environment.
  Read more about [Meilisearch security](/learn/security/basic_security).
</Warning>

### For all kinds of documentation

If you don't use VuePress for your documentation, we provide a [front-end SDK](https://github.com/meilisearch/docs-searchbar.js) to integrate a powerful and relevant search bar to any documentation website.

<img alt="Docxtemplater search bar updating results for &#x22;HTML&#x22;" />

*[Docxtemplater](https://docxtemplater.com/) search bar demo*

```html theme={null}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docs-searchbar.js@{version}/dist/cdn/docs-searchbar.min.css" />
  </head>

  <body>
    <input type="search" id="search-bar-input">
    <script src="https://cdn.jsdelivr.net/npm/docs-searchbar.js@{version}/dist/cdn/docs-searchbar.min.js"></script>
    <script>
      docsSearchBar({
        hostUrl: '<your-meilisearch-host-url>',
        apiKey: '<your-meilisearch-api-key>',
        indexUid: 'docs',
        inputSelector: '#search-bar-input',
        debug: true // Set debug to true if you want to inspect the dropdown
      });
    </script>
  </body>
</html>
```

The `hostUrl` and the `apiKey` fields are the credentials of the Meilisearch instance. Following on from this tutorial, they are respectively `MEILISEARCH_URL` and `MASTER_KEY`.

`indexUid` is the index identifier in your Meilisearch instance in which your website content is stored. It has been defined in the [config file](#configuration-file).
`inputSelector` is the `id` attribute of the HTML search input tag.

<Warning>
  We strongly recommend providing a `Default Search API Key` in a production environment, which is enough to perform search requests.

  Read more about [Meilisearch security](/learn/security/basic_security).
</Warning>

The default behavior of this library fits perfectly for a documentation search bar, but you might need [some customizations](https://github.com/meilisearch/docs-searchbar.js#customization).

<Note>
  For more concrete examples, you can check out this [basic HTML file](https://github.com/meilisearch/docs-searchbar.js/blob/main/playgrounds/html/index.html) or [this more advanced Vue file](https://github.com/meilisearch/vuepress-plugin-meilisearch/blob/main/MeiliSearchBox.vue).
</Note>

## What's next?

At this point, you should have a working search engine on your website, congrats! 🎉
You can check [this tutorial](/guides/running_production) if you now want to run Meilisearch in production!