GuidesNext.js

Adding Suko to Next.js

App Router (recommended)

1. Install

npm install @suko/chat

2. Add the chat widget to your root layout

// app/layout.tsx
import { SukoChat } from '@suko/chat'
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        {children}
        <SukoChat
          apiKey={process.env.NEXT_PUBLIC_SUKO_API_KEY!}
        />
      </body>
    </html>
  )
}

3. Add your API key

# .env.local
NEXT_PUBLIC_SUKO_API_KEY=sk_live_your_key

That’s all you need. Your chat widget is live.

Manage your restaurant — menu, appearance, sessions, reservations — at dashboard.getsuko.com.

Pages Router

Add <SukoChat /> to pages/_app.tsx:

// pages/_app.tsx
import type { AppProps } from 'next/app'
import { SukoChat } from '@suko/chat'
 
export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <SukoChat apiKey={process.env.NEXT_PUBLIC_SUKO_API_KEY!} />
    </>
  )
}
ReservationsOther Frameworks