Live chat for Next.js

One <Script> tag in your root layout. No npm package, no React component to wire up, no build step. Works in both App Router and Pages Router.

Get started See features

Modern Next.js apps live or die on bundle size and Core Web Vitals. The last thing you want is a chat widget that ships 300KB of vendor JavaScript and triggers a Lighthouse warning. SimplyChat is under 30KB gzipped, loads via next/script with strategy='afterInteractive', and has near-zero LCP/CLS impact.

Install in 2 minutes

Add a <Script> to your root layout (App Router) or _app.tsx (Pages Router)

// app/layout.tsx (App Router) or pages/_app.tsx (Pages Router)
import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://simplychat.io/widget.js"
          data-site="YOUR_SITE_ID"
          data-supabase-url="..."
          data-supabase-anon="..."
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}
  1. 1Sign up at simplychat.io and copy your site's <script> attributes.
  2. 2Add a next/script tag to your root layout (App Router) or _app.tsx (Pages Router).
  3. 3Set strategy="afterInteractive" so the widget loads after hydration.
  4. 4Deploy. The widget appears on every page within seconds.
  5. 5Optional: in any client component where the user is signed in, call window.simplychat?.('identify', { name: user.name, email: user.email }) to surface the real user in your dashboard.

Why SimplyChat for Next.js

No bundle-size cost

Because SimplyChat is loaded via next/script (not an npm import), it doesn't enter your client bundle at all. Your route bundles stay clean, your Lighthouse scores stay clean.

Works with App Router or Pages Router

Same script, same install. Server components and client components both work — the widget runs entirely on the visitor's browser.

Identify logged-in users with one line

Inside your auth provider or layout, after the user signs in, call window.simplychat?.('identify', { name, email }). The dashboard switches from anonymous 'Visitor #12846' to the real user instantly.

Hosted on Vercel, edge-delivered

The widget is served from a global CDN with must-revalidate caching so updates roll out the moment we deploy them. No version-pinning, no SDK upgrade migrations.

Common use cases

SaaS in-app chat

Replace heavyweight Intercom Messenger with a 30KB widget that doesn't fight your Next.js bundle size.

Marketing site lead capture

Proactive triggers on /pricing or /signup catch hesitating signups.

Customer support for technical products

Co-browse lets you see exactly what the user is seeing — invaluable for debugging UI issues on the support side.

Frequently asked questions

Does SimplyChat have a React component?+

Not as an npm package, by design. The widget is a plain script tag so it stays out of your bundle entirely. If you ever need React-specific control, you can call into the global window.simplychat() API.

Does it work with React Server Components?+

Yes. The widget runs on the client, but it doesn't need any React integration — it's just a script tag. Server components render normally, the widget mounts on the client after hydration.

Can I lazy-load it conditionally?+

Yes. Use strategy="lazyOnload" instead of "afterInteractive", or render the <Script> conditionally based on route/page logic. Many teams skip it on /docs or /login pages.

Add live chat to your next.js site in 2 minutes

$29.99/month flat. Unlimited sites, unlimited agents. No credit card to start.

Get started