What is Docsy

Docsy is a theme for the Hugo static site generator that’s specifically designed for technical documentation sets and has a lot of best practices built in.

Create the head-end.html file

Create head-end.html at the path layouts/partials/hooks

touch layouts/partials/hooks/head-end.html

Load the script files

Add the below scripts to the head-end.html file:

head-end.html
<script
  src="https://unpkg.com/@inkeep/widgets-embed@0.2.274/dist/embed.js"
  type="module"
  defer
></script>

<script src="/js/addInkeep.js" defer></script>

Create the addInkeep.js script

Create an addInkeep.js file in your static/js folder.

touch static/js/addInkeep.js
Disable the default search in the config.toml (or hugo.toml) file, by setting the offlineSearch parameter to false.

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 nav = document.querySelector("nav");
const sidebar = document.getElementById("td-sidebar-menu");

const inkeepNavDiv = document.createElement("div");
inkeepNavDiv.id = "navSearchBar";
nav.appendChild(inkeepNavDiv);

const inkeepSidebarDiv = document.createElement("div");
inkeepSidebarDiv.id = "sideSearchBar";
sidebar && sidebar.prepend(inkeepSidebarDiv);

// Function for initializating the widget.
const addInkeepWidget = ({
  targetElement,
  stylesheetUrls,
  isShortcutKeyEnabled,
}) => {
  // Embed the widget using the `Inkeep.embed()` function.
  const inkeepWidget = Inkeep().embed({
    componentType: "SearchBar",
    targetElement,
    properties: {
      stylesheetUrls,
      baseSettings: {
        apiKey: "YOUR_API_KEY", // required
        integrationId: "YOUR_INTEGRATION_ID", // required
        organizationId: "YOUR_ORGANIZATION_ID", // required
        primaryBrandColor: "#26D6FF", // your brand color, widget color scheme is derived from this
        organizationDisplayName: "Inkeep",
        // ...optional settings
      },
      modalSettings: {
        // optional settings
        isShortcutKeyEnabled,
      },
      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?",
        ],
      },
    },
  });
};

sidebar &&
  addInkeepWidget({
    targetElement: document.getElementById("sideSearchBar"),
    stylesheetUrls: ['/path/to/stylesheets'], // optional
    isShortcutKeyEnabled: false,
  });

addInkeepWidget({
  targetElement: document.getElementById("navSearchBar"),
  stylesheetUrls: ['/path/to/stylesheets'], // optional
  isShortcutKeyEnabled: true,
});

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

FAQ