Add AI Search & Chat Button to your Document360 docs

What is Document360

Document360 an AI-powered knowledge base software to create internal and public knowledge bases.

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.

To integrate the Inkeep chat button and search bar into your Document360 documentation, follow these steps:

On the Home page remove the default search bar from the Hero section
Go to the page where you want to display the widget and create new Custom code section with the following html:

<div id="inkeepSearchBar"></div>

Navigate to Custom CSS / Javascript settings.
Click on the Javascript tab.
Add the following script to load the inkeep chat button and search bar:

document.addEventListener("DOMContentLoaded", () => {
  // Load the Inkeep script
  const inkeepScript = document.createElement("script");
  inkeepScript.src = "https://unpkg.com/@inkeep/uikit-js@0.3.20/dist/embed.js";
  inkeepScript.type = "module";
  inkeepScript.defer = true;
  document.head.appendChild(inkeepScript);
 
  // Function for customizing the widget configuration
  const inkeepConfig = (componentType, targetElementId) => ({
    componentType,
    targetElement: targetElementId,
    properties: {
      baseSettings: {
        apiKey: "INKEEP_API_KEY", // required
        integrationId: "INKEEP_INTEGRATION_ID", // required
        organizationId: "INKEEP_ORGANIZATION_ID", // required
        primaryBrandColor: "#26D6FF", // your brand color, widget color scheme is derived from this
        organizationDisplayName: "Inkeep",
        // ...optional settings
        theme: {
          // stylesheetUrls: ['/path/to/stylesheets'], // optional
          // ...optional settings
        },
      },
      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 addSearchbarWidget = () => {
    Inkeep().embed(inkeepConfig("SearchBar", "#inkeepSearchBar"));
 
    const observer = new MutationObserver((mutationsList, observer) => {
      const inkeepPortals = document.getElementsByTagName("inkeep-portal");
      
      Array.from(inkeepPortals)?.forEach((inkeepPortal) => {
        inkeepPortal.remove();
      });
 
      inkeepConfig("SearchBar", "#inkeepSearchBar").targetElement = search;
      Inkeep().embed(inkeepConfig("SearchBar", "#inkeepSearchBar"));
    });
 
    observer.observe(document.head, { childList: true });
  };
 
  inkeepScript.addEventListener("load", () => {
    addSearchbarWidget();
    Inkeep().embed(inkeepConfig("ChatButton"));
  });
});

For a full list of customizations, check out the Common Settings.

Add AI Search & Chat Button to your Document360 docs

What is Document360

Get an API key

Initialize the widget

On this page