Install on your site

Add a chat widget to Next.js

Use next/script so the loader is added once, after the page is interactive.

Next.js has a first-class way to load third-party scripts: next/script. It loads Kelma once, after hydration, without blocking your page.

App Router (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://kelma.chat/embed.js"
          data-kelma="YOUR_AGENT_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Pages Router (pages/_app.tsx)

import Script from "next/script"

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script src="https://kelma.chat/embed.js" data-kelma="YOUR_AGENT_ID" strategy="afterInteractive" />
    </>
  )
}

Putting it in the root layout / _app adds the widget to every route once. strategy="afterInteractive" keeps it off the critical path so your Core Web Vitals are unaffected.

Previous← Add a chat widget to a React app NextIntegrations & tools →