Integrazione con v0
Aggiungere una live chat al tuo sito v0
v0 genera il tuo sito in Next.js e lo pubblica su Vercel. Per aggiungere una chat basta un prompt: v0 mette il tag di Hooky nel layout radice, pubblichi, e i messaggi dei visitatori arrivano sul tuo telefono.
Perché una chat su un sito v0
Con v0 l’interfaccia è curata fin dalla prima bozza: pagina prodotto, portfolio, app di prenotazione. Quello che spesso manca è il contatto diretto. Un modulo è un’attesa; una bolla di chat è una risposta mentre il visitatore è ancora lì. Hooky si aggiunge senza toccare i tuoi componenti né i tuoi dati.
Installare Hooky in v0
Crea il tuo account Hooky (gratis per un sito) e aggiungi il sito, con il suo indirizzo
vercel.appo il tuo dominio.Copia il prompt in Siti: la chiave del sito è già dentro. La versione qui sotto è pensata per un progetto Next.js (App Router), come quelli di v0.
Incollalo nella chat v0 del progetto. v0 modifica
app/layout.tsx: puoi controllare il codice prima di pubblicare.Pubblica: Publish nell’intestazione della chat. La prima volta v0 ti guida (visibilità, dominio); poi apri Publish e scegli Publish Changes.
Il prompt per v0
Aggiungi la bolla di chat di Hooky a questo sito, su tutte le pagine. In app/layout.tsx, importa Script da next/script e aggiungilo una sola volta, subito prima della chiusura di <body>, con strategy="afterInteractive":
<script src="https://heyhooky.com/widget.js" data-site-key="LA_TUA_CHIAVE_PUBBLICA" async></script>Mantieni esattamente l’indirizzo dello script e l’attributo data-site-key. Non aggiungere altro codice e non cambiare nient’altro: la bolla compare da sola, in basso nello schermo.
Se preferisci farlo tu, ecco il risultato atteso in app/layout.tsx:
import Script from "next/script";
// … nel <body> del layout radice, dopo {children}:
<Script src="https://heyhooky.com/widget.js" data-site-key="LA_TUA_CHIAVE_PUBBLICA" strategy="afterInteractive" />Verificare che la bolla compaia
Apri l’indirizzo di produzione (quello che v0 mostra dopo la pubblicazione) e ricarica: la bolla è in basso. Un messaggio di prova arriva subito in Messaggi.
Niente bolla? Controlla che la pubblicazione sia terminata, che il tag sia nel layout radice (non in una sola pagina) e che l’indirizzo aperto sia tra gli indirizzi autorizzati del sito, se ne hai dichiarati.
vercel.app, anteprime e il tuo dominio
Ogni progetto pubblicato ha un indirizzo stabile vercel.app, a cui puoi aggiungere il tuo dominio (Publish › Customize Domain in v0). Dichiarali entrambi in Hooky: conversazioni e statistiche restano insieme.
I deploy di anteprima di Vercel hanno ciascuno un indirizzo unico, che cambia ogni volta. Non serve dichiararli tutti: prova la bolla sull’indirizzo di produzione. Finché in Hooky non c’è nessun indirizzo dichiarato, la bolla compare ovunque, anteprime comprese.
Rispondere ai tuoi visitatori
Ti arriva una notifica sul telefono; rispondi dall’app Hooky (iPhone, iPad, Mac, Android) o dalla dashboard web. Il visitatore può allegare uno screenshot o un PDF, e se se ne va dopo aver lasciato l’email, la tua risposta lo segue via email.
Il tuo sito ha un backend? Invia anche i tuoi eventi (iscrizione, ordine pagato) dal server con la chiave segreta del sito, o pubblica i tuoi avvisi nel canale del sito nel formato dei webhook di Slack. È tutto nella documentazione.
Domande frequenti
Perché il componente Script e non un tag <script>?
In Next.js, next/script è il modo pulito di caricare script di terze parti; con afterInteractive, la bolla si carica appena la pagina è utilizzabile, senza rallentarla.
La bolla compare nell’anteprima di v0?
L’anteprima gira in un ambiente isolato, su un indirizzo temporaneo. La bolla compare lì solo se non hai dichiarato nessun indirizzo in Hooky. Meglio provare sull’indirizzo pubblicato.
Il mio progetto v0 è collegato a GitHub
Niente di speciale: la modifica di app/layout.tsx va nel tuo branch, e Publish la unisce e la pubblica, come il resto del codice.
Funziona anche per un sito Next.js fuori da v0?
Sì, è esattamente lo stesso tag, nello stesso posto. Guarda anche la pagina di Cursor se programmi in un editor.
Gli altri strumenti
I tuoi visitatori hanno domande. Rispondi da dove sei.
Gratis per un sito, installato con un prompt. Poi ti basta tenere il telefono in tasca.