Next.js

Install the Clarm widget in a Next.js App Router or Pages Router project.

Using the npm SDK (recommended)

Installbash

npm install @clarm/widget

App Router

Add the Clarm initializer to your root layout. Since it accesses the DOM, it must run on the client:

app/providers.tsxtypescript

'use client'

import { useEffect } from 'react'
import { initClarm } from '@clarm/widget'

export function ClarmProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    initClarm({
      apiKey: process.env.NEXT_PUBLIC_CLARM_API_KEY!,
      agentId: process.env.NEXT_PUBLIC_CLARM_AGENT_ID!,
      theme: 'auto',
    })
  }, [])

  return <>{children}</>
}

app/layout.tsxtypescript

import { ClarmProvider } from './providers'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ClarmProvider>{children}</ClarmProvider>
      </body>
    </html>
  )
}

Pages Router

pages/_app.tsxtypescript

import { useEffect } from 'react'
import { initClarm } from '@clarm/widget'

export default function App({ Component, pageProps }) {
  useEffect(() => {
    initClarm({
      apiKey: process.env.NEXT_PUBLIC_CLARM_API_KEY!,
      agentId: process.env.NEXT_PUBLIC_CLARM_AGENT_ID!,
    })
  }, [])

  return <Component {...pageProps} />
}

Using the script tag

Alternatively, add the script tag via Next.js Script component:

app/layout.tsxtypescript

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          id="clarm-config"
          strategy="beforeInteractive"
          dangerouslySetInnerHTML={{
            __html: `window.__CLARM_CONFIG__ = {
              apiKey: '${process.env.NEXT_PUBLIC_CLARM_API_KEY}',
              agentId: '${process.env.NEXT_PUBLIC_CLARM_AGENT_ID}'
            }`
          }}
        />
        <Script
          src="https://cdn.clarm.com/widget/clarm-widget.min.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Environment variables

.env.localbash

NEXT_PUBLIC_CLARM_API_KEY=clarm_pk_your_key_here
NEXT_PUBLIC_CLARM_AGENT_ID=your_agent_id_here