Ask AI Button

Appearance

Add Ask AI Button to Docusaurus ​

Integrate the Ask AI Button into your Docusaurus documentation site.

Method 1: Using Script Tags ​

Step 1: Edit docusaurus.config.js ​

Add the Ask AI Button scripts to your docusaurus.config.js:

javascript
module.exports = {
  // ... other config
  scripts: [
    {
      src: 'https://cdn.ask-ai-button.io/loader-v1.js',
      async: true,
    },
  ],
  clientModules: [
    require.resolve('./src/modules/askAiButton.js'),
  ],
};

Step 2: Create Configuration Module ​

Create src/modules/askAiButton.js:

javascript
window.aaib = {
  projectId: 'YOUR_PROJECT_ID',
  theme: 'auto'  // Matches Docusaurus theme
};

Method 2: Using Head Tags ​

Step 1: Configure Head Tags ​

In docusaurus.config.js, add to the headTags section:

javascript
module.exports = {
  // ... other config
  headTags: [
    {
      tagName: 'script',
      innerHTML: `
        window.aaib = {
          projectId: 'YOUR_PROJECT_ID',
          theme: 'auto'
        };
      `,
    },
    {
      tagName: 'script',
      attributes: {
        src: 'https://cdn.ask-ai-button.io/loader-v1.js',
        async: true,
      },
    },
  ],
};

Method 3: Using Custom HTML ​

Step 1: Swizzle the Root Component ​

bash
npm run swizzle @docusaurus/theme-classic Root -- --wrap

Step 2: Edit src/theme/Root.js ​

jsx
import React from 'react';
import {useEffect} from 'react';

export default function Root({children}) {
  useEffect(() => {
    window.aaib = {
      projectId: 'YOUR_PROJECT_ID',
      theme: 'auto'
    };

    const script = document.createElement('script');
    script.src = 'https://cdn.ask-ai-button.io/loader-v1.js';
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return <>{children}</>;
}

Configuration for Docusaurus ​

Docusaurus-specific configuration:

javascript
window.aaib = {
  projectId: 'YOUR_PROJECT_ID',
  theme: 'auto',  // Automatically switches with Docusaurus theme
  position: {
    bottom: '32px',
    right: '32px'
  },
  // Avoid conflicts with Docusaurus UI
  zIndex: 999
};

Handling Theme Switching ​

To sync with Docusaurus theme changes:

javascript
// In your custom module or Root component
const {colorMode} = useColorMode();

useEffect(() => {
  if (window.aaib && window.aaib.updateTheme) {
    window.aaib.updateTheme(colorMode);
  }
}, [colorMode]);

Indexing Docusaurus Content ​

Add your Docusaurus site URL as a documentation source in your Ask AI Button dashboard. The content will be automatically crawled and indexed.

See Configuration Parameters for all available options.

Tutorial ​

Read our guide: How to Add AI Chatbot to Docusaurus.

Source ​

View the integration source code: github.com/aaibt/ask-ai-button/tree/main/integrations/docusaurus