Overview

Redocly Developer Hubs provide a way to build sites for your documentation from plain Markdown files.

Attach the script

Attach the addInkeep.js script in the siteConfig.yaml file:

scripts:
  - ./static/addInkeep.js

Create the addInkeep.js script

Create an addInkeep.js file in your static folder.

touch static/addInkeep.js

Now, create a container and configure the search bar component.

addInkeep.js
// Function for adding a script to the page
const addScript = (src, type = "module", defer = true) => {
  const script = document.createElement("script");
  script.src = src;
  script.type = type;
  script.defer = defer;
  document.body.appendChild(script);
  return script;
};

// Function for customizing the widget configuration
const inkeepConfig = (targetElement) => ({
  componentType: "SearchBar",
  targetElement,
  properties: {
    stylesheetUrls: ['/path/to/stylesheets'], // optional
    baseSettings: {
      apiKey: "YOUR_API_KEY",
      integrationId: "YOUR_INTEGRATION_ID",
      organizationId: "YOUR_ORGANIZATION_ID",
      primaryBrandColor: "#26D6FF", // your brand color, widget color scheme is derived from this
      organizationDisplayName: "Inkeep",
      // ...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?",
      ],
    },
  },
});

// Function for initializating the widget 
const addInkeepWidget = () => {
  const search = document.getElementById("search")?.parentNode;

  if (!search) return;

  search.style.height = "auto";
  search.innerHTML = "";

  Inkeep().embed(inkeepConfig(search));

  const observer = new MutationObserver((mutationsList, observer) => {
    const search = document.getElementById("search")?.parentNode;

    if (!search) return;

    const inkeepPortals = document.getElementsByTagName("inkeep-portal");

    Array.from(inkeepPortals)?.forEach((inkeepPortal) => {
      inkeepPortal.remove();
    });

    search.innerHTML = "";
    search.style.height = "auto";

    inkeepConfig(search).targetElement = search;
    
    // Embed the widget using the `Inkeep.embed()` function.
    Inkeep().embed(inkeepConfig(search));
  });

  observer.observe(document.head, { childList: true });
};

// Adding the script and initializing the widget
const inkeepWidgetScript = document.createElement("script");
inkeepWidgetScript.defer = true;
inkeepWidgetScript.innerHTML = addInkeepWidget.toString();

document.body.appendChild(inkeepWidgetScript);

const embedScript = addScript(
  "https://unpkg.com/@inkeep/widgets-embed@<<version>>/dist/embed.js"
);

embedScript.addEventListener("load", addInkeepWidget);

Latest widget version is 0.2.258

For a full list of customizations, check out the Search Bar documentation.

FAQ