v0 integration
Add live chat to your v0 site
v0 generates your site in Next.js and publishes it on Vercel. Adding chat takes one prompt: v0 puts the Hooky tag in the root layout, you publish, and your visitors’ messages reach your phone.
Why add chat to a v0 site
With v0, the interface looks polished from the first draft: a product page, a portfolio, a booking app. What’s often missing is direct contact. A form means waiting; a chat bubble means an answer while the visitor is still there. Hooky drops in without touching your components or your data.
Install Hooky in v0
Create your Hooky account (free for one site) and add your site, with its
vercel.appaddress or your domain.Copy the prompt from Sites: your site’s key is already in it. The version below is written for a Next.js (App Router) project, like v0’s.
Paste it into your project’s v0 chat. v0 edits
app/layout.tsx: you can check the code before publishing.Publish: Publish in the chat header. The first time, v0 walks you through it (visibility, domain); after that, open Publish and choose Publish Changes.
The prompt for v0
Add the Hooky chat bubble to this site, on every page. In app/layout.tsx, import Script from next/script and add it once, right before the closing <body> tag, with strategy="afterInteractive":
<script src="https://heyhooky.com/widget.js" data-site-key="SITE_PUBLIC_KEY" async></script>
Keep the script URL and the data-site-key attribute exactly as they are. Don’t add any other code and don’t change anything else: the bubble shows up on its own, at the bottom of the screen.
If you’d rather do it yourself, here is the expected result in app/layout.tsx:
import Script from "next/script";
// … inside the root layout’s <body>, after {children}:
<Script src="https://heyhooky.com/widget.js" data-site-key="SITE_PUBLIC_KEY" strategy="afterInteractive" />
Check that the bubble shows up
Open the production address (the one v0 shows after publishing) and reload: the bubble is at the bottom of the screen. A test message lands in Messages right away.
No bubble? Check that the deployment has finished, that the tag is in the root layout (not on a single page), and that the address you opened is in the site’s allowed addresses, if you declared any.
vercel.app, previews and your domain
Every published project has a stable vercel.app address, to which you can add your domain (Publish › Customize Domain in v0). Add both in Hooky: conversations and stats stay together.
Vercel preview deployments each get a unique address that changes every time. No need to declare them all: test the bubble on your production address. As long as no address is declared in Hooky, the bubble shows everywhere, previews included.
Reply to your visitors
A notification hits your phone; you reply from the Hooky app (iPhone, iPad, Mac, Android) or the web dashboard. Your visitor can attach a screenshot or a PDF, and if they leave after giving their email, your reply follows them by email.
Your site has a backend? Send your events (signup, paid order) from the server with the site’s secret key too, or post your alerts to the site’s channel in Slack webhook format. It’s all in the docs.
Frequently asked questions
Why the Script component rather than a <script> tag?
In Next.js, next/script is the clean way to load third-party scripts; with afterInteractive, the bubble loads right after the page becomes usable, without slowing it down.
Does the bubble show in v0’s preview?
The preview runs in a sandbox, on a temporary address. The bubble only shows there if you haven’t declared any address in Hooky. Test on the published address instead.
My v0 project is connected to GitHub
Nothing special: the change to app/layout.tsx goes into your branch, and Publish merges it and deploys, like the rest of your code.
Does it work for a Next.js site outside v0?
Yes, it’s exactly the same tag, in the same place. See the Cursor page too if you code in an editor.
Other tools
Your visitors have questions. Answer them from wherever you are.
Free for one site, installed with one prompt. Then just keep your phone in your pocket.