Docsy
Add AI Search to your Docsy docs
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
- Go to the Inkeep Dashboard
- Select your project under Projects
- Go to the Integrations tab
- Click on Create integration
- Select Web
- Provide a Name and URL (optional) for the integration
- Click on Create
- Click the Example < /> button to get your API key and view suggested settings
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://unpkg.com/@inkeep/uikit-js@0.3.8/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: {
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,
// ...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.