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

# Integrate a relevant search bar to your documentation

> 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?](#next-steps)

## 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](/resources/self_hosting/getting_started/quick_start#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

[meilisearch-docsearch](https://github.com/tauri-apps/meilisearch-docsearch) is a community-maintained scraper tool that automatically reads the content of your website and stores it into a Meilisearch index.

<Note>
  `meilisearch-docsearch` is maintained by the community, not by the Meilisearch team. For issues and feature requests, visit the [GitHub repository](https://github.com/tauri-apps/meilisearch-docsearch).
</Note>

### 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.

<Tip>
  Check the [meilisearch-docsearch documentation](https://github.com/tauri-apps/meilisearch-docsearch#readme) for the full list of configuration options.
</Tip>

### Run the scraper

You can run the scraper with Docker:

```bash theme={null}
docker run -t --rm \
  --network=host \
  -e MEILISEARCH_HOST_URL='<MEILISEARCH_URL>' \
  -e MEILISEARCH_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>
  For other installation methods, refer to the [meilisearch-docsearch repository](https://github.com/tauri-apps/meilisearch-docsearch#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](/resources/self_hosting/security/basic_security).*

<Tip>
  We recommend running the scraper at each new deployment of your documentation using a CI/CD pipeline.
</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 your `Default Search API 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/search-with-post) , such as the `Default Search API Key`, in a production environment.
  Read more about [Meilisearch security](/resources/self_hosting/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 src="https://mintcdn.com/meilisearch-6b28dec2/JZ1wsU7CEWrp9Xec/assets/images/tuto-searchbar-for-docs/docxtemplater-searchbar-demo.gif?s=162300f7a78811e55ee85d6b32af6ed9" alt="Docxtemplater search bar updating results for &#x22;HTML&#x22;" width="1280" height="572" data-path="assets/images/tuto-searchbar-for-docs/docxtemplater-searchbar-demo.gif" />

*[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>
```

<Note>
  Replace `{version}` in the CDN URLs above with the actual docs-searchbar.js version number, for example `2.0.5`. Check the [docs-searchbar.js releases page](https://github.com/meilisearch/docs-searchbar.js/releases) for the latest version.
</Note>

The `hostUrl` and the `apiKey` fields are the credentials of the Meilisearch instance. Following on from this tutorial, they are respectively `MEILISEARCH_URL` and your `Default Search API 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](/resources/self_hosting/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>

## Next steps

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