Integrate Meilisearch into a website
####################################
Meilisearch can be integrated into any website as a web component (search bar)
that is linked to a running Meilisearch instance.
Add the search bar to a web page
================================
To add a search bar to a web page, follow these steps:
#. Download the ``docs-searchbar.js`` package from a content delivery network.
You can use this script tag:
.. code-block:: html
#. Initialize the search bar by calling the ``docsSearchBar`` function with the
desired configuration. Here is an example:
.. code-block:: html
- Replace the value shown for the ``hostUrl`` option with the URL where your search
engine is hosted.
- Replace the value shown for the ``apiKey`` option with your public API key.
- Replace the value shown for the ``indexUid`` option with the unique name for the
desired index.
- Modify values for other options (``debug``, ``enhancedSearchInput``, and
``enableDarkMode``) as needed.
This example shows how to add a search bar to a web page and link it
to a Meilisearch instance:
.. literalinclude:: ../_static/simple.html
:language: html
Customize the style of the search bar
=====================================
Because the search bar is an HTML component, you can use CSS to
customize its style. Here is an example:
.. literalinclude:: ../_static/search.html
:language: html