GhostChat built for
Next.js developers
Add live chat to your Next.js app without npm packages or build configs. One script tag. Done.
Why Next.js developers choose GhostChat
Zero build impact
No npm packages. No webpack config. No build-time overhead. Just a script tag that loads asynchronously.
Lighthouse-friendly
18.9 KB in total, loads after your page, no layout shift.
Privacy-first
No cookies. No tracking. GDPR-friendly 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://api.ghostchat.dev/widget.js"
data-site="YOUR_SITE_ID"
strategy="lazyOnload"
/>
</body>
</html>
)
}import Script from 'next/script'
export default function App({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
<Script
src="https://api.ghostchat.dev/widget.js"
data-site="YOUR_SITE_ID"
strategy="lazyOnload"
/>
</>
)
}Using strategy="lazyOnload" keeps the widget out of the initial page load.
How it compares
Most chat widgets hurt your Next.js app's performance. Ours doesn't.
| Feature | GhostChat | Tawk.to | Crisp |
|---|---|---|---|
| Downloaded when the chat opens | 18.9 KB | 462 KB | 267 KB |
| npm Package Required | No | Optional | Optional |
| Cookies | None | Yes | Yes |
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?
Very little. At 18.9 KB with strategy="lazyOnload", the widget loads after the page is interactive, so it does not delay LCP and adds no layout shift.
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.
Also available for
Now with a built-in AI chatbot. GhostChat can auto-answer your visitors’ questions 24/7 from your FAQ knowledge base — and hand off to you when it doesn't know. See the AI chatbot →
Related: Developer docs · Lightweight Widget · Lighthouse Benchmark
Add live chat in 30 seconds.
One script tag. No configuration. No credit card required.