Skip to main content
Docusaurus Docs Support

Add an AI chatbot to your Docusaurus docs in minutes

A Docusaurus AI chatbot for technical writers, DevRel, and support teams. ChattyBox crawls your Docusaurus docs, answers questions like "How do I configure versioning?" from those pages, and cites the source it used. No custom RAG and no migration.

Crawls published docs pages
Source-cited answers
Embeds with one script
No docs migration required
No credit card requiredYour content stays yours
Ask ChattyBox
x
Where should I start if I need a reliable answer from this site?
Start by adding your website URL to ChattyBox. It crawls your content, answers from the pages it finds, and shows visitors the sources behind each response.
iSources3^
Docusaurus guide
chattybox.ai
Analytics
chattybox.ai
Home
chattybox.ai
Ask a question...
Powered by ChattyBox
Self-serve setup

No sales call required

Some AI support tools make you book a demo before you can even test the product. ChattyBox is self-serve: add your site, crawl your docs, test the chatbot, and embed it when you are ready.

Traditional AI support toolsBook a demo
ChattyBoxStart straight away
Traditional AI support toolsPricing hidden or sales-led
ChattyBoxPublic pricing
Traditional AI support toolsEnterprise-focused
ChattyBoxBuilt for docs sites, small teams, OSS, and SaaS
Traditional AI support toolsSales conversation first
ChattyBoxTest it yourself first
Built for Docusaurus teams

Launch a source-cited chatbot without rebuilding your docs stack

ChattyBox crawls your existing documentation, indexes the content for retrieval, and embeds a chatbot that answers using your docs instead of generic model memory.

A Docusaurus 3 Root wrapper loads the widget once for the lifetime of the client application.
Crawl scope can follow current, versioned, localized, or deliberately filtered documentation routes.
Citations return readers to the supporting Docusaurus page and preserve its version and locale path.
The reproducible example covers duplicate prevention, client navigation, CSP, and route-level verification.
Workflow step

Choose the production Docusaurus sitemap or an intentional set of current, versioned, and localized docs routes.

Workflow step

Crawl the selected routes, then test questions against the exact release and locale your visitors use.

Workflow step

Install one persistent loader in src/theme/Root.tsx and allow its script and API origins in your Content Security Policy.

Workflow step

Navigate between docs pages without a reload and verify one widget instance, working citations, and no console or CSP errors.

Three-step launch

Paste your Docusaurus URL, test cited answers, then install the widget.

Create your chatbot
Tested editorial evidence

A tested Docusaurus 3 integration, not a route-level script

Docusaurus renders a persistent React application around client-side route changes. The tested Root wrapper therefore creates one loader, recognizes later mounts by ID, and leaves the loader in place instead of removing a still-active widget during development remounts.

Technical author
ChattyBox Documentation Team
Technical reviewer
ChattyBox Engineering
Last updated
Information checked
Docusaurus 3.10 and current ChattyBox widget

Recheck the Root lifecycle, sitemap output, and CSP origins after a Docusaurus major upgrade or widget endpoint change.

Docusaurus Root component preventing a duplicate ChattyBox script after client navigation
Original installation reference: the loader has a stable ID, loads asynchronously, and remains present while Docusaurus changes routes.
Docusaurus 3 installation decisions and their end-to-end checks.
Docusaurus concernImplementation decisionVerification
Root and client navigationCreate the async script once by stable ID. Do not return cleanup from the effect because Root and the widget are intended to persist across routes.Open two internal docs links and confirm document.querySelectorAll("#chattybox-widget").length is 1.
Content Security PolicyAllow chattybox.ai in script-src, the configured API origin in connect-src, fonts.googleapis.com in style-src, and fonts.gstatic.com in font-src. The current widget injects its component CSS, so a strict style-src also needs 'unsafe-inline' until a nonce-aware or external stylesheet build is available.Reload with DevTools open and confirm there are no blocked script, style, font, fetch, or WebSocket requests.
Versions, locales, and sitemap scopeInspect the deployed sitemap before crawling. Include only supported release and locale paths, or use separate sources when audiences must not receive cross-version answers.Ask the same release-specific question in each indexed locale and check that every citation keeps the expected route prefix.
Missing or duplicate widgetCheck the API key, loader ID, CSP console messages, script response, and whether another theme component also injects the widget.Test a production build, not only hot reload, and inspect the Elements and Network panels after navigation.
Cited-answer check

Test an answer where the release path matters

A useful acceptance test asks about a setting whose answer can differ by release, then opens the citation to verify both the claim and the versioned URL.

Ask the Docusaurus docs
x
How do I make the latest stable docs open by default?
In the docs plugin configuration, set lastVersion to the version visitors should open and use onlyIncludeVersions when you need to limit published releases. Keep the current docs route only if you want users to access unreleased documentation.
Ask a question...
Powered by ChattyBox
ChattyBox answer about the default Docusaurus version with a versioning guide citation
Original result reference: the answer names the relevant version settings and exposes the official versioning guide as evidence.
Install path

How to add ChattyBox to Docusaurus

Create a Docusaurus theme Root component, add the widget script after your docs are scraped, and deploy. Your visitors can then ask questions from any docs page.

  1. 1Create a ChattyBox project and enter your Docusaurus docs URL or sitemap.
  2. 2Test real Docusaurus questions in the dashboard and confirm citations point to the right pages.
  3. 3Add the widget script in src/theme/Root.tsx so it loads across your documentation site.
Create your chatbot
src/theme/Root.tsx
tsx
import React, { useEffect, type ReactNode } from 'react';

const WIDGET_ID = 'chattybox-widget';

export default function Root({ children }: { children: ReactNode }) {
  useEffect(() => {
    if (document.getElementById(WIDGET_ID)) return;

    const script = document.createElement('script');
    script.id = WIDGET_ID;
    script.src = 'https://chattybox.ai/widget.js';
    script.async = true;
    script.dataset.apiKey = 'YOUR_API_KEY';
    script.dataset.apiUrl = 'https://adorable-woodpecker-629.convex.site/chat';
    script.dataset.chattyboxWidget = 'true';
    document.body.appendChild(script);
  }, []);

  return <>{children}</>;
}
FAQ

Common questions

1

Can ChattyBox crawl a Docusaurus site?

Yes. ChattyBox can crawl public Docusaurus documentation pages or use a sitemap URL to discover docs content.

2

Do I need to change my Docusaurus theme?

No. You embed ChattyBox with a script tag, so it works alongside your existing Docusaurus theme and deployment.

3

Will answers link back to Docusaurus pages?

Yes. Answers can include citations that point users back to the exact documentation pages used for the response.

4

Can I test the bot before installing it?

Yes. You can test scraped content in the dashboard before copying the widget snippet to your Docusaurus site.

Start free

No credit card required. Your content is not used for model training.

Create free chatbot

Free tier. No card needed.