Skip to main content

Add AI to MkDocs

Integrate the Kapa chat widget into your MkDocs 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 MkDocs site, you'll need to:

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

Installation​

  1. Locate your mkdocs.yml configuration file and add the following to the extra_javascript section:

  2. Add the following code to the extra_javascript section of the mkdocs.yml file:

extra_javascript:
  - "javascript/init_kapa_widget.js"

  1. Create a new JavaScript file named init_kapa_widget.js in the docs/javascript folder.

  2. Add the following code to the init_kapa_widget.js file, replacing the placeholders with your specific project parameters:

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);
});
  1. Save the changes to both files and rebuild your MKDocs project. The Kapa website widget should now be installed and visible on your documentation pages.
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.