Skip to main content

Basic installation

Add a Biel.ai AI assistant or AI search widget to any HTML site. This method uses CDN-hosted components — no build tools or package managers required.

Prerequisites​

Add the assistant widget​

The <biel-button> component adds a floating chat button to your site.

Assistant widget for docs

  1. Add the following inside the head section of your HTML:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/biel-search/dist/biel-search/biel-search.css">
    <script type="module" src="https://cdn.jsdelivr.net/npm/biel-search/dist/biel-search/biel-search.esm.js"></script>

  2. Add the following just before the closing body tag:

    <biel-button project="<YOUR_PROJECT_ID>"
        header-title="Biel.ai assistant"
        button-position="bottom-right"
        modal-position="bottom-right"
        button-style="dark">
            Ask AI
    </biel-button>

    Replace <YOUR_PROJECT_ID> with your project's ID from the Biel.ai dashboard.

  3. Open the page in a browser to verify the assistant appears in the bottom-right corner.

Add the search widget​

The <biel-search-button> component adds an AI-powered search bar instead of (or alongside) the assistant.

Biel search

  1. Add the following inside the head section of your HTML:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/biel-search/dist/biel-search/biel-search.css">
    <script type="module" src="https://cdn.jsdelivr.net/npm/biel-search/dist/biel-search/biel-search.esm.js"></script>

  2. Add the following where you want the search button to appear:

    <biel-search-button project="<YOUR_PROJECT_ID>" button-style="rounded">Search</biel-search-button>

    Replace <YOUR_PROJECT_ID> with your project's ID from the Biel.ai dashboard.

  3. Open the page in a browser to verify the search widget works.

Select a widget version​

The links above omit a version, which is equivalent to biel-search@latest. The browser loads the latest published npm release from jsDelivr. It can change without rebuilding your site, although CDN caching means a new release may not appear immediately.

To use a specific release, include the same version in both asset URLs:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/biel-search/biel-search.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/biel-search/biel-search.esm.js"></script>

Replace 0.1.93 with your chosen release. Remove the version, or use @latest, to follow new releases again. See jsDelivr's versioning and caching documentation.

Next steps​