Add AI Website Widget to MkDocs Documentation - Invero Integration

Integrate the Invero Website 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 Invero 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:

   extra_javascript:
     - "javascript/init_invero_widget.js"
   

2. Create a new JavaScript file named init_invero_widget.js in the docs/javascript folder.

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

document.addEventListener("DOMContentLoaded", function () {
  var script = document.createElement("script");
  script.src = "https://widget.invero.ai/invero-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);
});

5. Save the changes to both files and rebuild your MKDocs project. The Invero Website Widget should now be installed and visible on your documentation pages.