IntegrationsMkdocs
Add AI Chat to your MkDocs docs
What is MkDocs
MkDocs is a platform for creating documentation with markdown.
Get an API key
- Go to the Inkeep Dashboard
- Select your project under Projects
- Go to the Integrations tab
- Click on Create integration
- Select Web
- Provide a Name.
- Specify a URL for where this integration will be used.
- For production API keys, leave Enforce referrer URL checked.
- Click on Create
- Click the Example < /> button to get your API key and view suggested settings
For local or staging API keys, see here.
Initialize the widget
In docs folder create a custom js file, for example inkeep-button.js. Add path to this file to the mkdocs.yml:
extra_javascript:
- inkeep-button.jsThen add the button:
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: "INKEEP_API_KEY", // required
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.