v0-Integration
Live-Chat zu deiner v0-Website hinzufügen
v0 erzeugt deine Website in Next.js und veröffentlicht sie auf Vercel. Für einen Chat reicht ein Prompt: v0 setzt das Hooky-Tag ins Root-Layout, du veröffentlichst, und die Nachrichten deiner Besucher landen auf deinem Handy.
Warum ein Chat auf einer v0-Website
Mit v0 sieht die Oberfläche schon im ersten Entwurf gut aus: Produktseite, Portfolio, Buchungs-App. Was oft fehlt, ist der direkte Kontakt. Ein Formular heißt warten; eine Chat-Bubble heißt Antwort, solange der Besucher noch da ist. Hooky kommt dazu, ohne deine Komponenten oder Daten anzufassen.
Hooky in v0 installieren
Erstelle dein Hooky-Konto (kostenlos für eine Website) und lege deine Website an, mit ihrer
vercel.app-Adresse oder deiner Domain.Kopiere den Prompt unter Websites: Der Schlüssel deiner Website ist schon drin. Die Version unten ist für ein Next.js-Projekt (App Router) gedacht, wie bei v0 üblich.
Füge ihn in den v0-Chat deines Projekts ein. v0 ändert
app/layout.tsx: Du kannst den Code vor dem Veröffentlichen prüfen.Veröffentliche: Publish im Chat-Header. Beim ersten Mal führt dich v0 durch die Schritte (Sichtbarkeit, Domain); danach öffnest du Publish und wählst Publish Changes.
Der Prompt für v0
Füge die Hooky-Chat-Bubble zu dieser Website hinzu, auf allen Seiten. Importiere in app/layout.tsx Script aus next/script und füge es ein einziges Mal direkt vor dem schließenden <body>-Tag ein, mit strategy="afterInteractive":
<script src="https://heyhooky.com/widget.js" data-site-key="DEIN_OEFFENTLICHER_SCHLUESSEL" async></script>Übernimm Script-Adresse und Attribut data-site-key exakt. Füge keinen weiteren Code hinzu und ändere sonst nichts: Die Bubble erscheint von selbst, unten auf dem Bildschirm.
Wenn du es lieber selbst machst, sieht das Ergebnis in app/layout.tsx so aus:
import Script from "next/script";
// … im <body> des Root-Layouts, nach {children}:
<Script src="https://heyhooky.com/widget.js" data-site-key="DEIN_OEFFENTLICHER_SCHLUESSEL" strategy="afterInteractive" />Prüfen, ob die Bubble erscheint
Öffne die Produktionsadresse (die v0 nach dem Veröffentlichen anzeigt) und lade neu: Die Bubble ist unten. Eine Testnachricht landet sofort unter Nachrichten.
Keine Bubble? Prüfe, ob das Deployment fertig ist, ob das Tag im Root-Layout steht (nicht auf einer einzelnen Seite) und ob die geöffnete Adresse in den erlaubten Adressen der Website steht, falls du welche eingetragen hast.
vercel.app, Vorschauen und deine Domain
Jedes veröffentlichte Projekt hat eine feste vercel.app-Adresse, zu der du deine Domain hinzufügen kannst (Publish › Customize Domain in v0). Trag beide in Hooky ein: Unterhaltungen und Statistiken bleiben zusammen.
Vorschau-Deployments von Vercel haben jeweils eine eigene Adresse, die sich jedes Mal ändert. Die musst du nicht alle eintragen: Teste die Bubble auf deiner Produktionsadresse. Solange in Hooky keine Adresse eingetragen ist, erscheint die Bubble überall, Vorschauen inklusive.
Deinen Besuchern antworten
Eine Benachrichtigung kommt aufs Handy; du antwortest in der Hooky-App (iPhone, iPad, Mac, Android) oder im Web-Dashboard. Dein Besucher kann einen Screenshot oder ein PDF anhängen, und wenn er nach Angabe seiner E-Mail geht, folgt ihm deine Antwort per E-Mail.
Deine Website hat ein Backend? Schick deine Events (Anmeldung, bezahlte Bestellung) auch vom Server mit dem geheimen Schlüssel der Website, oder poste deine Hinweise im Kanal der Website im Format der Slack-Webhooks. Alles in der Doku.
Häufige Fragen
Warum die Script-Komponente und kein <script>-Tag?
In Next.js ist next/script der saubere Weg, Skripte von Drittanbietern zu laden; mit afterInteractive lädt die Bubble, sobald die Seite benutzbar ist, ohne sie auszubremsen.
Erscheint die Bubble in der v0-Vorschau?
Die Vorschau läuft in einer Sandbox unter einer temporären Adresse. Dort erscheint die Bubble nur, wenn du in Hooky keine Adresse eingetragen hast. Teste lieber auf der veröffentlichten Adresse.
Mein v0-Projekt ist mit GitHub verbunden
Nichts Besonderes: Die Änderung an app/layout.tsx landet in deinem Branch, und Publish merged und deployt sie wie den Rest deines Codes.
Funktioniert das auch für eine Next.js-Website außerhalb von v0?
Ja, es ist genau dasselbe Tag an derselben Stelle. Sieh dir auch die Cursor-Seite an, wenn du in einem Editor programmierst.
Weitere Tools
Deine Besucher haben Fragen. Antworte, wo immer du bist.
Kostenlos für eine Website, mit einem Prompt installiert. Danach reicht das Handy in der Tasche.