Auf Ihrer Website installieren

Sobald Ihr Agent indexiert ist, ist das Hinzufügen zu Ihrer Website ein einziger Script-Tag. Finden Sie Ihr Snippet unter Widget → Skript.

Das Einbettungs-Snippet

Fügen Sie dies direkt vor dem schließenden </body>-Tag auf jeder Seite ein, auf der das Chat-Widget erscheinen soll:

<script
  src="https://botchata.net/api/widget.js"
  data-api-key="YOUR_KEY"
  data-api-url="https://botchata.net/api"
  defer
></script>

Das Widget lädt asynchron (defer) und verlangsamt Ihre Seite nicht. Es wird in einem Shadow DOM gerendert, kann also nicht mit dem CSS Ihrer Website kollidieren.

Plattformspezifische Anleitungen

Plattform	Wohin einfügen
WordPress	Appearance → Theme File Editor → `footer.php`, vor `</body>` (oder ein „Header & Footer Scripts"-Plugin)
Shopify	Online Store → Themes → Edit code → `theme.liquid`, vor `</body>`
Wix	Settings → Custom Code → Add Custom Code → „Body - end"
Squarespace	Settings → Advanced → Code Injection → Footer
Webflow	Project Settings → Custom Code → Footer Code
Tilda	Website-Einstellungen → Mehr → HTML-Code für `<body>`
Eigenes HTML	Direkt vor `</body>` in Ihrer Vorlage

Fügen Sie das Skript auf jeder Seite ein (meist in den gemeinsamen Footer/die Vorlage), nicht nur auf der Startseite, damit das Widget überall verfügbar ist.

Prüfen, ob es live ist

Laden Sie Ihre Website neu — die Chat-Blase sollte unten rechts erscheinen.

Nicht zu sehen? Sehen Sie sich den Seitenquelltext an (Strg+U) und bestätigen Sie, dass der Script-Tag vorhanden ist und data-api-key nicht leer ist. Prüfen Sie die Browser-Konsole auf Fehler und stellen Sie sicher, dass das Skript nicht von einem Content-Blocker blockiert wird.

Besucheridentität übergeben (optional)

Wenn Ihre Website bereits weiß, wer der Besucher ist (er ist angemeldet), übergeben Sie dessen Name und E-Mail, damit der Bot ihn beim Namen begrüßt und Lead- und Buchungsformulare vorausfüllt:

<script
  src="https://botchata.net/api/widget.js"
  data-api-key="YOUR_KEY"
  data-api-url="https://botchata.net/api"
  data-user-name="Max Mustermann"
  data-user-email="max@example.com"
  defer
></script>

Rendern Sie diese Attribute serverseitig aus Ihrem Auth-System. Die Werte werden der KI als Kontext eines identifizierten Besuchers übergeben.

Sitzungspersistenz

Das Widget merkt sich das Gespräch jedes Besuchers für 48 Stunden (pro Browser). Bei Rückkehr oder Wechsel auf eine andere Seite werden das vorherige Gespräch und der Nachrichtenverlauf automatisch wiederhergestellt.

Sitzungen werden im localStorage des Browsers gespeichert, je API-Schlüssel getrennt — wenn Sie also mehr als einen Bot auf derselben Seite betreiben, vermischen sich deren Gespräche nie. Der Besucher kann jederzeit über die Schaltfläche „Neue Konversation" im Widget-Header neu beginnen.

Mehrere Bots auf einer Seite

Sie können mehr als ein Widget-Skript auf derselben Seite platzieren (z. B. einen Vertriebs- und einen Support-Bot), jeweils mit eigenem data-api-key. Sie laufen unabhängig und führen getrennte Gespräche.

Löschen Sie den Script-Tag aus Ihrer Vorlage. Das Widget verschwindet beim nächsten Seitenaufruf — es gibt sonst nichts aufzuräumen.