SiteWhisper
← All integrations

SiteWhisper on Next.js

Drop-in component using next/script, rendered once from your layout.

About 5 minutes.

  1. 1

    Copy this component into your project, for example components/SiteWhisperScript.tsx.

    components/SiteWhisperScript.tsx
    'use client'

import Script from 'next/script'

type SiteWhisperScriptProps = {
  apiKey: string
  /** e.g. https://sitewhisper.online — omit to use the default host */
  scriptHost?: string
  /** ISO 639-1; omit for browser auto-detect */
  lang?: string
  strategy?: 'afterInteractive' | 'lazyOnload' | 'beforeInteractive'
}

/** Loads the SiteWhisper widget once. Render from your root layout. */
export function SiteWhisperScript({
  apiKey,
  scriptHost = 'https://sitewhisper.online',
  lang,
  strategy = 'lazyOnload',
}: SiteWhisperScriptProps) {
  if (!apiKey) return null

  const src = `${scriptHost.replace(/\/$/, '')}/widget.js`

  return (
    <Script
      id="sitewhisper-widget"
      src={src}
      strategy={strategy}
      data-key={apiKey}
      {...(lang ? { 'data-lang': lang } : {})}
    />
  )
}
  2. 2

    Render it once from your root layout, after your page children.

    app/layout.tsx
    import { SiteWhisperScript } from '@/components/SiteWhisperScript'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <SiteWhisperScript apiKey={process.env.NEXT_PUBLIC_SITEWHISPER_KEY!} />
      </body>
    </html>
  )
}
  3. 3

    Set the key in your environment file.

    .env.local
    NEXT_PUBLIC_SITEWHISPER_KEY=sw_your_key_here

Good to know

  • Pass lang explicitly when your app already knows the page language from an i18n route — it is more reliable than navigator.language.
  • The key is public by design: it identifies the site, and allowed origins are what actually restrict use.

Need your API key? It is in the dashboard under each site's embed block. Widget attributes, crawling, and the HTTP API are covered in the documentation.