Docusaurus adds every entry in the scripts option of docusaurus.config.js to every page. You add the widget there.

​
Before you start

  • A website widget with your site on its Allowed origins list. You need the widget id and public key from its snippet.

​
Add the widget

1

Open docusaurus.config.js

It is at the root of your project. In a TypeScript project it is docusaurus.config.ts.
2

Add the widget to scripts

Add this inside your config object. If scripts already exists, add the entry to it.
docusaurus.config.js
scripts: [
  {
    src: "https://widget.kelu.dev/kelu-widget.js",
    async: true,
    "data-widget-id": "YOUR_WIDGET_ID",
    "data-client-key": "kl_pk_...",
  },
],
Replace YOUR_WIDGET_ID and kl_pk_... with the values from your widget’s snippet.
3

Check locally, then deploy

Restart npm run start to see it locally, then build and deploy your site as usual.

​
Check it works

Open any page. A round Ask AI button appears in the bottom-right corner. Ask a question and check that the answer lists its Sources. Nothing there? See Troubleshooting.
If your site search opens with Cmd+K, turn off Open with Cmd/Ctrl+K on the widget’s Behaviour tab so only one opens. To follow the site’s dark mode, set Dark-mode selector to html[data-theme="dark"] on the Appearance tab.