> ## Documentation Index > Fetch the complete documentation index at: https://docs.localmind.ai/llms.txt > Use this file to discover all available pages before exploring further. # Agent als Widget veröffentlichen > Einen Agenten als Chat-Widget auf einer externen Website einbetten und verwalten. Ein **Widget** macht einen Agenten außerhalb von Localmind nutzbar: als Chat-Blase auf einer beliebigen Website. Du konfigurierst Aussehen, Hinweise und Sicherheit direkt am Agenten und bekommst am Ende einen Einbettungscode – wahlweise als JavaScript-Snippet oder als iframe. Besucher der Website chatten ohne eigenes Localmind-Konto. Willst du den Agenten stattdessen in eine eigene Oberfläche integrieren (eigener Login, eigenes Frontend), nutzt du die [API](/api-reference/OpenAI-Kompatibel) mit einem persönlichen API-Key statt des Widgets – beide Wege nicht mischen. ## Widget erstellen Navigiere zu **Space → Ressourcen → Agenten** und klicke deinen Agenten an. Klicke oben in der Chat-Ansicht auf **„Agent bearbeiten"** – rechts öffnet sich das Editor-Panel. Wer den Agenten bearbeiten darf, findet die Widget-Verwaltung hier im Editor-Panel. Im Kopf des Editor-Panels findest du oben rechts drei Icon-Buttons: Änderungen verwerfen, **„Widget einbetten"** (Teilen-Icon) und Schließen. Klicke auf **„Widget einbetten"**. Im leeren Zustand siehst du **„Erstellen Sie ein Widget, um diesen Agenten auf externen Websites einzubetten"** mit dem Button **„Erstellen Sie Ihr erstes Widget"**. Existiert bereits ein Widget, findest du oben rechts stattdessen den Button „Widget erstellen" neben der Liste bestehender Widgets. Im Dialog **„Widget erstellen"** füllst du links das Formular aus (Referenz unten); rechts zeigt eine **Vorschau** mit den Tabs Chat und Blase live, wie deine Änderungen wirken. Bestätige mit **„Widget erstellen"**. Der Dialog **„Einbettungscode"** zeigt deinen **Widget-Token** (Format `wgt-…`) und die Codeblöcke für JavaScript und iFrame. Der Token wird nur dieses eine Mal angezeigt. Kopiere ihn, bevor du den Dialog schließt – danach musst du ihn [neu generieren](#verwalten), um ihn erneut zu sehen. ## Formular „Widget erstellen" ### Grundlegende Informationen | Feld | Default / Platzhalter | | -------------------- | --------------------------------------------------------------------- | | Widget-Name | vorbelegt „`` Widget", Platzhalter „z.B. Support-Chat" | | Beschreibung | „Optionale Beschreibung für interne Verwendung" (nur intern sichtbar) | | Willkommensnachricht | Platzhalter „Hallo! Wie kann ich Ihnen heute helfen?" | | Eingabe-Platzhalter | Platzhalter „Nachricht eingeben..." | ### Erscheinungsbild | Feld | Optionen | Default | | ------------- | -------------------------------------- | -------------------- | | Position | Unten rechts, Unten links, Oben rechts | Unten rechts | | Thema | Automatisch (System), Hell, Dunkel | Automatisch (System) | | Blasen-Symbol | Chat-Blase, Roboter, Support | Chat-Blase | | Primärfarbe | Farbwähler + Hex-Feld | `#6366f1` | ### Erweiterte Darstellungsoptionen Aufklappbarer Bereich mit zusätzlichen Feldern: | Feld | Default / Beschreibung | | ---------------------------- | ------------------------------------------------------------------------------------- | | Willkommenstitel | Platzhalter „Willkommen!" – Titel oberhalb der Willkommensnachricht | | Kopfzeilen-Textfarbe | `#ffffff` | | Agentenbeschreibung anzeigen | Schalter, Default AN – zeigt die Agentenbeschreibung unter dem Namen in der Kopfzeile | | Blasengröße | Default „Mittel (56px)" | | Blasenabstand (px) | Default 16 – Abstand von der Bildschirmecke | | Blasen-Animation | Keine, Hüpfen, Pulsieren – Default Keine | | Eckenradius | Default „Groß (24px)" | | Schriftgröße | Default „Mittel (16px)" | | Widget automatisch öffnen | Schalter, Default AUS – öffnet das Chatfenster nach einer Verzögerung automatisch | | Erste Assistenten-Nachricht | erscheint als erste Assistenten-Nachricht, wenn der Chat geöffnet wird | | Benutzerdefiniertes CSS | wird in das Widget-iFrame eingefügt – mit Vorsicht verwenden | ### Warnhinweis-Popup Der Schalter **„Warnhinweis-Popup aktivieren"** ist standardmäßig AUS. Aktiviert, zeigt er einen Hinweis, den Besucher akzeptieren müssen, bevor sie den Chat nutzen können. Bei Aktivierung erscheinen vier weitere Felder: | Feld | Platzhalter | | ----------------------- | --------------------------------------------------------------------- | | Warnhinweis-Titel | „Wichtiger Hinweis" | | Warnhinweis-Nachricht | „KI kann Fehler machen. Bitte überprüfen Sie wichtige Informationen." | | Akzeptieren-Button-Text | „Akzeptieren" | | Ablehnen-Button-Text | „Ablehnen" | ### Haftungsausschluss-Text Freies Textfeld mit Platzhalter „KI-generierte Inhalte können Fehler enthalten. Kein Ersatz für professionelle Beratung." – der Text erscheint unter dem Chat-Eingabefeld. Bleibt das Feld leer, zeigt das Widget keinen Haftungsausschluss. ### Inhaltsleitplanken (Guardrails) Der Schalter **„Content Guardrails aktivieren"** ist standardmäßig AUS. Aktiviert, prüft ein LLM eingehende Nachrichten gegen benutzerdefinierte Regeln, bevor der Agent antwortet. Bei Aktivierung erscheinen: | Feld | Beschreibung | | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Guardrail-Modell | Dropdown „Basismodell auswählen" – zeigt die im Space über die [Library](/core-functions/agents) provisionierten Basismodelle | | Guardrail-Regeln | Freitext, Platzhalter nennt Beispiele wie „Sexuell explizite Inhalte blockieren", „Anfragen nach persönlichen Daten blockieren", „Hassrede oder diskriminierende Sprache blockieren" | | Blockierte Nachricht | Platzhalter „Entschuldigung, aber ich kann auf diese Nachricht nicht antworten. Bitte formulieren Sie Ihre Frage um." – wird angezeigt, wenn eine Nachricht blockiert wird | ### Sicherheit | Feld | Default / Beschreibung | | ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | | Erlaubte Domains | Platzhalter „example.com, \*.mysite.org" – kommagetrennte Liste, `*.domain.com` für Wildcards. Leer lassen erlaubt alle Domains. | | Ratenlimit (Nachrichten/Minute) | Default 10 – maximale Nachrichten pro Minute pro Besucher | Der Widget-Token ist der Zugangsschlüssel: Wer ihn hat, kann den Agenten von jeder Seite aus ansprechen. Setze deshalb **Erlaubte Domains**, belasse das **Ratenlimit**, generiere den Token bei Verdacht auf Missbrauch neu (der alte Token wird sofort ungültig) und deaktiviere oder lösche Widgets, die du nicht mehr brauchst. Der Agent nutzt dabei die Daten und Werkzeuge seines Space – Besucher sehen, was der Agent per Werkzeug erreichen kann. ## Einbettungscode ```html JavaScript theme={null} ``` ```html iFrame theme={null} ``` Füge den JavaScript-Code vor `` deiner Seite ein, den iframe-Code an beliebiger Stelle. `` ersetzt du durch die Domain deiner Localmind-Instanz, `[DEIN_TOKEN]` durch deinen Widget-Token aus dem Dialog. Position, Thema und Primärfarbe im JavaScript-Snippet spiegeln deine Dialogwerte zum Erstellzeitpunkt. Alle übrigen Einstellungen – Hinweise, Guardrails, erlaubte Domains, Texte – kommen serverseitig aus der Widget-Konfiguration: Änderungen im Dialog wirken ohne neuen Code auf deiner Website. ## Verwalten Im Dialog „Widgets für ``" siehst du pro Widget eine Zeile mit Name, Token-Präfix, Anzahl Unterhaltungen, einem Schalter zum Aktivieren/Deaktivieren sowie Icons zum Kopieren des Einbettungscodes, Bearbeiten und Löschen. Ein Agent kann mehrere Widgets haben. * **Einbettungscode später öffnen:** Der Token wird nur einmal angezeigt. Öffnest du den Dialog erneut, siehst du „Token nicht verfügbar" mit dem Button **„Token neu generieren"**. * **Token neu generieren:** Nach Bestätigung wird ein neuer Token einmalig angezeigt und kopierbar. **Der alte Token wird sofort ungültig** – bestehende Einbettungen mit dem alten Token funktionieren dann nicht mehr, du musst den Code auf deiner Website austauschen. * **Bearbeiten:** Der Dialog „Widget bearbeiten" zeigt dasselbe Formular wie beim Erstellen. Änderungen greifen für bestehende Einbettungen beim nächsten Laden deiner Website – der Einbettungscode selbst bleibt unverändert. * **Deaktivieren:** Der Schalter in der Liste deaktiviert ein Widget, ohne es zu löschen. * **Löschen:** Nach Bestätigung funktionieren alle eingebetteten Instanzen dieses Widgets nicht mehr. ## Gut zu wissen * Bleiben Textfelder wie Eingabe-Platzhalter oder Button-Texte leer, zeigt das Widget englische Standardtexte (z.B. „Type a message...", „Accept"/„Decline"). Fülle die Felder aus, wenn du deutsche Texte willst. * Ein Neuladen der Seite setzt das Gespräch im Chatfenster fort – über **„Neues Gespräch"** beginnen Besucher von vorn. * Für Widgets eignen sich schlanke Agenten mit wenigen Tools am besten. * Der Warnhinweis erscheint nur, wenn du sowohl Titel als auch Nachricht ausgefüllt hast – der Schalter allein reicht nicht. Das Erscheinungsbild des Widgets wird derzeit überarbeitet. Prüfe nach einem Update, ob der Warnhinweis weiterhin aktiv ist und deine Texte trägt – die hier beschriebenen Formularfelder und der Einbettungsweg bleiben unverändert. ## Nächste Schritte Grundlagen: Modell, System-Prompt und Tools eines Agenten konfigurieren. Einen Agenten mit eigenem API-Key in eine eigene Oberfläche integrieren. Widget-Unterhaltungen in der Analytik einsehen und exportieren (Admin).