ReadMe
Add AI Search to your ReadMe docs
What is ReadMe
ReadMe is a platform for creating documentation.
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
Connect the script
- Navigate to Appearance of the project settings
- Open the Custom Include Tags tab
- Add the below code to the HEAD HTML section
<script id="inkeep-script" src="https://unpkg.com/@inkeep/uikit-js@0.3.8/dist/embed.js" type="module" defer></script>
Initialize the widget
Next, in the FOOTER HTML section add the below code to hide the default search bar:
<style>
.rm-SearchToggle {
display: none;
}
</style>
Then add the search bar:
<script type="text/javascript" defer>
const inkeepScript = document.getElementById("inkeep-script");
const readmeHeaderSearch = document.querySelector(".rm-Header-search");
const inkeepDiv = document.createElement("div");
inkeepDiv.id = "inkeepSearchBar";
// configure and initialize the widget
const addInkeepWidget = () => {
const inkeepWidget = Inkeep().embed({
componentType: "SearchBar",
targetElement: "#inkeepSearchBar",
colorModeSync: {
observedElement: document.documentElement,
isDarkModeCallback: (el) => {
const currentTheme = el.getAttribute("data-color-mode");
return currentTheme === "dark";
},
colorModeAttribute: "data-color-mode",
},
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
openShortcutKey: "L"
},
searchSettings: {
// optional settings
},
aiChatSettings: {
// optional settings
botAvatarSrcUrl: "https://mydomain.com/mylogo", // use your own bot avatar
quickQuestions: [
"Example question 1?",
"Example question 2?",
"Example question 3?",
],
},
},
});
};
const observer = new MutationObserver(() => {
readmeHeaderSearch.appendChild(inkeepDiv)
});
observer.observe(document.head, { childList: true });
inkeepScript.addEventListener("load", () => {
addInkeepWidget(); // initialize the widget
});
</script>
Press Save to apply your changes.
For a full list of customizations, check out the Search Bar documentation.