Installation
Next.js
Identical to React, except the component needs 'use client'. Or load the snippet with next/script.
Identical to React, with one requirement: the component runs in the browser, so the file must carry the 'use client' directive. Place it in your root layout so it appears site-wide.
Install the package
Install or upgrade the package exactly as described in the React guide.
Add the component
JSX
app/layout.jsx
'use client';
import { MenniChatBot } from "@menni/chatbot/react";
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<MenniChatBot id="YOUR_WIDGET_ID" />
</body>
</html>
);
}Alternative: loading the snippet with next/script
If you would rather not add the package at all, Next.js can load the snippet directly. This behaves identically and keeps your dependencies unchanged.
JSX
components/Assistant.jsx
"use client";
import Script from "next/script";
export default function Assistant() {
return (
<Script
src="https://chatbot.menni.ai/loader.js"
strategy="afterInteractive"
data-id="YOUR_WIDGET_ID"
data-position="bottom-right"
/>
);
}