Add AI to ReadTheDocs

Integrate the kapa.ai chat widget into your ReadTheDocs documentation to enable users to ask natural language questions about your product, significantly enhancing user experience by providing quick and accurate answers.

Prerequisites

Before adding the widget to your ReadTheDocs site, you'll need to:

1. Ensure you have a kapa.ai project set up with your knowledge sources added
2. Follow the general installation instructions to enabled your domain and obtain your Website ID

Installation

The installation process for ReadTheDocs involves creating custom JavaScript and CSS files, then configuring your Sphinx project to include them.

1. Create Custom JavaScript File

In your Sphinx project directory, create a new file at _static/custom.js:

document.addEventListener("DOMContentLoaded", function () {
  var script = document.createElement("script");
  script.src = "https://widget.kapa.ai/kapa-widget.bundle.js";
  script.setAttribute("data-website-id", "XXX-XXX-XXX");
  script.setAttribute("data-project-name", "PROJECT_NAME");
  script.setAttribute("data-project-color", "#HEX_COLOR_CODE");
  script.setAttribute("data-project-logo", "https://LINK_TO_LOGO.com/logo.png");
  script.async = true;
  document.head.appendChild(script);
});

2. Add Custom CSS

Create a new file at _static/custom.css:

#kapa-widget-container {
  z-index: 10000 !important;
  position: absolute !important;
}

.mantine-Modal-root {
  z-index: 10000;
  position: absolute;
}

3. Configure Sphinx

Update your conf.py file to include the custom files:

html_static_path = ["_static"]
html_js_files = ["custom.js"]
html_css_files = ["custom.css"]

4. Deploy Changes

Commit and push these changes to your repository. ReadTheDocs will automatically rebuild your documentation with the new widget integration.

Customization Options

To tailor the widget to your brand and specific needs, visit our Configuration page. There, you'll find detailed instructions on how to adjust colors, logos, and other widget properties.