# Ask AI assistant widget for Paligo

> For the complete documentation index, see [llms.txt](/llms.txt)

> Add an AI assistant or AI search widget to your Paligo documentation with this step-by-step guide.

Add an [AI assistant](https://biel.ai) or [AI search widget](https://biel.ai/ai-search-for-docs) 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](https://app.biel.ai/accounts/signup/).
- **A project created in your Biel.ai dashboard**. Follow the [Quickstart guide](https://docs.biel.ai/quickstart.md) to create one.
- **A Paligo account** with HTML5 output capability.
- **Access to your Paligo publication settings** to add custom JavaScript.

## Add the assistant widget {#add-the-chatbot-widget}

![Assistant widget for docs](./images/biel-widget-docs.jpg)

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:

    ```javascript
    (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](https://docs.biel.ai/quickstart.md#2-create-a-project).

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](https://docs.paligo.net/en/style-with-javascript.html).

    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:

    ```html
    <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:

    ```html
    <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](https://docs.biel.ai/customization/layout.md) 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

- [Customize](https://docs.biel.ai/customization.md) the widget's appearance, behavior, and tone.
- [Connect integrations](https://docs.biel.ai/integrations.md) like GitHub Actions, MCP, or Zapier.