Live chat for Next.js — one Script tag, zero packages
No SDK, no npm install, no API routes. chatrelay is a hosted widget you load with next/script once in your root layout; visitor messages relay to your own Telegram bot and your replies stream back over a live subscription. Works with the App Router, the Pages Router, SSR, SSG and ISR.
Install chatrelay on Next.js
- Create your free chatrelay account
Sign up (free plan, no credit card) and copy your embed snippet from the dashboard — it comes pre-filled with your real project id. The snippet below shows the shape;
your-projectis replaced by your id. - App Router — add Script to app/layout.tsx
Put the tag in your root layout so it loads once for the whole app.
strategy="afterInteractive"keeps it off the critical path.// app/layout.tsx import Script from "next/script"; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="en"> <body> {children} <Script src="https://www.chatwithdev.com/widget.js" strategy="afterInteractive" data-chatrelay-project="your-project" data-chatrelay-convex="https://impressive-quail-820.convex.cloud" data-chatrelay-title="Chat with us" /> </body> </html> ); }
- Pages Router — add it to pages/_app.tsx instead
On the Pages Router the same
Scriptcomponent goes in_app.tsx:// pages/_app.tsx import Script from "next/script"; import type { AppProps } from "next/app"; export default function App({ Component, pageProps }: AppProps) { return ( <> <Component {...pageProps} /> <Script src="https://www.chatwithdev.com/widget.js" strategy="afterInteractive" data-chatrelay-project="your-project" data-chatrelay-convex="https://impressive-quail-820.convex.cloud" data-chatrelay-title="Chat with us" /> </> ); }
- Run your app
The bubble appears on every route, client-side navigations included — the widget mounts once and persists across
next/linktransitions. Identify signed-in users withwindow.__cr?.identify({ name, email })after your auth resolves (see the React guide for a sample).
index.html there.How replies reach your visitors
Every message relays to a Telegram bot you own — created at @BotFather in a minute and connected once in the chatrelay setup. In group mode each visitor gets their own topic; in direct mode chats arrive in your DM with the bot. Your reply appears in the visitor's chat bubble live, and the web dashboard (with AI drafting) is always there as a second screen. How the Telegram relay works →
FAQ
App Router or Pages Router — does it matter?
Both work. In the App Router the Script tag goes in app/layout.tsx; in the Pages Router it goes in pages/_app.tsx. Either way it loads once for the whole app.
Does it work with SSR, SSG and ISR?
Yes. The widget is purely client-side and attaches after hydration, so it is independent of how the page HTML was rendered.
Do I need an npm package or environment variables?
No. There is nothing to install and nothing secret in the tag — the project id is a public identifier, like a Google Analytics id.
Will it cause hydration errors?
No. next/script with afterInteractive runs outside React's hydration pass, and the widget renders into its own Shadow DOM container appended to <body>, not into your React tree.
Where do replies come from?
You answer from your own Telegram bot or the chatrelay dashboard; the visitor sees the reply appear in the widget in real time over a live subscription.