Add Chat Button to MkDocs

What is MkDocs

MkDocs is a platform for creating documentation with markdown.

Get an API key

Follow these steps to create an API key for your web assistant.

In docs folder create a custom js file, for example inkeep-button.js. Add path to this file to the mkdocs.yml:

mkdocs.yml

extra_javascript:
  - inkeep-button.js

Then add the button:

Note

You will need to replace REPLACE_WITH_YOUR_INKEEP_API_KEY with your actual Inkeep API key in the code below.

inkeep-button.js

document.addEventListener("DOMContentLoaded", () => {
  // Load the Inkeep script
  const inkeepScript = document.createElement("script");
  inkeepScript.src =
    "https://cdn.jsdelivr.net/npm/@inkeep/cxkit-js@0.5/dist/embed.js";
  inkeepScript.type = "module";
  inkeepScript.defer = true;
  document.head.appendChild(inkeepScript);
 
  // Configure and initialize the widget
  const addInkeepWidget = () => {
    const inkeepWidget = Inkeep.ChatButton({
      baseSettings: {
        apiKey: "REPLACE_WITH_YOUR_INKEEP_API_KEY", // required - replace with your own API key
        primaryBrandColor: "#26D6FF", // your brand color, widget color scheme is derived from this
        organizationDisplayName: "Inkeep",
        // ...optional settings
        colorMode: {
          sync: {
            target: document.documentElement,
            attributes: ["data-color-mode"],
            isDarkMode: (attributes) =>
              attributes["data-color-mode"] === "dark",
          },
        },
      },
      modalSettings: {
        // optional settings
      },
      searchSettings: {
        // optional settings
      },
      aiChatSettings: {
        // optional settings
        aiAssistantAvatar: "https://mydomain.com/mylogo", // use your own AI assistant avatar
        exampleQuestions: [
          "Example question 1?",
          "Example question 2?",
          "Example question 3?",
        ],
      },
    });
  };
 
  inkeepScript.addEventListener("load", () => {
    addInkeepWidget(); // initialize the widget
  });
});

For a full list of customizations, check out the Chat Button documentation.

Add Chat Button to MkDocs

What is MkDocs

Get an API key

Initialize the widget

On this page