The Chat Widget Built for
Next.js Developers
Add live chat to your Next.js app without npm packages, build configs, or Lighthouse penalties. One script tag. Done.
Why Next.js Developers Choose This Widget
Zero Build Impact
No npm packages. No webpack config. No build-time overhead. Just a script tag that loads asynchronously.
Lighthouse-friendly
3 KB gzipped, async loading, no layout shift. Your Core Web Vitals stay green.
Privacy-First
No cookies. No tracking. GDPR compliant by default. Perfect for privacy-conscious Next.js apps.
Installation
Add to your layout.tsx or _app.tsx. That's it.
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
<Script
src="https://cdn.thechatwidget.com/widget.js"
data-site-id="YOUR_SITE_ID"
strategy="lazyOnload"
/>
</body>
</html>
)
}import Script from 'next/script'
export default function App({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
<Script
src="https://cdn.thechatwidget.com/widget.js"
data-site-id="YOUR_SITE_ID"
strategy="lazyOnload"
/>
</>
)
}Using strategy="lazyOnload" ensures zero impact on initial page load.
How It Compares
Most chat widgets hurt your Next.js app's performance. This one doesn't.
| Feature | The Chat Widget | Intercom | Crisp |
|---|---|---|---|
| Bundle Size | 3 KB | ~100 KB | ~180 KB |
| npm Package Required | No | Optional | Optional |
| Lighthouse Impact | None | -5 to -15 pts | -10 to -20 pts |
| Cookies | None | Yes | Yes |
| Starting Price | Free | $39/mo | $25/mo |
Frequently Asked Questions
Does it work with Next.js App Router?
Yes. The widget loads via a script tag using Next.js's built-in Script component, so it works seamlessly with both App Router and Pages Router.
Will it affect my Lighthouse score?
No. At 3 KB with strategy="lazyOnload", the widget loads after the page is interactive. Zero impact on LCP, FID, or CLS.
Do I need to install an npm package?
No. There's no package to install, no dependencies to manage, and no build configuration. Just add the Script tag and you're done.
Does it work with Vercel?
Yes. The widget is served from a global CDN with edge caching, so it loads fast on Vercel deployments worldwide.
Can I customize the widget's appearance?
Yes. You can customize the position, colors, and welcome message through your dashboard. No code changes required.
Ready to add chat to your Next.js app?
Free plan available. No credit card required. Setup takes 60 seconds.