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

Der Prompt für Lovable, Bolt oder v0, wo das Chat-Snippet im generierten Code hingehört und wie du das Ergebnis auf deiner veröffentlichten Seite prüfst.

2026-10-28 · Kuba

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](/de/blog/live-chat-plain-html-site/)).
- **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`:

```text
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:

```text
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](/de/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:

```html
    <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}`:

```tsx
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:

1. **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`.
2. **Application**, Cookies und Local Storage: nichts von Spookat.
3. **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](/de/blog/add-live-chat-to-your-website/) 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](/de/blog/answer-website-chat-from-slack/) und der [Discord-Guide](/de/blog/answer-website-chat-from-discord/) 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](/de/blog/claude-code-live-chat/) 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.

---
source: https://spookat.com/de/blog/live-chat-lovable-bolt-v0/