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.

✎ Bevor du startest — dein Übungsplatz: Die Übungen in diesem Tutorial gehören nicht an echte Vorgänge. Frag deine Administratorin oder deinen Administrator nach einem Übungsagenten: ein Agent, in dem du Chats, Dateien und Einstellungen gefahrlos ausprobieren darfst und in dem nichts kaputtgeht. In den Lehrvideos dieser Akademie ist das der Agent „Akademie-Demo“. Überall, wo unten dein Übungsagent steht, ist dieser Agent gemeint.
Kapitel 11: Den Chatbot einbetten
Erklärvideo nach dem AuxData-Handbuch (Stand September 2026), mit fiktiven Beispieldaten. Die Sprechstimme ist KI-generiert. Untertitel lassen sich im Player zuschalten, den gesprochenen Text findest du darunter als Transkript.
Transkript des Videos

Ein AuxData-Agent kann über einen Chatbot auf einer eigenen Website erreichbar sein. Dieses Kapitel erklärt, wie Sie die Einbindung vorbereiten und später prüfen. Die Tafeln beruhen auf Anhang F des lokalen Administratorhandbuchs. Sie zeigen keine laufende Einbindung und keine durchgeführte Freischaltung.

Am Ende können Sie den Auftrag an die zuständigen Personen präzise beschreiben und typische Fehler voneinander unterscheiden. Für die Vorbereitung arbeiten zwei Zuständigkeiten zusammen: die Administration des AuxData-Agenten und die Betreuung der Website. Laut Handbuch erzeugt ein Administrator den Einbindungscode in der Karte Zugang des gewünschten Agenten. Wer lediglich mit dem Chat arbeitet, braucht diesen Schritt nicht selbst auszuführen. Klären Sie vorab, welcher Agent auf welcher Seite erscheinen soll und welche Inhalte für die Besucher bestimmt sind.

Das Handbuch nennt zwei Voraussetzungen: Der externe Chatbot-Zugang ist aktiviert, und der Agent wurde gespeichert. Erst dadurch steht der benötigte Zugangscode zur Verfügung. Diese Angaben sind Voraussetzungen für die spätere Einrichtung, keine Bestätigung, dass sie in unserem Demokonto bereits erfüllt sind. Für eine öffentliche Seite prüfen die Verantwortlichen vorher auch, welches Wissen der ausgewählte Agent nach außen nutzen darf.

Die Einbindung verbindet die Website mit genau dem ausgewählten Agenten. Zum Code gehören die Adresse der Plattform, die Kennung des Agenten und dessen Zugangscode. Verwenden Sie das von AuxData erzeugte Einbindungsschnipsel. Tauschen Sie die Kennung oder den Zugangscode nicht beiläufig zwischen Agenten aus.

In Übungsunterlagen verwenden wir erkennbare Platzhalter. Eine funktionierende Konfiguration wird erst am vorgesehenen und freigegebenen Ziel geprüft. Im Generator lassen sich die Position des runden Buttons sowie Breite und Höhe des geöffneten Chatfensters festlegen. Das Handbuch nennt standardmäßig unten rechts, vierhundert Pixel Breite und sechshundert Pixel Höhe. Die Mindestwerte sind dreihundertzwanzig und vierhundert Pixel. Auf schmalen Bildschirmen unter vierhundertachtzig Pixeln öffnet sich der Chat laut Anleitung im Vollbild. Deshalb gehört ein Test am Mobilgerät zur Abnahme.

Die Website-Betreuung fügt den erzeugten Code laut Anleitung vor dem schließenden Body-Tag ein. Je nach Redaktionssystem geschieht das an einer dafür vorgesehenen Stelle für Skripte. Entscheidend ist, dass der Code auf der gewünschten Seite tatsächlich ausgeliefert wird. Ob das der Fall ist, prüfen wir später an der veröffentlichten oder freigegebenen Testfassung. Eine Änderung nur im Entwurf beweist noch keine funktionierende Einbindung.

Eine konkrete Fehlerquelle beschreibt das AuxData-Handbuch bei der Skriptadresse: Dort soll die Plattform mit HTTPS eingetragen sein. Eine unverschlüsselte Adresse kann eine Weiterleitung auslösen, die den nachgeladenen Bestandteil des Widgets blockiert.

Gemeint ist hier die Adresse im Einbindungscode. Daraus folgt nicht, dass jede CORS-Meldung dieselbe Ursache hat. Für die Diagnose zählen die genaue Fehlermeldung und die betroffene Anfrage. Für die spätere Abnahme prüfen Sie einen vollständigen Ablauf: Erscheint der Button auf der richtigen Seite? Lässt sich der Chat öffnen und schließen? Ist das Eingabefeld auf einem Mobilgerät erreichbar? Stellen Sie anschließend eine fiktive Frage, deren Antwort Sie anhand der freigegebenen Informationen beurteilen können.

Eine sichtbare Chatblase allein belegt noch keine korrekte Antwort. Halten Sie auch fest, welche Funktionen tatsächlich angeboten werden. Wenn nichts erscheint, trennen Sie die Ursachen. Zuerst werden die Agenten-Voraussetzungen und der tatsächlich eingebundene Code geprüft. Danach die Skriptadresse und, durch die Website-Betreuung, die konkrete Meldung im Browser. Die technische Dokumentation von Mozilla beschreibt mehrere mögliche Ursachen für CORS-Fehler. Eine Fehlermeldung ist deshalb ein Diagnosehinweis, kein Beweis für eine einzige Lösung. Sicherheitsfunktionen des Browsers werden für die Fehlersuche nicht abgeschaltet.

Ihre Übung ist ein kurzer Einbindungsauftrag: Benennen Sie Agent, Zielseite, zuständige Personen und die gewünschte Darstellung. Ergänzen Sie zwei fiktive Prüffragen mit nachvollziehbaren Erwartungen sowie den Test auf Desktop und Mobilgerät. Ergebnis ist ein prüfbarer Auftrag, keine ungeprüfte Veröffentlichung. Die tatsächliche Freischaltung und die dokumentierte Funktionsprüfung erfolgen anschließend im dafür freigegebenen Rahmen. Damit kann die Website-Betreuung gezielt weiterarbeiten.

Quellen und Stand

Geprüft gegen das AuxData-Administratorhandbuch v2.4.1 (Stand 07.09.2026), Kapitel 3.8 und 16.2, Abschnitt „Anhang F“. 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 AH Anhang F)

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

Webseite
Widget-Button
Chat-Overlay
AuxData-Agent
Dasselbe Chatbot-Erlebnis, nur eingebettet · Demo
✎ Denkaufgabe 1 — Eigene Seite oder Widget?

Dieses Tutorial hat keine Mitmach-Übungen: Einbetten setzt Administrationsrechte am Agenten und Zugriff auf eine fremde Webseite voraus. Die Aufgaben hier prüfst du an deiner eigenen Begründung.

Ausgangspunkt
Zwei Anlässe: Euer Vertrieb soll intern schnell an einen Agenten kommen. Und: Besucherinnen eurer Produktseite sollen dort Fragen stellen können.
Die Aufgabe
Ordne jedem Anlass zu, ob eine eigene Chatbot-Seite oder das eingebettete Widget passt, und nenne den Grund.
Antwort prüfen
Deine Begründung trägt, wenn sie nicht mit Bequemlichkeit argumentiert, sondern mit dem Publikum: Das Widget sitzt dort, wo die Leute ohnehin sind, und verlangt keine Anmeldung. Die eigene Seite verlangt sie — und liefert dafür Historie und Quellen.

✓ 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.
✎ Denkaufgabe 2 — Was dir außer dem Webseiten-Zugang noch fehlt
Ausgangspunkt
Du darfst die Unternehmensseite bearbeiten und hast das Snippet aus einer Anleitung.
Die Aufgabe
Zähl auf, was auf der AuxData-Seite erfüllt sein muss, damit dieses Snippet überhaupt etwas anzeigt.
Antwort prüfen
Zwei Dinge, und beide liegen nicht bei dir: Am Agenten muss der externe Chatbot-Zugang eingeschaltet sein, und der Agent muss gespeichert sein — erst dann existiert das Zugriffstoken. Beides macht die Administration. Ein Webseiten-Zugang allein bringt dir einen Button, der nichts lädt.

✓ 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 AH Anhang F, 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.

✎ Denkaufgabe 3 — Der ungespeicherte Agent
Ausgangspunkt
Eine Administratorin hat den externen Zugang gerade angehakt und schickt dir einen Screenshot der Karte „Zugang“. Gespeichert hat sie noch nicht.
Die Aufgabe
Sag voraus, was im Snippet fehlen wird und woran du das am fertigen Code erkennst.
Antwort prüfen
Das Zugriffstoken entsteht erst beim Speichern. Vorher ist data-accesstoken leer oder gar nicht vorhanden — und ein Snippet ohne Token lädt nichts. Das ist der häufigste Grund für „bei mir erscheint kein Button“.

✓ 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 AH Anhang F, 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.
✎ Denkaufgabe 4 — Das Snippet lesen können
Ausgangspunkt
Das Beispiel-Snippet aus dieser Stufe, vor dir auf dem Bildschirm.
Die Aufgabe
Streich in Gedanken alle Parameter weg, die optional sind. Was bleibt übrig, und wo im HTML gehört der Rest hin?
Antwort prüfen
Übrig bleiben data-agentid und data-accesstoken — der eine sagt, welcher Agent, der andere, ob du darfst. Alles Weitere zu Position, Farben und Datei-Upload ist Feinschliff. Und der Platz ist vor dem schließenden </body>, nicht im <head>.

✓ 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.

✎ Denkaufgabe 5 — Fehlersuche ohne Zugriff
Ausgangspunkt
Eine Kollegin meldet: Der Button erscheint nicht, in der Browser-Konsole steht ein CORS-Fehler. Auf die Webseite kommst du nicht.
Die Aufgabe
Nenne die wahrscheinlichste Ursache und die eine Frage, mit der du sie am Telefon bestätigst.
Antwort prüfen
Die Frage lautet: „Steht in der Adresszeile http oder https?“ Der Import ist CORS-pflichtig und scheitert an einer unverschlüsselten Quelle. Erscheint der Button danach zwar, ist aber das Fenster abgeschnitten, ist der Platz zu klein — unter 320 mal 400 wird es unbrauchbar.

🚀 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…