For the complete documentation index, see llms.txt
Skip to main content

Ask AI chatbot widget for ReadMe

Add an AI chatbot or AI search widget to your ReadMe 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 ReadMe project with a paid plan that allows custom JavaScript.
  • Admin access to your ReadMe project.

Add the chatbot widget​

Chatbot widget for docs

  1. Log in to your ReadMe dashboard and navigate to your project.

  2. Access appearance settings:

    • Click on Settings in the left sidebar.
    • Select Appearance from the settings menu.
    • Scroll down to the Custom JavaScript & CSS section.
    tip

    If you don't see the Custom JavaScript & CSS option, verify that your ReadMe plan includes this feature.

  3. Add the Biel.ai initialization code in the Custom JavaScript field:

    (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 chatbot');
        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.

  4. Click Save to apply the changes.

  5. Visit your ReadMe documentation in a web browser to verify the chatbot appears and works correctly.

Troubleshooting​

Custom JavaScript not available​

  • Custom JavaScript requires a ReadMe Business or Enterprise plan
  • Contact your ReadMe admin to upgrade if needed

Chatbot not appearing​

  • Check your browser console for any error messages
  • Ensure the script has loaded properly (look in the Network tab)
  • Verify your project ID is correct

Conflicts with ReadMe's chat widget​

  • If you're using ReadMe's built-in Intercom or other chat widgets, you may want to adjust positioning
  • Use the button-position attribute to move the Biel.ai widget (e.g., bottom-left, center-right)

Next steps​