Install FoxChat on Next.js

Use the built-in next/script component — works with App Router and Pages Router.

FoxChat adds an AI chat bubble named the FoxChat AI Operator (you name it yourself) to your Next.js app. Your AI operator reads your published pages and answers visitor questions automatically. The cleanest way to load it in Next.js is the framework's own next/script component with strategy="afterInteractive", so the bubble loads after your page is interactive and never blocks rendering. Add it once in your root layout and it appears on every route.

1Add the Script component (App Router)

In app/layout.tsx, import next/script and render it inside the <body>, just before the closing tag:

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

Replace YOUR_SITE_ID with the ID from your FoxChat dashboard.

2Pages Router alternative

On the Pages Router, add the same <Script> tag inside the returned markup of pages/_app.tsx, after the <Component {...pageProps} /> line. The import and props are identical.

3Plain tag fallback

If you would rather not use next/script, you can drop a plain <script src="https://getfoxchat.com/widget.js" data-site="YOUR_SITE_ID" defer></script> just before </body> in a custom pages/_document.tsx. Both approaches load your AI operator site-wide.

4Run and deploy

Start your dev server to confirm the bubble appears, then deploy. Your AI operator loads with zero impact on your page bundle.

Troubleshooting

Widget not showing?

Make sure the strategy is afterInteractive and the Script sits inside <body>. Open the browser console and check for blocked requests, and confirm the site ID is correct.

Widget covering content?

Move the bubble to the opposite corner from your FoxChat dashboard — no code change needed.

Want to remove FoxChat?

Delete the <Script> element (or the plain script tag) from your layout and redeploy.

Ready to add your AI operator to your app?

Start free

Compare plans on the pricing page.