Add the widget with the next/script component in your root layout, so it loads on every page. next/script passes data-* props through to the tag.

​
Before you start

  • Your website widget. Kelu makes one for you when you create a knowledge base. Its Install tab shows these steps with your widget id and key already in the code.
  • Your app on the widget’s Sites it works on list (Install tab).

​
Add the widget

1

Open app/layout.tsx

This is the root layout that wraps every page (app/layout.jsx works the same way).
2

Add the Script component

app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://widget.kelu.dev/kelu-widget.js"
          strategy="afterInteractive"
          data-widget-id="YOUR_WIDGET_ID"
          data-client-key="kl_pk_..."
        />
      </body>
    </html>
  );
}
Replace YOUR_WIDGET_ID and kl_pk_... with the values from your widget’s snippet.
3

Check locally, then deploy

Run npm run dev to see it locally, then deploy your app as usual.
Using the Pages Router? Put the same <Script> after <Component {...pageProps} /> in pages/_app.tsx, with both inside a fragment (<>…</>).

​
Check it works

Open any page. A round icon button appears in the bottom-right corner, with the tooltip Ask AI. Ask a question and check that the answer lists its Sources. Nothing there? See Troubleshooting.