How to Add AI Chatbot to GitBook

Why Add a Chatbot to Your GitBook Documentation?

GitBook creates beautiful, organized documentation, but as your content grows, users can struggle to find specific information. They might use different terminology than your docs, or need to piece together information from multiple sections.

A documentation chatbot enhances GitBook by:

• Understanding questions in natural language ("how do I set this up?" vs searching for "installation prerequisites")
• Instantly finding relevant information across all your pages
• Reducing repetitive support questions
• Working 24/7 without manual intervention

Ask AI Button is designed specifically for technical documentation - it answers questions using only your GitBook content as the knowledge source, ensuring accurate, contextual responses.

This tutorial walks you through adding Ask AI Button to your GitBook site.

What You'll Build

By the end of this tutorial, you'll have:

• A chat widget on every page of your GitBook
• An AI assistant that answers questions from your documentation
• Customizable appearance to match your GitBook theme

Prerequisites

Before starting, ensure you have:

• A published GitBook space
• Admin access to your GitBook settings
• An Ask AI Button account with a project ID

Step 1: Get Your Project ID

First, sign up for Ask AI Button and create a project for your GitBook documentation. You'll receive a project ID (like 12345) that connects the chatbot to your specific content.

Step 2: Access GitBook Integrations

In your GitBook space:

1. Click the Settings icon (⚙️) in the top right
2. Navigate to Integrations in the sidebar
3. Scroll to the Custom section

Step 3: Add the Custom Integration

GitBook allows custom HTML/JavaScript through their integrations. Click on Custom HTML and add the following code:

<script defer src="https://cdn.ask-ai-button.io/loader-v1.js"></script>
<script>
  window.aaib = {
    projectId: 'YOUR_PROJECT_ID' // Replace with your actual project ID
  };
</script>

Choose where to inject the script:

• Head - Loads earlier but may impact initial page load
• Body (Recommended) - Better performance, loads after content

Step 4: Configure for Your Use Case

Expand the configuration based on your documentation type:

For API Documentation

<script defer src="https://cdn.ask-ai-button.io/loader-v1.js"></script>
<script>
  window.aaib = {
    projectId: 'YOUR_PROJECT_ID',
    greeting: 'Ask me about endpoints, authentication, or examples',
    suggestedQuestions: [
      'How do I authenticate?',
      'What are the rate limits?',
      'Show me a POST request example'
    ],
    primaryColor: '#0969da' // GitHub blue for developer docs
  };
</script>

For User Guides

<script defer src="https://cdn.ask-ai-button.io/loader-v1.js"></script>
<script>
  window.aaib = {
    projectId: 'YOUR_PROJECT_ID',
    greeting: 'Need help? Ask me anything about our product',
    suggestedQuestions: [
      'How do I get started?',
      'How do I reset my password?',
      'What are the system requirements?'
    ],
    position: 'bottom-right',
    theme: 'auto' // Matches GitBook's light/dark mode
  };
</script>

For a complete list of configuration options, visit our configuration documentation.

Step 5: Save and Publish

1. Click Save in the integration settings
2. GitBook will automatically apply the changes
3. Visit your published GitBook to see the chatbot in action

Step 6: Test the Integration

Once published, verify everything works:

1. Navigate to your GitBook site
2. Look for the chat widget (typically bottom-right)
3. Ask a test question about your documentation
4. Confirm the bot provides accurate answers from your content

Handling GitBook's Publishing Flow

GitBook has different environments (published, draft, variants). Keep in mind:

• The chatbot only appears on your published site
• Changes to the integration require publishing to take effect
• If using GitBook variants, add the integration to each variant separately

Customizing for GitBook Themes

GitBook supports both light and dark themes. Make your chatbot match:

<script defer src="https://cdn.ask-ai-button.io/loader-v1.js"></script>
<script>
  window.aaib = {
    projectId: 'YOUR_PROJECT_ID',
    theme: 'auto', // Automatically matches GitBook's theme
    primaryColor: '#6366f1', // Your brand color
    position: 'bottom-right'
  };
</script>

Troubleshooting Common Issues

Chatbot not appearing:

• Ensure you've published your GitBook after adding the integration
• Check if you're viewing the published site, not the editor preview
• Verify the project ID is correct

Script conflicts:

• If you have other custom scripts, ensure there are no JavaScript errors
• Try placing the Ask AI Button script in a different injection point (Head vs Body)

Content not being found:

• Verify your GitBook is publicly accessible
• Check the Ask AI Button dashboard to confirm content indexing
• Ensure your project ID matches your Ask AI Button project

Advanced: Using GitBook Collections

If you're using GitBook Collections (multiple spaces), you have two options:

1. Single chatbot for all spaces: Use the same project ID across all spaces
2. Separate chatbots per space: Create different projects with unique IDs

For organization-wide documentation, option 1 usually works best as the chatbot can answer questions across all your documentation.

Monitoring and Improving

After deployment:

1. Review chat conversations in your Ask AI Button dashboard
2. Identify common questions that might indicate documentation gaps
3. Use insights to improve your GitBook structure and content
4. Adjust suggested questions based on actual user queries

Performance Notes

The Ask AI Button script:

• Loads asynchronously with defer to avoid blocking page load
• Adds minimal overhead (< 50KB gzipped)
• Initializes after your GitBook content loads
• Respects GitBook's built-in lazy loading

Conclusion

Adding Ask AI Button to GitBook takes just a few minutes through the custom integration feature. Your chatbot will automatically stay synchronized with your documentation - when you update your GitBook content, the chatbot's knowledge updates too.

For more detailed integration options and advanced configurations, check our GitBook integration guide.

Next Steps

• Customize the chatbot appearance to match your brand
• Set up suggested questions based on your most common support topics
• Monitor usage analytics to understand what users are searching for
• Consider adding context-specific greetings for different sections

---

Ask AI Button is a chatbot specifically designed for technical documentation. It helps users find answers using only your documentation as the source of truth.