​
What is Fumadocs

Fumadocs is an open source documentation framework, powered by Next.js App Router.

​
Get an API key

  1. Go to the Inkeep Dashboard
  2. Select your project under Projects
  3. Go to the Integrations tab
  4. Click on Create integration
  5. Select Web
  6. Provide a Name and URL (optional) for the integration
  7. Click on Create
  8. Click the Example < /> button to get your API key and view suggested settings

​
Initialize the widget

Create an inkeep-script.tsx client component in your Fumadocs project.

inkeep-script.tsx
"use client";

declare global {
  interface Window {
    Inkeep: any;
  }
}

import Script from "next/script";

export function InkeepScript() {
  return (
    <Script
      id="inkeep-script"
      src="https://unpkg.com/@inkeep/uikit-js@0.3.14/dist/embed.js"
      type="module"
      strategy="afterInteractive"
      onReady={() => {
        window.Inkeep().embed({
          componentType: "ChatButton",
          colorModeSync: {
            observedElement: document.documentElement,
            isDarkModeCallback: (el) => {
              return el.classList.contains("dark");
            },
            colorModeAttribute: "class",
          },
          properties: {
            chatButtonType: "PILL",
            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
            },
            modalSettings: {
              // optional settings
            },
            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?",
              ],
            },
          },
        });
      }}
    />
  );
}

Then import it in the <body /> of your root layout.tsx file.

layout.tsx
import { InkeepScript } from "@/app/inkeep-script";
import { SearchBar } from "@/app/SearchBar";
import { RootProvider } from "fumadocs-ui/provider";
import "fumadocs-ui/style.css";
import { Inter } from "next/font/google";
import Script from "next/script";
import type { ReactNode } from "react";

const inter = Inter({
  subsets: ["latin"],
});

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" className={inter.className} suppressHydrationWarning>
      <body
        style={{
          display: "flex",
          flexDirection: "column",
          minHeight: "100vh",
        }}
      >
        <InkeepScript />
        <RootProvider>{children}</RootProvider>
      </body>
    </html>
  );
}

For a full list of customizations, check out the Chat Button documentation.

Chat Button & Search BarChat Button