Skip to main content

Ask AI assistant widget for Paligo

Add an AI assistant or AI search widget to your Paligo 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.
  • A Paligo account with HTML5 output capability.
  • Access to your Paligo publication settings to add custom JavaScript.

Add the assistant widget​

Assistant widget for docs

  1. Log in to your Paligo account and open your publication.

  2. Create a local biel.js file, or add the following code to the custom JavaScript file already used by your layout:

    (function() {
      var link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = 'https://cdn.jsdelivr.net/npm/biel-search/dist/biel-search/biel-search.css';
      document.head.appendChild(link);

      var script = document.createElement('script');
      script.type = 'module';
      script.src = 'https://cdn.jsdelivr.net/npm/biel-search/dist/biel-search/biel-search.esm.js';
      document.head.appendChild(script);

      script.onload = function() {
        var button = document.createElement('biel-button');
        button.setAttribute('project', '<YOUR_PROJECT_ID>');
        button.setAttribute('header-title', 'Biel.ai assistant');
        button.setAttribute('button-position', 'bottom-right');
        button.setAttribute('modal-position', 'bottom-right');
        button.setAttribute('button-style', 'dark');
        button.textContent = 'Ask AI';
        document.body.appendChild(button);
      };
    })();

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

  3. In Paligo, select Layout, open your HTML5 layout, and choose CSS, JS, logos and other assets. Under Custom Javascript, click Upload and select the .js file, then click Save. See Paligo's JavaScript guide.

    A layout accepts one custom JavaScript file. If it already has one, extend that file rather than replacing its existing functionality.

  4. Publish using the modified layout and verify the assistant on the generated pages.

Alternative: modify published HTML​

If you host and postprocess the exported HTML yourself, add the widget to the generated files:

  1. Open the generated HTML files in your exported output.

  2. Add the initialization scripts to each page's head section:

    <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. Add the widget code 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>

  4. Publish the modified output. Repeat this postprocessing after each Paligo export, since new output replaces the generated files.

Troubleshooting​

Custom JavaScript not working

  • Verify your Paligo plan includes custom JavaScript features
  • Check that the JavaScript file is uploaded to the layout used for publication
  • Review browser console for any JavaScript errors

Assistant not appearing

  • Ensure both the CSS and JavaScript modules are loading (check Network tab)
  • Verify your project ID is correct
  • Clear your browser cache and reload the page

Styling conflicts with Paligo themes

  • Paligo's built-in themes may have conflicting styles
  • Try adjusting the button-position attribute (e.g., center-right, bottom-left)
  • See the customization section for style overrides

Assistant appearing on some pages but not others

  • Ensure every publication uses the layout with the uploaded JavaScript
  • Verify all pages are being regenerated when you publish

Next steps​