Guides / v0
How to Add an AI Chatbot to a v0 (Next.js) Site
To add an AI chatbot to a v0 site, load the Chatonbo script with the next/script component in app/layout.tsx, then deploy. Because the root layout wraps every route, the chat appears on the whole site.
v0 is Vercel's AI builder that generates Next.js apps and deploys them to Vercel. v0 generates Next.js App Router projects. There is no index.html; the shared shell is app/layout.tsx, and third-party scripts belong in next/script.
1. Ask v0 to add it
No code editing needed.
- Copy your bot ID from the Install page of your Chatonbo bot.
- Paste the request below into the v0 chat with your bot ID filled in.
- Deploy the new version to Vercel.
Paste this into the v0 chat
In app/layout.tsx, import Script from "next/script" and add this inside <body>, keeping everything else unchanged:
<Script src="https://chatonbo.com/widget/chatonbo-widget.js" data-bot-id="YOUR_BOT_ID" strategy="afterInteractive" />2. Edit app/layout.tsx
If you have the code locally or in GitHub.
- Open app/layout.tsx.
- Import Script from next/script and add the element below inside <body>.
- Commit and deploy.
app/layout.tsx
import Script from "next/script";
// inside <body>, after {children}:
<Script
src="https://chatonbo.com/widget/chatonbo-widget.js"
data-bot-id="YOUR_BOT_ID"
strategy="afterInteractive"
/>Check that it works
- Open the production URL in a private window and look for the chat bubble.
- Ask something only your site answers.
- The Chatonbo Install page shows the bot as live once it has loaded on your domain.
Rather have us do it?
Installation is free on every plan. Invite [email protected] as a collaborator on your v0 project and reply "invited" to any Chatonbo email, or use the install request on your dashboard. We never ask for passwords.
Frequently asked questions
Does next/script pass the data-bot-id attribute?
Yes. next/script forwards data attributes to the script element, and the Chatonbo widget finds its bot ID from that attribute. afterInteractive loads it after the page is usable, so it does not slow the first render.
Does the chatbot keep working when visitors move between pages?
Yes. Sites from these builders are single-page apps: the page shell loads once and pages change without a full reload. The Chatonbo script sits in that shell, so the chat stays open with the same conversation while visitors browse.
Can Chatonbo read a site that is built with JavaScript?
Yes. When a page renders its content with JavaScript, the Chatonbo crawler renders it in a headless browser before reading it, so the assistant learns the same text and products a visitor sees. You can also add PDFs, FAQs or plain text on the bot's Knowledge page.
Do I need to know how to code?
No. You paste one line, either into the builder's chat as a request or into a settings field. If you would rather not touch it, Chatonbo installs it for free: invite [email protected] as a collaborator and reply "invited". We never ask for passwords.
How much does it cost?
Chatonbo has a free plan with 100 conversations a month. Pro is $19 a month for 5,000 conversations and Business is $59 a month for 10,000, with no per-seat or per-resolution fees. Paid plans start with a 30-day free trial.