Skip to main content

Ask AI chatbot widget for Confluence

Add an AI chatbot or AI search widget to your Confluence space 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 Confluence Cloud instance.
  • Admin access to your Confluence space to configure custom HTML.
tip

Looking to connect Confluence as a data source instead? See Confluence as a data source to index your Confluence pages for AI answers.

Add the chatbot widget​

Chatbot widget for docs

info

This method requires Confluence admin permissions and may vary based on your Confluence version and configuration.

  1. Navigate to Space settings for your Confluence space.

  2. Click Look and Feel in the sidebar.

  3. Select the Custom HTML tab.

  4. In the At end of HEAD section, add:

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

  5. In the At end of BODY section, add:

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

  6. Click Save to apply the changes to all pages in the space.

Limitations​

Confluence Cloud restrictions

  • Custom HTML features may be limited based on your Confluence plan
  • Some Confluence Cloud instances restrict script execution for security

Alternative approach

  • If custom HTML is restricted, consider using the Confluence data source integration and embedding the chatbot on an external documentation site that links to your Confluence content.

Troubleshooting​

Custom HTML not available

  • Verify your Confluence plan includes custom HTML support
  • Contact your Confluence admin to enable custom HTML features
  • Some organizations disable custom HTML for security reasons

Chatbot not appearing

  • Check that both the CSS and JavaScript links are properly added
  • Verify your project ID is correct
  • Check browser console for any error messages

Styling issues

  • Confluence's default styling may conflict with the widget
  • Try adjusting the button-position attribute (e.g., center-right, bottom-left)
  • See the customization section for style overrides

Next steps​