Developer Portal
Add AI Search to your Redocly developer portal
Overview
Redocly Developer Hubs provide a way to build sites for your documentation from plain Markdown files.
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
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: {
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: ['/path/to/stylesheets'], // optional
// ...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/uikit-js@0.3.8/dist/embed.js"
);
embedScript.addEventListener("load", addInkeepWidget);
For a full list of customizations, check out the Search Bar documentation.