Add GetFoxChat to your Next.js site

Watch it first

▶ Watch how

The line to add

Yours has your own site ID in place of YOUR_SITE_ID.

On Next.js, this is what goes in app/layout.tsx:

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
      <Script
        src="https://getfoxchat.com/widget.js"
        data-site-id="YOUR_SITE_ID"
        strategy="afterInteractive"
      />
    </html>
  )
}

How do you add GetFoxChat to Next.js, step by step?

1. In GetFoxChat, open the install step for your site and copy your snippet. It already has your site ID in it. No account yet? Create one free.
2. Open your root layout, app/layout.tsx or app/layout.js. source
3. Add import Script from 'next/script' at the top of the file. source
4. Inside the returned html element, add <Script src="https://getfoxchat.com/widget.js" data-site-id="YOUR_SITE_ID" strategy="afterInteractive" /> and replace YOUR_SITE_ID with your GetFoxChat site ID. source
5. Save, then build and redeploy the app so the change reaches your live site. source
6. Back in GetFoxChat, press Check my site. The chat switches on once GetFoxChat finds the snippet on your live pages.

Next.js's own guide: Next.js docs: How to load and optimize scripts. Checked 2026-09-30; if Next.js renames a menu, its guide has the current wording.

Next.js gotchas

• Put the Script in the root layout, not in a nested layout. A nested layout only loads it for that folder route and the routes under it. source
• Next.js loads a layout script only once, even while visitors move between pages that share the layout. source
• afterInteractive is the default strategy: the script loads early, but after some hydration has happened. source
• Event handlers such as onLoad only work in a Client Component, so leave them off if your root layout is a Server Component. source

How do you remove it later?

Delete the Script element (and the next/script import if nothing else uses it) from app/layout, then rebuild and redeploy.

Checked against the Next.js App Router docs (version 16.3 at check time). For the Pages Router the file differs; this guide covers the App Router only.