Bedienen · A6 · 5 Stufen

Chatbot in eine Webseite einbetten

Den Chatbot eines Agenten als schwebenden Button auf einer beliebigen Webseite einbinden — Snippet erzeugen, einbauen, Parameter und Farben verstehen.

Was du in diesem Tutorial tust

Du bettest den Chatbot als Overlay-Widget in eine fremde Webseite ein: ein schwebender Button öffnet das Chatfenster mit denselben Funktionen wie der Public-Chatbot.

Voraussetzung: ein Agent mit aktiviertem externem Chatbot-Zugriff (A5) und Admin-Recht zum Kopieren des Snippets. Abgrenzung zu A5: dort ist der Chatbot eine eigene Seite — hier ein eingebettetes Overlay.

Quellen und Stand

Geprüft gegen das AuxData-Administrator-Handbuch (Stand Juni 2026), eingebettetes Tutorial 20 „Chatbot in eine Webseite einbetten", ergänzend Externer-Zugriff (AH 3.8/14.2). Access Token sind Platzhalter.

Stufe 1 von 5

Was ist das Widget

Ein Button, ein Overlay.

1Schwebender Button → Chat-Overlay

Das Widget ist ein schwebender Button auf deiner Webseite. Ein Klick öffnet das Chatfenster als Overlay — mit denselben Funktionen wie der Public-Chatbot. (AH Tutorial 20)

Typische Einsätze: Support-Seiten, Produktseiten, interne Portale, FAQ-/Wissensseiten.

Webseite
Widget-Button
Chat-Overlay
AuxData-Agent
Dasselbe Chatbot-Erlebnis, nur eingebettet · Demo
✎ Frage: Wann nutzt du eine eigene Chatbot-Seite (A5), wann das eingebettete Widget?

✓ Das hast du jetzt verstanden

Stufe 2 von 5

Voraussetzungen & Token-Schutz

Bevor du einbettest.

1Was erfüllt sein muss

  1. Für den Agenten ist der externe Chatbot-Zugang aktiviert.
  2. Der Agent wurde gespeichert, sodass ein Access Token erzeugt wurde.
  3. Die Person, die das Snippet kopiert, hat das passende Admin-Recht.
  4. Die Zielwebseite kann HTML-/Script-Code aufnehmen.
Token-Regel: Das data-accesstoken ist eine UUID für den externen Zugriff. Es gehört nicht in Screenshots, Doku mit echten Kundendaten, öffentliche Repositories oder Chatverläufe. In Beispielen immer Platzhalter: IHR-ACCESS-TOKEN oder <UUID>.
Zielgruppe: Ein Website-Betreiber kann das Snippet einbauen — aber das Erzeugen/Kopieren des Tokens ist eine Admin-Aufgabe. „Ich kann die Webseite bearbeiten" allein reicht nicht.
✎ Frage: Warum reicht „Ich kann die Webseite bearbeiten" allein nicht aus?

✓ Das hast du jetzt verstanden

Stufe 3 von 5

Snippet erzeugen

Karte „Zugang" im Agenten.

1Werte einstellen

Als Administrator anmelden → gewünschten Agenten öffnen → Karte „Zugang". (AH Tutorial 20, Schritt 1)

Agent · Karte „Zugang"
Widget-Position
unten rechts / unten links
Breite / Höhe
Größe des Chatfensters in Pixeln
Datei-Upload erlauben
optional
Eigene Farben verwenden
optional (sonst Agent-/Standarddesign)
Aktion
Embed-Snippet kopieren

Klick auf „Embed-Snippet kopieren" — das fertige Snippet liegt in der Zwischenablage.

✎ Frage: Was passiert, wenn der Agent noch nicht gespeichert wurde?

✓ Das hast du jetzt erledigt

Stufe 4 von 5

Snippet einbinden & Parameter

Vor dem schließenden </body>.

1Das Snippet

Füge das kopierte Snippet vor dem schließenden </body>-Tag deiner Webseite ein. (AH Tutorial 20, Schritt 2)

<script src="https://IHRE-PLATTFORM/js/embed/widget.js"
        data-agentid="1"
        data-accesstoken="IHR-ACCESS-TOKEN"
        data-position="bottom-right"
        data-width="400"
        data-height="600"
        async></script>

2Parameter

data-agentid Pflicht
ID des Agenten.
data-accesstoken Pflicht
Access Token (UUID) des Agenten.
data-position
Standard bottom-right, auch bottom-left.
data-width
Standard 400, Minimum 320.
data-height
Standard 600, Minimum 400.
data-fileupload
true aktiviert den Datei-Upload.
Farben: Mit „Eigene Farben verwenden" schreibt der Generator zusätzliche data-*-Attribute als Hex-Farben — je Bereich Hintergrund und Text: data-header-bg/-fg, data-window-bg, data-bot-bg/-fg, data-user-bg/-fg, data-input-bg/-fg und data-send-bg/-fg. Nicht gesetzte Farben behalten das Standarddesign; ohne eigene Farben übernimmt das Widget das Farbschema des Agenten.
✎ Frage: Welche zwei Parameter dürfen in keinem Embed-Snippet fehlen?

✓ Das hast du jetzt erledigt

Stufe 5 von 5

Testen, HTTPS & Mobilverhalten

Und typische Fehlerbilder.

1Hinweise aus dem Handbuch

Mindestgröße
Werte unter 320 px Breite / 400 px Höhe werden automatisch auf das Minimum angehoben.
Mobilgeräte
unter 480 px Breite öffnet das Chatfenster im Vollbild; die konfigurierte Größe wird ignoriert.
Schließen
oben rechts ein Schließen-Button; erneuter Klick auf den runden Button schließt ebenfalls.
Isolierung
das Widget rendert in einem abgeschotteten Bereich (Shadow DOM) und beeinflusst das übrige Webseitendesign nicht.
HTTPS verwenden: In der src immer die https://-Adresse der Plattform nutzen. Bei http:// kann das Widget wegen CORS-pflichtigem Import nicht erscheinen.

2Fehlerbilder

Button erscheint nicht
src prüfen, HTTPS verwenden, Browser-Konsole öffnen.
401 / keine Antwort
Access Token oder externen Chatbot-Zugriff prüfen.
Widget zu klein
Mindestmaße beachten (320 / 400).
Upload fehlt
data-fileupload und Agent-/Instanzrechte prüfen.

Chatbot eingebettet

Der Chatbot läuft als Widget auf deiner Webseite. Damit ist Track A um den Website-Einsatz erweitert. Für die Lernbestätigung gibt es den Track-A-Kompetenzcheck.

✎ Frage: Der Button erscheint nicht und die Konsole zeigt einen CORS-Fehler. Was ist die wahrscheinlichste Ursache?

🚀 Vor dem Livegang

✓ Das hast du jetzt erledigt

Kurz-Quiz

Sitzt das Einbetten?

6 Fragen aus den Stufen 1–5. Kein Zertifikat — zur Selbstkontrolle. Beliebig oft wiederholbar.

Frage 1 von 6
Lade Frage…