body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#sidebar {
  h5 {
    color: rgb(107 114 128 / var(--tw-text-opacity));
  }
}

header .text-sm.text-primary, #sidebar h5 {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.75rem;
}

#table-of-contents {
  li {
    a {
      padding-top: 0.4rem;
      padding-bottom: 0.4rem;
    }
  }
}

#content-container {
  a {
    h2 {
      margin-bottom: 0.5rem;
    }
    p {
      font-size: 14px;
    }
  }
}


.hello-world {
    background-color: #f0f0f0;
}

// Create a new script element
const script = document.createElement("script");

// Set the source of the script to the external script you want to load
script.src = "https://unpkg.com/@inkeep/widgets-embed@latest/dist/embed.js";

// Use the 'load' event to execute your script after the external script has loaded
script.addEventListener("load", function () {
  const inkeepDiv = document.createElement("div");
  inkeepDiv.id = "inkeepChat";
  inkeepDiv.style.position = "absolute";
  document.body.appendChild(inkeepDiv);

  // Embed the widget using the `Inkeep.embed()` function.
  const config = {
    componentType: "ChatButton",
    targetElement: document.getElementById("inkeepChat"),
    properties: {
      chatButtonType: "ICON_TEXT",
      baseSettings: {
        apiKey: "fc00fd0cbb6a7ec50a24af221c3b57f99b02c88a6d396e76",
        integrationId: "mintlify_inkeep_integration",
        organizationId: "mintlify",
        primaryBrandColor: "#522FC9", // your brand color, widget color scheme is derived from this
        organizationDisplayName: "Inkeep",
        // ...optional settings
        colorMode: {
          // forcedColorMode: isCurrentlyDark ? "dark" : "light", // comment out if you are using theme change
        },
      },
      modalSettings: {
        // optional settings
      },
      searchSettings: {
        // optional settings
      },
      aiChatSettings: {
        // optional settings
        botAvatarSrcUrl: "/img/logo.svg", // use your own bot avatar
        quickQuestions: [
          "Example question 1?",
          "Example question 2?",
          "Example question 3?",
        ],
      },
    },
  };

  const inkeepWidget = Inkeep().embed(config);

  const isCurrentlyDark = document.documentElement.classList.contains("dark");

  const observer = new MutationObserver((mutationsList, observer) => {
    // Look through all mutations that just occured
    for (let mutation of mutationsList) {
      // If the class attribute was modified
      if (mutation.attributeName === "class") {
        const isDark = mutation.target.classList.contains("dark");
        inkeepWidget.render({
          baseSettings: {
            ...config.properties.baseSettings,
            colorMode: {
              forcedColorMode: isDark ? "dark" : "light",
            },
          },
        });
      }
    }
  });

  // Start observing the document with the configured parameters
  observer.observe(document.documentElement, { attributes: true });
});

// Append the script element to the body of the document
document.body.appendChild(script);


"use client";

// Get the Mintlify search containers, going to reuse them as the triggers for Inkeep
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 script
const inkeepScript = document.createElement("script");
inkeepScript.type = "module";
inkeepScript.src =
  "https://unpkg.com/@inkeep/widgets-embed@latest/dist/embed.js";
document.body.appendChild(inkeepScript);

// Once the Inkeep script has loaded, load the Inkeep chat components
inkeepScript.addEventListener("load", function () {
  // Customization settings
  const sharedConfig = {
    baseSettings: {
      apiKey: "ff8db7b1f131b45948013729cbf773e3ca24ee5052d8990d",
      integrationId: "clrfeva74001wgpollwkipc3w",
      organizationId: "inkeep",
      primaryBrandColor: "#26D6FF",
      organizationDisplayName: "Inkeep",
    },
    aiChatSettings: {
      quickQuestions: [
        "What sources are supported?",
        "Can I add Inkeep to my Slack or Discord community?",
        "Who's on the Inkeep team?",
      ],
    },
  };

  // for syncing with dark mode
  const colorModeSettings = {
    observedElement: document.documentElement,
    isDarkModeCallback: (el) => {
      return el.classList.contains("dark");
    },
    colorModeAttribute: "class",
  };

  // add the "Ask AI" pill chat button
   Inkeep().embed({
    componentType: "ChatButton",
    colorModeSync: colorModeSettings,
    properties: sharedConfig,
  });

  // instantiate Inkeep "custom trigger" component
  const inkeepSearchModal = Inkeep({
    ...sharedConfig.baseSettings,
  }).embed({
    componentType: "CustomTrigger",
    colorModeSync: colorModeSettings,
    properties: {
      ...sharedConfig,
      isOpen: false,
      onClose: () => {
        inkeepSearchModal.render({
          isOpen: false,
        });
      },
    },
  });

  // When the Mintlify search bar clone is clicked, open the Inkeep search modal
  clonedSearchButtonContainers.forEach(trigger => {
    trigger.addEventListener("click", function () {
      inkeepSearchModal.render({
        isOpen: true,
      });
    });
  });
});


// Create a new script element
const inkeepScript = document.createElement("script");

// Set the script type to "module"
inkeepScript.type = "module";

// Set the source of the script to the external script you want to load
inkeepScript.src =
  "https://unpkg.com/@inkeep/widgets-embed@latest/dist/embed.js";

// Append the script element to the body of the document
document.body.appendChild(inkeepScript);

// Use the 'load' event to execute your script after the external script has loaded
inkeepScript.addEventListener("load", function () {
  console.log("Inkeep script loaded");

  // current dark status
  const isCurrentlyDark = document.documentElement.classList.contains("dark");

  // Settings for the component
  const sharedConfig = {
    baseSettings: {
      apiKey: "bae305662ca971ade48b7f0d8cb388defb7b2f0b88f7d08b",
      integrationId: "clr9s4dd000041181dv26duip",
      organizationId: "inkeep",
      primaryBrandColor: "#26D6FF", // your brand color, widget color scheme is derived from this
      organizationDisplayName: "Inkeep",
      colorMode: {
        forcedColorMode: isCurrentlyDark ? "dark" : "light",
      },
      theme: {
        components: {
          SearchBarTrigger: {
            defaultProps: {
              size: "expand", // 'expand' 'compact' 'shrink' 'medium'
              variant: "subtle", // 'emphasized' or 'subtle'
            },
          },
        },
      },
    },
    aiChatSettings: {
      // optional settings
      botAvatarSrcUrl:
        "https://storage.googleapis.com/organization-image-assets/inkeep-botAvatarSrcUrl-1705008427143.svg",
      botAvatarDarkSrcUrl:
        "https://storage.googleapis.com/organization-image-assets/inkeep-botAvatarDarkSrcUrl-1701079179105.png",
      quickQuestions: [
        "What sources are supported?",
        "How do I add Inkeep to my docs?",
        "Who's in the Inkeep team?",
      ],
    },
  };

  // CHAT BUTTON
  const inkeepChatContainerEl = document.createElement("div");
  inkeepChatContainerEl.id = "inkeepChat";
  inkeepChatContainerEl.style.position = "absolute";
  document.body.appendChild(inkeepChatContainerEl);

  const chatButton = Inkeep().embed({
    componentType: "ChatButton",
    targetElement: document.getElementById("inkeepChat"),
    properties: {
      ...sharedConfig,
    },
  });

  // OPTION1: INKEEP SEARCH BAR (WORKS AS EXPECTED)
  const buttons = Array.from(document.getElementsByTagName("button"));
  const searchButtonContainerEl = buttons.find((button) =>
    button.textContent.includes("Search...")
  ).parentElement;
  searchButtonContainerEl.innerHTML = "";

  const searchButton = Inkeep().embed({
    componentType: "SearchBar",
    targetElement: searchButtonContainerEl,
    properties: {
      ...sharedConfig,
    },
  });

  // OPTION2: REUSE MINTLIFY SEARCH BAR TRIGGER (SEEMS NOT ALL PROPS IN BASE SETTINGS ARE APPLYING. The chat doesn't work, so identifiers might not be working, and dark mode doesn't work)

  // Clone the mintlify search bar element and replace the original to remove event listeners
  const clonedSearchButtonContainerEl = searchButtonContainerEl.cloneNode(true);
  searchButtonContainerEl.parentNode.replaceChild(
    clonedSearchButtonContainerEl,
    searchButtonContainerEl
  );

  const searchButtonWithCustomTrigger = Inkeep().embed({
    componentType: "CustomTrigger",
    targetElement: clonedSearchButtonContainerEl,
    properties: {
      ...sharedConfig,
      isOpen: false,
      onClose: () => {
        searchButton.render({
          isOpen: false,
        });
      },
    },
  });

  // Add a new event listener to the cloned element to open the search bar
  clonedSearchButtonContainerEl.addEventListener("click", function () {
    searchButton.render({
      isOpen: true,
    });
  });

  // dark mode observer
  const observer = new MutationObserver((mutationsList) => {
    for (let mutation of mutationsList) {
      if (mutation.attributeName === "class") {
        const colorMode = mutation.target.classList.contains("dark")
          ? "dark"
          : "light";

        console.log("Dark mode change");

        chatButton.render({
          baseSettings: {
            ...sharedConfig.baseSettings,
            colorMode: {
              forcedColorMode: colorMode,
            },
          },
        });

        searchButton.render({
          baseSettings: {
            ...sharedConfig.baseSettings,
            colorMode: {
              forcedColorMode: colorMode,
            },
          },
        });

        searchButtonWithCustomTrigger.render({
          baseSettings: {
            ...sharedConfig.baseSettings,
            colorMode: {
              forcedColorMode: colorMode,
            },
          },
        });
      }
    }
  });

  observer.observe(document.documentElement, { attributes: true });
});


// Load the Inkeep script
const inkeepScript = document.createElement("script");
inkeepScript.type = "module";
inkeepScript.src =
  "https://unpkg.com/@inkeep/widgets-embed@latest/dist/embed.js";

document.body.appendChild(inkeepScript);

// Add styles to hide the Mintlify search button
const ikpPluginStyles = document.createElement("style");

// Add your CSS to the style element
ikpPluginStyles.textContent = `
.pointer-events-auto * {
    display: none;
}

.pointer-events-auto {
  height: 36px;
  background-color: transparent !important;
}

@media (min-width: 1024px) {
  .pointer-events-auto {
      margin-right: 1rem;
  }
}

.pointer-events-auto [id^='inkeep-shadow'] {
display: block;
}

button:has(> span.sr-only:contains('Search'))
`;

// Append the style element to the head of the document
document.head.appendChild(ikpPluginStyles);

// find the Mintlify search container
const buttons = Array.from(document.getElementsByTagName("button"));
const searchButtonContainerEl = buttons.find((button) =>
  button.textContent.includes("Search...")
).parentElement;
searchButtonContainerEl.innerHTML = "";

// Once the mintlify script has loaded, load the Inkeep chat components
inkeepScript.addEventListener("load", function () {
  const isCurrentlyDark = document.documentElement.classList.contains("dark");

  // Settings for the component
  const sharedConfig = {
    baseSettings: {
      apiKey: "fc00fd0cbb6a7ec50a24af221c3b57f99b02c88a6d396e76",
      integrationId: "mintlify_inkeep_integration",
      organizationId: "mintlify",
      primaryBrandColor: "#26D6FF", // get from mint.json ? or user provides
      organizationDisplayName: "Inkeep", // user would provide
      colorMode: {
        forcedColorMode: isCurrentlyDark ? "dark" : "light",
      },
      theme: {
        components: {
          SearchBarTrigger: {
            defaultProps: {
              size: "expand",
              variant: "subtle",
            },
          },
        },
      },
    },
    aiChatSettings: {
      botAvatarSrcUrl:
        "https://storage.googleapis.com/organization-image-assets/inkeep-botAvatarSrcUrl-1705008427143.svg", // user would provide
      botAvatarDarkSrcUrl:
        "https://storage.googleapis.com/organization-image-assets/inkeep-botAvatarDarkSrcUrl-1701079179105.png", // user would provide
      quickQuestions: [
        // user would provide
        "What sources are supported?",
        "How do I add Inkeep to my docs?",
        "Who's in the Inkeep team?",
      ],
    },
  };

  // add dummy container for chat
  const inkeepChatContainerEl = document.createElement("div");
  inkeepChatContainerEl.id = "inkeepChat";
  inkeepChatContainerEl.style.position = "absolute";
  document.body.appendChild(inkeepChatContainerEl);

  const searchButton = Inkeep().embed({
    componentType: "SearchBar",
    targetElement: searchButtonContainerEl,
    properties: {
      ...sharedConfig,
    },
  });

  const chatButton = Inkeep().embed({
    componentType: "ChatButton",
    targetElement: document.getElementById("inkeepChat"),
    properties: {
      ...sharedConfig,
    },
  });

  // detect and change components to match color mode
  const observer = new MutationObserver((mutationsList) => {
    for (let mutation of mutationsList) {
      if (mutation.attributeName === "class") {
        const colorMode = mutation.target.classList.contains("dark")
          ? "dark"
          : "light";

        chatButton.render({
          baseSettings: {
            ...sharedConfig.baseSettings,
            colorMode: {
              forcedColorMode: colorMode,
            },
          },
        });

        searchButton.render({
          // isOpen: false,
          baseSettings: {
            ...sharedConfig.baseSettings,
            colorMode: {
              forcedColorMode: colorMode,
            },
          },
        });
      }
    }
  });

  // Observe the "html" element for changes in the "class" attribute
  observer.observe(document.documentElement, { attributes: true });
});


"use client";

// Load the Inkeep script
const inkeepScript = document.createElement("script");
inkeepScript.type = "module";
inkeepScript.src =
  "https://unpkg.com/@inkeep/widgets-embed@latest/dist/embed.js";

document.body.appendChild(inkeepScript);

// find the Mintlify search container
const buttons = Array.from(document.getElementsByTagName("button"));
const searchButtonContainerEl = buttons.find((button) =>
  button.textContent.includes("Search or ask...")
);

const clonedSearchButtonContainerEl = searchButtonContainerEl.cloneNode(true);

// replace with dummy div, required to remove event listeners on it
searchButtonContainerEl.parentNode.replaceChild(
  clonedSearchButtonContainerEl,
  searchButtonContainerEl
);

// Once the script has loaded, load the Inkeep chat components
inkeepScript.addEventListener("load", function () {
  // Settings for the components
  const sharedConfig = {
    baseSettings: {
      apiKey: "<INKEEP_API_KEY>",
      integrationId: "<INKEEP_INTEGRATION_ID>",
      organizationId: "<INKEEP_ORG_ID>",
      primaryBrandColor: "#26D6FF",
      organizationDisplayName: "Inkeep",
      theme: {
        components: {
          SearchBarTrigger: {
            defaultProps: {
              size: "expand",
              variant: "subtle",
            },
          },
        },
      },
    },
    aiChatSettings: {
      // botAvatarSrcUrl:
      //   "https://storage.googleapis.com/organization-image-assets/inkeep-botAvatarSrcUrl-1705425055419.png", // user would provide
      // botAvatarDarkSrcUrl:
      //   "https://storage.googleapis.com/organization-image-assets/inkeep-botAvatarDarkSrcUrl-1701079179105.png", // user would provide
      quickQuestions: [
        "What sources are supported?",
        "Can I add Inkeep to my Slack or Discord community?",
        "Who's on the Inkeep team?",
      ],
    },
  };

  // for syncing with dark mode
  const colorModeSettings = {
    observedElement: document.documentElement,
    isDarkModeCallback: (el) => {
      return el.classList.contains("dark");
    },
    colorModeAttribute: "class",
  };

  // add the chat button
  const chatButton = Inkeep().embed({
    componentType: "ChatButton",
    colorModeSync: colorModeSettings,
    properties: sharedConfig,
  });

  // insantiate Inkeep modal
  const searchButtonWithCustomTrigger = Inkeep({
    ...sharedConfig.baseSettings,
  }).embed({
    componentType: "CustomTrigger",
    colorModeSync: colorModeSettings,
    properties: {
      ...sharedConfig,
      isOpen: false,
      onClose: () => {
        searchButtonWithCustomTrigger.render({
          isOpen: false,
        });
      },
    },
  });

  // When the Mintlify search bar clone is clicked, open the Inkeep search modal
  clonedSearchButtonContainerEl.addEventListener("click", function () {
    searchButtonWithCustomTrigger.render({
      isOpen: true,
    });
  });
});


"use client";

// Get the Mintlify search containers, going to reuse them as the triggers for Inkeep
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 script
const inkeepScript = document.createElement("script");
inkeepScript.type = "module";
inkeepScript.src =
  "https://unpkg.com/@inkeep/widgets-embed@0.2.268/dist/embed.js";
document.body.appendChild(inkeepScript);

// Once the Inkeep script has loaded, load the Inkeep chat components
inkeepScript.addEventListener("load", function () {
  // Customization settings
  const sharedConfig = {
    baseSettings: {
      apiKey: "<INKEEP_API_KEY>",
      integrationId: "<INKEEP_INTEGRATION_ID>",
      organizationId: "<INKEEP_ORGANIZATION_ID>",
      primaryBrandColor: "#26D6FF",
      organizationDisplayName: "Inkeep",
    },
    aiChatSettings: {
      quickQuestions: [
        "What sources are supported?",
        "Can I add Inkeep to my Slack or Discord community?",
        "Who's on the Inkeep team?",
      ],
    },
  };

  // for syncing with dark mode
  const colorModeSettings = {
    observedElement: document.documentElement,
    isDarkModeCallback: (el) => {
      return el.classList.contains("dark");
    },
    colorModeAttribute: "class",
  };

  // add the "Ask AI" pill chat button
   Inkeep().embed({
    componentType: "ChatButton",
    colorModeSync: colorModeSettings,
    properties: sharedConfig,
  });

  // instantiate Inkeep "custom trigger" component
  const inkeepSearchModal = Inkeep({
    ...sharedConfig.baseSettings,
  }).embed({
    componentType: "CustomTrigger",
    colorModeSync: colorModeSettings,
    properties: {
      ...sharedConfig,
      isOpen: false,
      onClose: () => {
        inkeepSearchModal.render({
          isOpen: false,
        });
      },
    },
  });

  // When the Mintlify search bar clone is clicked, open the Inkeep search modal
  clonedSearchButtonContainers.forEach(trigger => {
    trigger.addEventListener("click", function () {
      inkeepSearchModal.render({
        isOpen: true,
      });
    });
  });
});


Inkeep

See it for my docs

Chat with us

Add neural search and AI chat to your Framer application.

Search Bar

Learn how to turn your content into an AI search and support copilot with Inkeep.

Getting Started

Why Inkeep?

Privacy

Add a chat button React component that triggers the Inkeep modal.

Chat Button

This component is used to display a search bar that triggers the Inkeep modal.

Add a chat UI directly on a dedicated React powered page.

Embedded Chat

Use your own custom buttom to open the Inkeep AI search and chat modal.

Custom Trigger

Add the Inkeep chat button using a JS snippet.

Add the Inkeep search bar using a JS snippet.

Add a chat UI directly on a dedicated page

Design your own custom trigger component to open the Inkeep modal.

Review the basic configuration settings for our search and chat experiences.

Base

Customize search-related settings for the Inkeep widgets.

Search

Customize the chat experience for the Inkeep widgets.

AI Chat

Customize the modal component for Inkeep widgets.

Modal

Customize the search and chat widgets to match your brand.

Style the components

Use our callback function to log events from the search and chat widgets to your own analytics tool.

Add your own analytics

Use our AI annotations to intelligently show a contact support button and integrate with your support system.

Support workflows

Add LLM-powered chat to your Docusaurus documentation.

Add neural search and AI chat to your Docusaurus documentation as a search bar.

Add AI search and chat to your Docusaurus docs as a search bar and chat button.

Chat Button & Search Bar

Add neural search and AI chat to your landing page or documentation site.

Trigger the Inkeep modal with a custom button in your Next.js app.

Add AI chat to your Nextra documentation.

Add neural search and AI chat to your Nextra documentation.

Trigger the Inkeep modal with a custom button in your Nextra documentation.

Add neural search and AI chat to your Astro application.

Add AI chat to your landing page or documentation site that uses Remix.

Add neural search and AI chat to your landing page or documentation site that uses Remix.

Add AI chat to your ReadMe documentation.

Add neural search and AI chat to your ReadMe documentation.

Add neural search and AI chat to your WordPress site.

Add neural search and AI chat to your Webflow application.

Trigger the Inkeep modal with a custom button in your Webflow site.

Add LLM-powered chat to your Mintlify documentation.

Mintlify

Add AI chat to your VitePress documentation.

Add neural search and AI chat to your VitePress documentation.

Add AI chat to your Sphinx documentation.

Add neural search and AI chat to your Sphinx documentation.

Ananke (Base theme)

Add the Inkeep bot to your Slack workspace.

Slack

Add the Inkeep bot to your Discord server.

Discord

Discourse

Add AI chat to your Bettermode community.

Bettermode

Onboarding sources

How content is kept up to date for any source

Overview

UI Components

Add to your site

Add to your community

Sources

API

Release Notes

Search Bar

What is Framer

Connect the script

Creating the container

Initialize the widget

Save custom code

FAQ

Overview

UI Components

Add to your site

Add to your community

Sources

API

Release Notes

​What is Framer

​Connect the script

​Creating the container

​Initialize the widget

​Save custom code

​FAQ

What is Framer

Connect the script

Creating the container

Initialize the widget

Save custom code

FAQ