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.
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.
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.
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
Voraussetzungen & Token-Schutz
Bevor du einbettest.
1Was erfüllt sein muss
- Für den Agenten ist der externe Chatbot-Zugang aktiviert.
- Der Agent wurde gespeichert, sodass ein Access Token erzeugt wurde.
- Die Person, die das Snippet kopiert, hat das passende Admin-Recht.
- Die Zielwebseite kann HTML-/Script-Code aufnehmen.
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>.- 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
Snippet erzeugen
Karte „Zugang" im Agenten.
1Werte einstellen
Als Administrator anmelden → gewünschten Agenten öffnen → Karte „Zugang". (AH AH Anhang F, Schritt 1)
Klick auf „Embed-Snippet kopieren" — das fertige Snippet liegt in der Zwischenablage.
- 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-accesstokenleer 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
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-agentidPflicht- ID des Agenten.
data-accesstokenPflicht- Access Token (UUID) des Agenten.
data-position- Standard
bottom-right, auchbottom-left. data-width- Standard
400, Minimum 320. data-height- Standard
600, Minimum 400. data-fileuploadtrueaktiviert den Datei-Upload.
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.- 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-agentidunddata-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
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.
src immer die https://-Adresse der Plattform nutzen. Bei http:// kann das Widget wegen CORS-pflichtigem Import nicht erscheinen.2Fehlerbilder
- Button erscheint nicht
srcprü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-fileuploadund 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.
- 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
Sitzt das Einbetten?
6 Fragen aus den Stufen 1–5. Kein Zertifikat — zur Selbstkontrolle. Beliebig oft wiederholbar.