What is Docusaurus

Docusaurus is an open-source documentation platform powered by MDX and React.

For Docusaurus you can add the Inkeep Search widget using the @inkeep/docusaurus npm package.

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

Install the Inkeep plugin

npm install @inkeep/docusaurus

Define the widget

Аdd the search bar as a theme in your docusaurus.config.js file:

docusaurus.config.js
themes: ["@inkeep/docusaurus/searchBar"],

If you are already using Algolia DocSearch provided by Docusaurus by default, it will be replaced by our widget.

Сonfiguration settings

Next, add the below to the themeConfig property:

docusaurus.config.js
  //..
  themeConfig: {
    inkeepConfig: {
      // stylesheetUrls: ['/path/to/stylesheets'], // optional
      baseSettings: {
        apiKey: "INKEEP_API_KEY", // required
        integrationId: "INKEEP_INTEGRATION_ID", // required
        organizationId: "INKEEP_ORGANIZATION_ID", // required
        primaryBrandColor: "#26D6FF", // required -- your brand color, the widget color scheme is derived from this
        organizationDisplayName: "Inkeep",
        // ...optional settings
        theme: {
          syntaxHighlighter: {
            lightTheme: lightCodeTheme, // optional -- pass in the Prism theme you're using
            darkTheme: darkCodeTheme, // optional -- pass in the Prism theme you're using
          },
        }
      },
      modalSettings: {
        // optional settings
      },
      searchSettings: {
        // optional settings
      },
      aiChatSettings: {
        // optional settings
        botAvatarSrcUrl: "/img/logo.svg", // optional -- use your own bot avatar
        quickQuestions: [
          "Example question 1?",
          "Example question 2?",
          "Example question 3?",
        ],
      },
    },
  },

For a full list of customizations, check out the Common Settings.

If you have already created a custom SearchBar component (for example via swizzle eject) this will need to be removed in order to use our Search Bar.