Next.js

Install the Clarm widget in a Next.js App Router or Pages Router project using the canonical loader and your saved widgetId.

App Router

Add the snippet once in your root layout. Store the widget ID in an environment variable so each environment can point at the correct saved widget.

app/layout.tsxtypescript

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          id="clarm-widget"
          src="https://app.clarm.com/widget/loader.js"
          data-widget-id={process.env.NEXT_PUBLIC_CLARM_WIDGET_ID}
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Pages Router

pages/_app.tsxtypescript

import Script from 'next/script'

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        id="clarm-widget"
        src="https://app.clarm.com/widget/loader.js"
        data-widget-id={process.env.NEXT_PUBLIC_CLARM_WIDGET_ID}
        strategy="afterInteractive"
      />
    </>
  )
}

Environment variables

.env.localbash

NEXT_PUBLIC_CLARM_WIDGET_ID=your_saved_widget_id

Use the exact widget ID shown in Dashboard → Widget → Deploy. To change branding or copy later, update the widget in the dashboard rather than editing this code again.