Ask AI chatbot widget for Jekyll

Add an AI chatbot or AI search widget to your Jekyll site 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.
• A Jekyll application ready to install Biel.ai.

Add the chatbot widget

To integrate the Biel.AI chat widget into your Jekyll site:

1. Open the _includes/head.html file (or the equivalent file that contains the head section in your Jekyll theme). Append 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>

2. Open _includes/footer.html or the specific file where you'd like the chatbot to appear. Add the following snippet just before its closing tags:

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

3. Run jekyll build and verify the chatbot appears on your site.

Next steps

• Customize the widget's appearance, behavior, and tone.
• Connect integrations like GitHub Actions, MCP, or Zapier.