Add Search Bar to Hugo Docsy

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.

Get an API key

Follow these steps to create an API key for your web integration.

Create the head-end.html file

Create an head-end.html file 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://cdn.jsdelivr.net/npm/@inkeep/cxkit-js@0.5/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

Note

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, styles, shortcutKey }) => {
  // Embed the widget using the `Inkeep.SearchBar()` function.
  const inkeepWidget = Inkeep.SearchBar(targetElement, {
    baseSettings: {
      apiKey: "INKEEP_API_KEY", // required
      primaryBrandColor: "#26D6FF", // your brand color, widget color scheme is derived from this
      organizationDisplayName: "Inkeep",
      // ...optional settings
      theme: {
        styles,
        // ...optional settings
      },
    },
    modalSettings: {
      // optional settings
      shortcutKey,
    },
    searchSettings: {
      // optional settings
    },
    aiChatSettings: {
      // optional settings
      aiAssistantAvatar: "/img/logo.svg", // use your own AI assistant avatar
      exampleQuestions: [
        "Example question 1?",
        "Example question 2?",
        "Example question 3?",
      ],
    },
  });
};
 
sidebar &&
  addInkeepWidget({
    targetElement: "#sideSearchBar",
    styles: [
      {
        key: "main",
        type: "link",
        value: "/path/to/stylesheets",
      },
    ],
    // optional
    shortcutKey: null,
  });
 
addInkeepWidget({
  targetElement: "#navSearchBar",
  styles: [
    {
      key: "main",
      type: "link",
      value: "/path/to/stylesheets",
    },
  ],
  // optional
  shortcutKey: "k",
});

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