Lovable-Integration
Live-Chat zu deiner Lovable-Website hinzufügen
Deine Lovable-Website ist online, und deine Besucher haben Fragen. Mit Hooky erscheint auf jeder Seite eine Chat-Bubble: Prompt in Lovable einfügen, veröffentlichen, und du antwortest vom Handy aus.
Warum ein Chat auf einer Lovable-Website
Mit Lovable kommst du an einem Abend von der Idee zur Website. Eine brandneue Website bringt aber auch Besucher mit Fragen: „Liefert ihr nach Leipzig?“, „Das Formular geht auf meinem Handy nicht“, „Habt ihr Samstag noch einen Termin frei?“. Ohne einfache Möglichkeit zu fragen, sind sie wieder weg.
Die Hooky-Bubble gibt ihnen diese Möglichkeit, ganz ohne Konto. Du bekommst eine Benachrichtigung und antwortest in der App. Und weil eine Lovable-Website eine React-App (Vite) ist, deckt ein einziges Tag in index.html alle Seiten ab.
Hooky in Lovable installieren
Erstelle dein Hooky-Konto (kostenlos für eine Website) und lege deine Website an: Name und Adresse, zum Beispiel
meine-seite.lovable.app.Kopiere den Installations-Prompt unter Websites: Der Schlüssel deiner Website steckt schon drin. Der Prompt unten ist derselbe, auf Lovable zugeschnitten, mit einem Beispielschlüssel.
Öffne dein Projekt in Lovable und füge den Prompt in den Projekt-Chat ein, im Modus Build (die Modi Chat und Plan besprechen oder planen nur, ohne den Code anzufassen).
Veröffentliche: Button Publish oben rechts im Editor, dann Publish changes, falls die Website schon online ist. Solange du nicht veröffentlichst, hat die Live-Version keine Bubble.
Der Prompt für Lovable
Füge die Hooky-Chat-Bubble zu dieser Website hinzu, auf allen Seiten. Setze dieses Tag ein einziges Mal in index.html im Projektstamm ein, direkt vor </body>:
<script src="https://heyhooky.com/widget.js" data-site-key="DEIN_OEFFENTLICHER_SCHLUESSEL" async></script>Lass es genau so in index.html: Verschiebe es nicht in eine React-Komponente und füge es nicht per useEffect ein. Ändere weder die Script-Adresse noch das Attribut data-site-key, und ändere sonst nichts.
Mit einem bezahlten Lovable-Plan kannst du selbst nachsehen: Tab Code, Datei index.html, die Zeile steht direkt vor </body>. Im Free-Plan ist der Code-Editor schreibgeschützt, ansehen kannst du ihn trotzdem.
Prüfen, ob die Bubble erscheint
Öffne deine veröffentlichte Adresse (meine-seite.lovable.app oder deine Domain) in einem neuen Tab und lade neu. Die Bubble erscheint unten, standardmäßig rechts. Schick dir eine erste Nachricht: Sie landet sofort unter Nachrichten.
Nichts zu sehen? Der Reihe nach:
- Hast du nach der Änderung auf Publish changes geklickt?
- Steht die Adresse, die du testest, in den erlaubten Adressen der Website in Hooky? (Sobald es eine gibt, bleibt die Bubble anderswo versteckt.)
- Ist das Tag unverändert, mit dem richtigen Schlüssel? (Lass dir die Zeile von Lovable zeigen.)
Deine Domain und die lovable.app-Adresse
Lovable veröffentlicht deine Website zuerst unter einer lovable.app-Adresse, danach verbindest du deine eigene Domain. Trag beide auf der Seite der Website in Hooky ein: Unterhaltungen und Statistiken bleiben an einem Ort, und die Bubble funktioniert auf beiden, ohne Neuinstallation. www. brauchst du nicht extra: deineseite.de deckt auch www.deineseite.de ab.
Deinen Besuchern antworten
Die Nachrichten all deiner Websites landen in einem einzigen Posteingang, in der App für iPhone, iPad, Mac und Android oder im Web-Dashboard. Eine Benachrichtigung sagt dir Bescheid. Besucher können dir Fotos oder ein PDF schicken (zum Beispiel einen Screenshot vom Fehler), und wenn jemand vor deiner Antwort geht und seine E-Mail hinterlassen hat, folgt ihm deine Antwort per E-Mail, mit einem Link zurück ins Gespräch.
Mehr gewünscht? Lass Lovable auch deine Anmeldungen oder Bestellungen mit Hooky.track zählen: Der Prompt wartet im Tab Statistiken, alles Weitere steht in der Doku.
Häufige Fragen
Erscheint die Bubble in der Vorschau des Lovable-Editors?
Die Editor-Vorschau läuft unter einer Entwicklungsadresse. Solange du in Hooky keine Adresse einträgst, erscheint die Bubble überall; sobald du welche einträgst, nur dort. Am einfachsten: auf der veröffentlichten Adresse testen.
Lovable hat das Tag nicht in index.html gesetzt
Kommt vor: Eine KI „räumt“ Code gern in eine Komponente. Sag einfach: „Setz das Hooky-Tag unverändert zurück in index.html, direkt vor </body>, und entferne es aus der Komponente.“ Dann neu veröffentlichen.
Brauche ich einen bezahlten Lovable-Plan?
Für Hooky nicht: Der Prompt läuft über den Projekt-Chat. Du musst die Website nur veröffentlichen können. Eine eigene Domain hängt dagegen von deinem Lovable-Plan ab.
Ich habe mehrere Lovable-Websites
Leg in Hooky für jede eine Website an: Jeder Prompt hat seinen eigenen Schlüssel. Der Plan Kostenlos deckt eine Website ab, Creator zehn und Studio fünfzig, und alle landen im selben Posteingang.
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.