Add Chat Button to Docusaurus
Copy page
Integrate Inkeep's chat button into your Docusaurus documentation for real-time user assistance.
What is Docusaurus
Docusaurus is an open-source documentation platform powered by MDX and React.
Get an API key
Follow these steps to create an API key for your web assistant.
Install the Inkeep plugin
Define the widget
Add the chat button as a plugin in your docusaurus.config.js
file:
Configuration settings
You have two configuration options:
- Configure the widget in the plugin
options
. Use this option if you are loading your apiKey from an environment variable, see here for more information. - Configure the widget in standalone
config
. Use this option if you are using any callback functions (liketransformSource
,onEvent
, orgetTools
) in your config.
These options can also be used together and the settings will be merged automatically.
Configure the widget in the plugin options
Docusaurus plugins can accept a tuple of [pluginName, options]
.
In this case, the plugin name is @inkeep/cxkit-docusaurus
.
Note that if you are using any callback functions (like transformSource
, onEvent
, or getTools
) in your config, you will need to use the standalone config to pass those settings.
So use like this:
You will need to replace REPLACE_WITH_YOUR_INKEEP_API_KEY
with your actual
Inkeep API key in the code below.
Configure the widget in standalone config
In this case, the plugin name is @inkeep/cxkit-docusaurus/chatButton
.
What this means is that you create a config file in your project. By default, you can create an inkeep.config.js
or inkeep.config.ts
file in the root of your project, and Inkeep will automatically pick it up.
You can customize the path to the config file in the plugin options:
We also export a fully typed defineConfig
function that you can use to create your config:
For a full list of customizations, check out the Common Settings.
FAQ
We support docusaurus versions 2.0.1
and above.
Our plugin swizzles the SearchBar
component. If you have a plugin that
also swizzles the SearchBar
component, you need to ensure that plugin comes after our plugin in your docusaurus.config.js
file.
This way, your custom SearchBar
will override our default one.
To add custom styles to the Inkeep widget in your Docusaurus site, first create a CSS file in your static
directory (e.g. static/inkeep-overrides.css
). Then specify the URL of the stylesheet in the styles
array within the theme
object (inside of baseSettings
).
For example, if you created a file at static/inkeep-overrides.css
, you should set the styles
array to:
For additional details on how Docusaurus manages static assets, please refer to the official documentation.
If you need more control or customizations, you can use the React components directly. To do so, follow the react guides: chat button, search bar, embedded chat, custom modal trigger.
A few things to keep in mind:
- If using Docusaurus 3.4.0 you will need to load the Inkeep widget component dynamically and wrap it in a
<BrowserOnly>
tag. For example:
- If using the ChatButton component, you can create a
Footer.js
in thethemes
directory then import the original Footer component and add the Chat Button so that it will be present on each page. For example: