live-chat für eine seite aus lovable, bolt oder v0

28. Oktober 2026 · von kuba · 6 min lesen

Du hast die Seite gebaut, indem du sie beschrieben hast, also füg den Chat genauso hinzu. Dieser Guide gibt dir einen Prompt für Lovable, Bolt oder v0, zeigt, wo das Snippet im generierten Code landen sollte, und wie du auf der veröffentlichten Seite prüfst, dass vor einem Klick nichts lädt.

was diese builder generieren

Im Chatfenster sehen die drei Tools gleich aus, aber sie schreiben verschiedene Arten von Projekten, und das entscheidet, wo ein Script-Tag hingehört:

Lovable generiert eine Vite- und React-App. Im Root des Projekts liegt eine index.html; das ist die Seite, in die jede Route gerendert wird.
Bolt generiert, was du dir gewünscht hast. Die meisten Projekte sind Vite-Apps mit einer index.html; manche sind Next.js, Astro oder reines HTML (für Letzteres gibt es den Guide für reines HTML).
v0 generiert Next.js mit dem App Router. Die gemeinsame Seite ist app/layout.tsx.

Der Chat braucht einen Tag auf jeder Seite. In einer Single-Page-App heißt das index.html. In Next.js heißt das Root-Layout. Sonst nirgends.

bevor du loslegst: die domain

Spookat bindet eine Site an ihre Domain. Der Chat verbindet sich nur von dieser Domain und ihren Subdomains, und das ist einer der Gründe, warum niemand dein Snippet auf seine eigene Seite kopieren kann.

Bei Buildern ist das wichtig, weil dein Projekt unter mehreren Adressen lebt:

die Vorschau im Builder, auf der eigenen Domain des Builders
die veröffentlichte Adresse, die dir der Builder gibt, meist eine Subdomain von ihm
deine eigene Domain, falls du eine verbunden hast

Registrier die Site unter der Adresse, die Besucher nutzen werden. Wenn das eine eigene Domain ist, nimm die; www und andere Subdomains sind inklusive. Wenn du auf der Subdomain des Builders veröffentlichst, registrier genau diese Subdomain, nicht die Hauptdomain des Builders. In der Vorschau des Builders erscheint der Launcher, aber der Chat verbindet sich nicht. Teste auf der veröffentlichten Seite.

der prompt

Zuerst brauchst du deinen Site-Key. Füg die Site im Spookat-Dashboard mit der richtigen Domain hinzu; die Install-Seite zeigt das Snippet. Dann füg das hier in den Chat des Builders ein, mit deinem Key anstelle von YOUR_SITE_KEY:

Add this live chat script to every page of the site. It must be exactly one tag, loaded once, right before the closing </body> tag of the shared HTML (index.html in a Vite app, the root layout in Next.js). Keep the async attribute. Do not wrap it in a React component, do not add it to individual pages, do not preload anything.

<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>

Der Prompt ist mit Absicht so genau. Builder wollen gern helfen, und aus „füg ein Chat-Widget hinzu“ kann eine neue React-Komponente werden, ein eigener schwebender Button oder der Tag in fünf Seiten kopiert. Ein Tag an einer Stelle ist alles, was Spookat braucht: Der Launcher zeichnet seinen eigenen Button.

der look, im selben prompt

Der Look des Widgets wird im Spookat-Dashboard eingestellt und steckt im Launcher, der Builder muss also nichts davon wissen. Wenn du ihn lieber im Code hältst, füg dem Prompt eine zweite Zeile hinzu:

Above that script, add: <script>window.Spookat = { style: "clean", accent: "#2F6FEB", side: "right" };</script>

Es gibt 8 Styles. accent ist deine Markenfarbe als Hex-Wert; die Textfarbe darauf wird nach Kontrast gewählt. Die Docs listen jeden Key.

wo er landen sollte

Öffne die Code-Ansicht und prüf nach. Bei einer Vite-App (Lovable, die meisten Bolt-Projekte) sollte index.html so enden:

    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
    <script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>
  </body>
</html>

Bei Next.js (v0, manche Bolt-Projekte) bekommt app/layout.tsx den Tag innerhalb von <body>, nach {children}:

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>
      </body>
    </html>
  );
}

Wenn der Builder stattdessen next/script verwendet hat, ist das auch in Ordnung, mit strategy="afterInteractive" oder "lazyOnload". Was du nicht sehen willst:

den Tag in einer Seitenkomponente wie Home.tsx oder app/page.tsx: Den Chat gäbe es dann nur auf dieser Seite
einen useEffect, der das Script-Element erzeugt: Das funktioniert, ist aber mehr Code für denselben Tag
einen Chat-Button oder ein Panel, das der Builder selbst gezeichnet hat: lösch es, Spookat bringt sein eigenes mit

Wenn etwas schiefging, sag es in einem Satz: “Remove the chat code you added and put only the script tag in index.html.” Builder beheben so etwas gut, wenn die Anweisung konkret ist.

veröffentlichen, dann prüfen

Veröffentliche die Seite und öffne die veröffentlichte Adresse in einem privaten Fenster. Öffne die DevTools:

Network, setz den Haken bei „Disable cache“, lade neu und tipp spookat ins Filterfeld. Du solltest einen Request sehen: den Launcher von cdn.spookat.com, rund 2 kb. Zwei, beide von cdn.spookat.com, wenn dein Code in window.Spookat einen anderen Style setzt als den, den du veröffentlicht hast. Nichts an api.spookat.com.
Application, Cookies und Local Storage: nichts von Spookat.
Klick auf den Launcher. Das Panel lädt vom CDN. Schreib eine Testnachricht. Mit verbundenem Slack oder Discord taucht sie dort auf; antworte und sieh zu, wie die Antwort im Widget ankommt.

Erscheint der Launcher gar nicht, hat es der Tag nicht in den veröffentlichten Build geschafft. Schau noch mal in die Code-Ansicht. Erscheint der Launcher, aber der Chat kann sich nicht verbinden, passt die Domain im Dashboard nicht zu der Adresse, auf der du bist.

Der Grundlagen-Guide erklärt jeden dieser Checks genauer.

verbinde die antworten

Der Chat sollte dich dort erreichen, wo du sowieso bist. Verbinde Slack oder Discord im Dashboard, wähl einen Channel, und jeder Besucher bekommt seinen eigenen Thread. Der Slack-Guide und der Discord-Guide erklären die Details.

warum nicht den builder einen chat bauen lassen

Du könntest ihn darum bitten. Der Builder baut dir in Minuten ein hübsches Panel mit einem Textfeld. Dann fangen die Fragen an: Wohin gehen die Nachrichten, wer wird benachrichtigt, wie erreicht die Antwort einen Besucher, der den Tab geschlossen hat, was passiert mit Spam, wer hält das Ganze am Laufen. Das sind ein Server, eine Datenbank, eine Slack-Integration und eine E-Mail-Pipeline, und nichts davon ist das Produkt, das du bauen wolltest.

Spookat ist ein Tag, kostet 4,99 € pro Monat und Site mit starter, und die Testphase dauert 14 Tage ohne Karte.

wenn du stattdessen claude code oder cursor nutzt

Exportier das Projekt in ein Repo und lass einen Coding-Agent es mit dem Spookat-MCP-Server erledigen. Er kann das Widget auch an die Farben deiner Seite anpassen und alles einrichten, ohne dass du Keys kopierst. Der Claude-Code-Guide zeigt, wie.

den look an eine generierte seite anpassen

Builder erzeugen meist einen erkennbaren Stil: eine saubere Sans-Serif, weiche Schatten, abgerundete Karten, eine Akzentfarbe. Das Widget sollte aussehen, als gehöre es dazu, nicht wie ein Aufkleber von einer anderen Seite.

Style. Für den typischen generierten Look fang mit clean oder soft an. Ist deine Seite dunkler und technischer, probier terminal. Hast du ihr einen kräftigen, flachen Look gegeben, brutal oder swiss. Du kannst im Dashboard wechseln und jeden in einer Live-Vorschau sehen, bevor du veröffentlichst.
Akzent. Nimm dasselbe Hex wie bei deinen Buttons. Der Builder hat es meist in seiner Tailwind-Config oder einer CSS-Variable; frag ihn “what is the primary color’s hex?”
Font. system lädt nichts und passt nah genug zu den meisten generierten Seiten. Wenn deine Seite einen bestimmten Font nutzt und wir ihn hosten, wähl ihn; er lädt erst nach dem Klick.
Seite. Hat der Builder unten rechts einen eigenen schwebenden Button platziert (einen Pfeil nach oben, ein Icon für Cookie-Einstellungen), setz den Launcher nach links.

was deine besucher sehen

Einen kleinen Button in der Ecke, in deinen Farben. Sonst passiert nichts, bis sie klicken. Dann öffnet sich das Panel mit deiner Begrüßung und dem Hinweis, dass ein Mensch antwortet. Sie tippen, und die Nachricht landet in deinem Slack- oder Discord-Thread oder in unserer Inbox und ihrer Handy-App. Gehen sie, bevor du antwortest, können sie eine E-Mail hinterlassen; mit pro folgt ihnen die Antwort dorthin. Das Widget spricht die Sprache ihres Browsers, eine von 12, außer du legst eine fest.

nachdem der builder neu generiert

Builder schreiben Dateien neu. Eine große Änderung am Layout („mach ein Dashboard daraus“, „wechsel zu Dark Mode“) kann den Tag still aus index.html oder dem Root-Layout werfen. Öffne nach einer großen Neugenerierung die veröffentlichte Seite und prüf, ob der Launcher noch da ist. Wenn nicht, bringt ihn derselbe Prompt zurück.

mehr als ein projekt

Mit Buildern ist eine zweite und dritte Seite schnell gestartet. In Spookat ist jede davon eine eigene Site, mit eigenem Key, eigener Domain, eigenem Look und eigenem Channel, ein Chat landet also nie im Thread des falschen Projekts. Die erste Site eines Kontos zahlt den vollen Preis; jede weitere Site im selben Konto, die du über Spookat zahlst, ist 30% günstiger, auf jedem Plan. Mehrere Sites können sich einen Slack- oder Discord-Channel teilen, wenn dieselben Leute alle beantworten, aber die Karte zeigt nur den Seitenpfad, nicht, von welcher Site ein Chat kam. Gib jeder Site ihren eigenen Channel, wenn du sie auseinanderhalten musst.

checkliste

Die Site ist unter der Adresse registriert, die Besucher nutzen.
Ein Tag, async, in index.html oder im Root-Layout.
Kein Chat-Button oder keine Komponente, die der Builder selbst gebaut hat.
Auf der veröffentlichten Seite getestet, nicht in der Vorschau.
Ein Request vor einem Klick (zwei, beide von cdn.spookat.com, wenn dein Code einen Style setzt, den du nicht veröffentlicht hast), keine Cookies.
Slack oder Discord verbunden.

Beschreib es, veröffentliche es, prüf es. Dann beantworte die erste Frage aus einem Thread.