How to add an AI chatbot to a Next.js site
In Next.js, add the chatbot with the built-in `next/script` component in your root layout, using the `lazyOnload` strategy. That keeps it off the critical path and out of hydration, which a raw script tag in JSX will not reliably do.
Where it goes
app/layout.tsx (App Router) or pages/_app.tsx (Pages Router)
Availability: Any Next.js version with `next/script` (11+).
Adding the chatbot to Next.js
- 1
Import Script from 'next/script' in your root layout.
- 2
Render it inside the body, after {children}.
- 3
Set src to your RubyRep script URL and add the data-rubyrep attribute with your public key.
- 4
Use strategy="lazyOnload" so it loads after the page is interactive.
- 5
Deploy and open the live site to confirm the launcher appears.
The snippet you paste
<script src="https://rubyrep.com/rubyrep.js" data-rubyrep="rr_your_public_key" defer></script>Your own key replaces rr_your_public_key — you get it after training RubyRep on your site.
Worth knowing on Next.js
Use next/script rather than a raw <script> tag in JSX — React will not execute an inline script tag the way you expect during hydration.
In the App Router, put it in app/layout.tsx so it applies to every route.
`lazyOnload` is the right strategy here: the widget is not needed for first paint.
If you have a strict Content-Security-Policy, allow the script origin and the frame origin it loads.
Next.js questions
- App Router or Pages Router?
- Both work. App Router goes in app/layout.tsx, Pages Router in pages/_app.tsx. The component and attributes are identical.
- Does it break static export?
- No. The widget is a client-side script that talks to RubyRep's API, so a fully static Next.js export works fine.
- What about Content-Security-Policy?
- Add the RubyRep origin to `script-src` and `frame-src`. The chat panel renders in an iframe, so `frame-src` matters as much as `script-src`.
Related
tool
Website support score
Scores a website on how well it could support customers — and how well an AI representative trained on it would perform. Five dimensions, a total out of 100, and the specific gaps behind the score.
industry
AI customer support for SaaS companies
SaaS support is dominated by questions your documentation already answers: what a plan includes, whether a feature exists, how an integration works. RubyRep reads your docs, pricing and changelog and answers those on the site, so trial users get unblocked in seconds instead of waiting on a ticket.
industry
AI customer support for agencies
Agencies field two kinds of question: what do you do, and what does it cost. Both are answerable from the site, and both currently interrupt someone senior. RubyRep answers them from your services and case study pages, and doubles as something you can deploy on client sites.
Get your snippet.
Enter your Next.js site and RubyRep reads it, builds your representative, and hands you the exact line to paste.
Using something else? See all platforms.