Overview

The Redocly API registry offers API reference docs generated from OpenAPI definitions.

Load the script files

Add the below scripts to the index.html file:

<script src="https://unpkg.com/@inkeep/widgets-embed@<<version>>/dist/embed.js" type="module" defer></script>
<script src="addInkeep.js" type="module" defer></script>

Latest widget version is 0.2.258

Create the addInkeep.js script

Create an addInkeep.js file in your docs folder.

touch docs/addInkeep.js

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

addInkeep.js
// Create an HTML element that the Inkeep widget will be inserted into.
const searchBarParentNode = document.querySelector(".scrollbar-container");
const inkeepDiv = document.createElement("div");
inkeepDiv.id = "inkeep";
searchBarParentNode.prepend(inkeepDiv);

let inkeepWidget = null;
const targetElement = document.getElementById("inkeep");
const config = {
  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?",
      ],
    },
  },
};

// Wait for container to render
if (!inkeepWidget && targetElement) {
  // Embed the widget using the `Inkeep.embed()` function.
  inkeepWidget = Inkeep().embed(config);
}

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

FAQ