Add Inkeep's UI components to your Mintlify docs

Overview

Mintlify is a managed documentation platform with a fresh, modern look.

You can leverage Inkeep to extend the default functionality provided by the Mintlify platform with:

Additional sources, like GitHub repos and community forums.
Extensible search bar, chat button, and embedded chat UI components you can add to your help desk, app, docs, or marketing site.
Slack and Discord bots for your community or internal team channels
AI tools for support teams

To add Inkeep's search bar or "Ask AI" chat button to your Mintlify docs, you can add a script file to the root of your docs repo. Check out the search bar and chat button on this page for an example.

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 and URL (optional) for the integration
Click on Create
Click the Example < /> button to get your API key and view suggested settings

Add a script to your repo

Create an inkeep.js file at the root of your documentation GitHub repo like the example below. Customize inkeepSettings with your API key and other customizations.

By default, the below script adds both Inkeep's search bar and AI chat button.

inkeep.js

// customize
const inkeepSettings = {
  baseSettings: {
    apiKey: "INKEEP_API_KEY", // required
    integrationId: "INKEEP_INTEGRATION_ID", // required
    organizationId: "INKEEP_ORGANIZATION_ID", // required
    primaryBrandColor: "#26D6FF", // required -- your brand color, the color scheme is derived from this
    organizationDisplayName: "Inkeep",
    // ...optional settings
  },
  aiChatSettings: {
    // ...optional settings
    botAvatarSrcUrl:
      "https://mydomain.com/mylogo.svg",
    quickQuestions: [
      "Example question 1?",
      "Example question 2?",
      "Example question 3?",
    ],
  },
  modalSettings: {
    isShortcutKeyEnabled: false, // disable default cmd+k behavior
    // ...optional settings
  },
};
 
// The Mintlify search triggers, which we'll reuse to trigger the Inkeep modal
const searchButtonContainerIds = [
  "search-bar-entry",
  "search-bar-entry-mobile",
];
 
// Clone and replace, needed to remove existing event listeners
const clonedSearchButtonContainers = searchButtonContainerIds.map((id) => {
  const originalElement = document.getElementById(id);
  const clonedElement = originalElement.cloneNode(true);
  originalElement.parentNode.replaceChild(clonedElement, originalElement);
 
  return clonedElement;
});
 
// Load the Inkeep component library
const inkeepScript = document.createElement("script");
inkeepScript.type = "module";
inkeepScript.src =
  "https://unpkg.com/@inkeep/uikit-js@0.3.19/dist/embed.js";
document.body.appendChild(inkeepScript);
 
// Once the Inkeep library is loaded, instantiate the UI components
inkeepScript.addEventListener("load", function () {
  // Customization settings
 
  // for syncing with dark mode
  const colorModeSettings = {
    observedElement: document.documentElement,
    isDarkModeCallback: (el) => {
      return el.classList.contains("dark");
    },
    colorModeAttribute: "class",
  };
 
  // Instantiate the 'Ask AI' pill chat button. Optional.
  Inkeep().embed({
    componentType: "ChatButton",
    colorModeSync: colorModeSettings,
    properties: inkeepSettings,
  });
 
  // Instantiate the search bar modal
  const inkeepSearchModal = Inkeep({
    ...inkeepSettings.baseSettings,
  }).embed({
    componentType: "CustomTrigger",
    colorModeSync: colorModeSettings,
    properties: {
      ...inkeepSettings,
      isOpen: false,
      onClose: () => {
        inkeepSearchModal.render({
          isOpen: false,
        });
      },
    },
  });
 
  // When the Mintlify search bar elements are clicked, open the Inkeep search modal
  clonedSearchButtonContainers.forEach((trigger) => {
    trigger.addEventListener("click", function () {
      inkeepSearchModal.render({
        isOpen: true,
      });
    });
  });
 
  // Open the Inkeep Modal with cmd+k
  window.addEventListener(
    "keydown",
    (event) => {
      if (
        (event.metaKey || event.ctrlKey) &&
        (event.key === "k" || event.key === "K")
      ) {
        event.stopPropagation();
        inkeepSearchModal.render({ isOpen: true });
        return false;
      }
    },
    true
  );
});

Note

If custom JavaScript is not part of your plan, let us know, and we'll work with the Mintlify team to enable it for you under your current plan.

Add Inkeep's UI components to your Mintlify docs

Overview

Get an API key

Add a script to your repo

On this page