Install FoxChat on Next.js

Works with App Router and Pages Router.

1Add Script component

import Script from 'next/script'; <Script id="foxchat-config" strategy="afterInteractive"> {`window.foxchatConfig={siteId:'YOUR_SITE_ID'};`} </Script> <Script src="https://getfoxchat.com/widget.js" data-site-id="YOUR_SITE_ID" strategy="afterInteractive" />

Replace YOUR_SITE_ID with your ID from the FoxChat dashboard.

2App Router: layout.tsx

Place before closing </body> in app/layout.tsx.

3Pages Router: _app.tsx

Place after <Component /> in pages/_app.tsx.

4Deploy

Deploy. Zero bundle impact.

Troubleshooting

Widget not showing?

Use strategy="afterInteractive". Check console for errors.

Widget covering something?

Change position from your FoxChat dashboard.

Want to remove?

Remove the Script components.