Skip to main content

Ask AI chatbot widget for Antora

Add an AI chatbot or AI search widget to your Antora documentation using Biel.ai's web components.

Prerequisites​

  • A Biel.ai account. If you don't have one, sign up for free.
  • A project created in your Biel.ai dashboard. Follow the Quickstart guide to create one.
  • An Antora documentation site ready to install Biel.ai.

Add the chatbot widget​

Chatbot widget for docs

  1. Modify the UI bundle:

    • If you're using a custom UI bundle for your Antora project, navigate to the UI bundle's directory.

    • Otherwise, clone Antora's default UI bundle with the following command:

      git clone https://gitlab.com/antora/antora-ui-default.git

  2. Locate the head.hbs file, which is usually under src/partials, and insert the following code:

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

  3. Locate the footer.hbs or the specific file where you'd like the chatbot to appear. Just before the closing tags in that file, add the following snippet:

    <biel-button project="<YOUR_PROJECT_ID>"
        header-title="Biel.ai chatbot"
        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.

  4. Build and verify your project:

    • Re-bundle your custom UI and run the Antora build command.
    • If using the default UI, you'd have to integrate it as a local UI and then run Antora with the --ui-bundle-url flag to point to your modified local UI bundle.
    • Once built, ensure the chatbot is functioning correctly on your site.

Next steps​