AI chat widget for Antora
Add an AI chatbot to your Antora documentation using Biel.ai's web components. The integration works with any Antora UI bundle and requires only adding a few lines to your templates.
This guide shows you how to add the chat widget to your Antora site in minutes using UI bundle modifications.
Prerequisites
Before starting, ensure you have:
- 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.
Installation
The Biel.AI chat widget enables a conversational chat powered by AI in your site.
To integrate the Biel.AI chat widget into your Docusaurus site:
-
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
-
-
Locate the
head.hbs
file, which is usually undersrc/partials
, and insert the following code to initialize the Biel.AI chat widget:<!-- Initialize the Biel.AI chat widget -->
<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> -
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. -
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
For more about customization and additional features exploration, check out the customization section.
Need assistance? We're here to help! Reach out to us at Biel.ai Support.