AI live chat for Next.js, App Router or Pages Router
Add the widget once in your root layout with next/script. It's a plain script, not a React component, so it stays out of the way of Server Components and client-side navigation.
Card required · Cancel before day 15 and pay nothing
Last reviewed 2026-10-23
Replyze on Next.js / React
4 steps · Developer setup
- 1Open app/layout.tsx (App Router) or pages/_app.tsx (Pages Router).
- 2Add the two scripts with next/script, as in the example on this page: an inline config script with an id, then the widget script.
- 3Replace wgt_YOUR_TOKEN_HERE with your widget token.
- 4Deploy, then open your live site and check that the chat button appears.
<script>
window.ReplyzeConfig = {
token: 'wgt_YOUR_TOKEN_HERE',
apiUrl: 'https://client.replyze.chat'
};
</script>
<script src="https://cdn.replyze.chat/widget.js" async></script>Why Replyze for Next.js / React
The script loads asynchronously, so it doesn't block your page.
Works with the App Router (app/layout.tsx) and the Pages Router (pages/_app.tsx).
Not a React component: no provider, no props, no state. It renders in its own shadow DOM container, so your CSS and the widget's don't collide.
Loaded once in the root layout, it stays on screen through client-side route changes.
Works in other React setups too (Vite, Remix, Astro): add the snippet to the HTML template or root layout.
Install
Add Replyze to Next.js / React
Add the config script and the widget script to your root layout with next/script, then deploy.
- 1
Open app/layout.tsx (App Router) or pages/_app.tsx (Pages Router).
- 2
Add the two scripts with next/script, as in the example on this page: an inline config script with an id, then the widget script.
- 3
Replace wgt_YOUR_TOKEN_HERE with your widget token.
- 4
Deploy, then open your live site and check that the chat button appears.
Snippet to paste
<script>
window.ReplyzeConfig = {
token: 'wgt_YOUR_TOKEN_HERE',
apiUrl: 'https://client.replyze.chat'
};
</script>
<script src="https://cdn.replyze.chat/widget.js" async></script> Replace wgt_YOUR_TOKEN_HERE with your widget token, or copy the snippet with your token already in it from Settings → Chat Widget → Install in your Replyze dashboard.
In practice
How Replyze fits into Next.js / React
The Replyze widget is a plain script, not a React component: it reads window.ReplyzeConfig, then adds the chat in its own shadow DOM container at the end of the page. There's no provider to wrap and no server-side setup.
In JSX you can't paste the HTML snippet as it is, because the braces in the config would be read as JSX. Use next/script instead: one inline script with an id for the config, then the widget script, as in the example below. In the App Router, put both in app/layout.tsx; in the Pages Router, put them in pages/_app.tsx so they load on every page.
Leave the strategy on afterInteractive, the default: Next.js loads the scripts early, after some of the page has hydrated, which suits a chat button. lazyOnload waits for browser idle time, and beforeInteractive is for scripts that must load before any page hydration, which a chat widget doesn't need.
The widget runs entirely in the browser, so React Server Components, streaming and middleware don't affect it.
import Script from 'next/script'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Script id="replyze-config" strategy="afterInteractive">
{`window.ReplyzeConfig = { token: 'wgt_YOUR_TOKEN_HERE', apiUrl: 'https://client.replyze.chat' };`}
</Script>
<Script src="https://cdn.replyze.chat/widget.js" strategy="afterInteractive" />
</body>
</html>
)
}What visitors on Next.js / React get
AI first, your team when it matters
Answers from your own help articles
The AI replies in the visitor's language from the articles you publish and the answers your team teaches it. If the answer isn't there, it says so instead of guessing.
A person when it matters
Visitors can ask for a person at any time, and topics your industry setup marks for the team, such as refunds and complaints, are handed over too. The teammate replies in the same chat, with the whole conversation in front of them.
Chat, email and messaging in one inbox
Web chat on every plan. Email, WhatsApp and Telegram on Pro and Business, with Messenger and Instagram in beta, all in one shared inbox.
FAQ
Next.js / React + Replyze, answered
Yes. The widget runs entirely in the browser and isn't a React component, so Server Components render as usual and the widget starts on its own once its script loads.
The widget script loads asynchronously, so it doesn't block your page, and with strategy="afterInteractive" Next.js adds it after the page starts hydrating. Like any third-party script it still has to download and run, so compare your own pages before and after.
You can, but you usually don't want to. In the root layout it loads once and stays through client-side route changes. Inside a component it would only load where that component renders.
Unaffected. The widget is a client-side script. Middleware runs on the server before the response is sent; the widget loads after the browser receives the page.
Yes: anywhere you can ship a script tag. Paste the snippet into index.html in a Vite app or src/app.html in SvelteKit. In Astro, paste it into your layout and add is:inline to the first script so Astro leaves it as written. In JSX-based setups such as Remix, add the config as an inline script and the widget as a script tag in your root component.
Other platforms
Let AI answer the questions you get every day
Teach it your answers, pick your colours and add it to your site. When a customer needs a person, your team takes over.
Card required · Cancel before day 15 and pay nothing. No card? Start on the Free plan.