Add Inkeep's UI components to your Fern docs

Overview

Fern is a static site generator for developer-focused companies to build and host a beautiful, professional docs site.

To add Inkeep's search bar or "Ask AI" chat button to your Fern docs, you can use the @inkeep/cxkit-fern package.

Get an API key

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

Load the script files

Open the docs.yml file used to configure Fern.
Add the below scripts to the docs.yml file in js step:

docs.yml

js:
  - path: ./inkeep.js
    strategy: lazyOnload

This links to a local script where we'll setup Inkeep for your project. It should be a relative path to wherever you'd like to setup the script. E.g. ./assets/inkeep.js

Create the inkeep.js script

Create the ./inkeep.js file.

touch inkeep.js

Add a script to your repo

Create an inkeep.js file at the root of your documentation GitHub repo like the example below.

Customize settings with your API key and other customizations.

inkeep.js

function loadScript(url, callback) {
  const script = document.createElement("script");
  script.src = url;
  script.type = "text/javascript";
  script.onload = callback;
  document.head.appendChild(script);
}
 
loadScript(
  "https://cdn.jsdelivr.net/npm/@inkeep/cxkit-fern@0.5/dist/index.js",
  () => {
    const settings = {
      baseSettings: {
        apiKey: "INKEEP_API_KEY", // required
        primaryBrandColor: "#26D6FF", // required -- your brand color, the color scheme is derived from this
        organizationDisplayName: "Inkeep",
        // ...optional settings
      },
      aiChatSettings: {
        // ...optional settings
        aiAssistantAvatar: "https://mydomain.com/mylogo.svg",
        exampleQuestions: [
          "Example question 1?",
          "Example question 2?",
          "Example question 3?",
        ],
      },
    };
 
    // Initialize the UI components
    Inkeep.ModalSearchAndChat(settings); // Search Bar
    Inkeep.ChatButton(settings); // 'Ask AI' button
  }
);