nextjs

Next.js

Install @ownichat/next and add one server component.

Install in Next.js

Recommended — the official package

npm install @ownichat/next

// app/layout.tsx
import { OwniChat } from '@ownichat/next';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <OwniChat projectKey={process.env.NEXT_PUBLIC_OWNI_PROJECT_KEY!} />
      </body>
    </html>
  );
}

<OwniChat> is a server component, so it adds no client JavaScript of its own. Set <html lang> — the widget uses it to pick its language.

Pages Router: render the same component from pages/_app.tsx.

Client hooks live in @ownichat/next/client, and @ownichat/next/server provides a ready-made webhook route handler and an API client for syncing a product catalog.

Manual alternative

import Script from 'next/script';

<Script
  src="https://app.owni.chat/widget/embed.js"
  strategy="afterInteractive"
  data-project-key="YOUR_PROJECT_KEY"
/>

Ready to install?

Create a free account, open your project Installation page, and paste the embed code.

Start free