Widget

Widget einbinden

So bringst du deinen Assistenten auf deine Website: mit einer Zeile Script, als Link oder als iframe.

Worum es geht

Das Widget ist das Chatfenster deines Assistenten auf deiner Website. Du fügst einmal eine Zeile Code ein. Alles Weitere, etwa Farben, Begrüßung, Position oder Gedächtnis, stellst du im Portal ein, und es gilt sofort, ohne dass du den Code noch einmal anfasst.

Voraussetzungen

Ein Website-Assistent (interne Assistenten haben kein Widget). Siehe Assistenten.
Der Assistent wurde mindestens einmal gespeichert. Erst dabei entsteht sein Widget-Schlüssel.
Der Assistent ist aktiv. Ein inaktiver Assistent erscheint zwar auf der Seite, antwortet aber nicht.
Zugriff auf den HTML-Code deiner Website, auf dein CMS oder auf eines der Plugins.

Code holen

Öffne Kundenservice → Übersicht und klicke an der Kachel deines Assistenten auf das Zahnrad.
Klicke oben auf Einbetten. Es öffnet sich „Widget einbetten“.
Kopiere im Feld Embed-Code den Code mit Kopieren (danach steht dort „Kopiert!“).
Füge den Code auf jeder Seite, auf der der Assistent erscheinen soll, direkt vor dem schließenden </body> ein. Meist geht das an einer Stelle im Template oder Footer.
Lade deine Website neu. Unten rechts (oder an der eingestellten Position) erscheint das Widget.

Im Dialog kannst du das Widget mit Live-Test auch vorab im Portal ausprobieren und mit Vorschau beenden wieder schließen.

Der Script-Code

vor </body> einfügenhtml

<script
  src="https://app.lymbe.ai/widget.js"
  data-bot-id="BOT_ID"
  data-tenant="dein-workspace"
  data-key="WIDGET_SCHLUESSEL"
></script>

Attribut	Pflicht	Bedeutung
`data-bot-id`	ja	Kennung des Assistenten
`data-tenant`	ja	Kurzname deines Workspaces
`data-key`	ja	Widget-Schlüssel des Assistenten
`data-position`	nein	`bottom-right`, `bottom-left`, `top-right` oder `top-left`; überschreibt die Einstellung im Portal
`data-color`	nein	Akzentfarbe als Hex-Wert, z. B. `#09CC78`; überschreibt die Einstellung im Portal

Weniger ist mehrLass data-position und data-color weg, wenn du kannst. Dann änderst du beides bequem im Portal, statt den Code auf der Website anzufassen.

Link und iframe

Ohne Script geht es auch: als eigene Seite, die du verlinkst, oder als eingebettetes Fenster.

Direkter Linktext

https://app.lymbe.ai/widget/BOT_ID?tenant=dein-workspace&key=WIDGET_SCHLUESSEL

iframehtml

<iframe
  src="https://app.lymbe.ai/widget/BOT_ID?tenant=dein-workspace&key=WIDGET_SCHLUESSEL&embedded=1"
  width="400" height="600"
  allow="clipboard-write; autoplay; microphone"
  style="border:0"
></iframe>

allow="microphone" brauchst du, wenn Besucher per Spracheingabe schreiben sollen.

Jede Anfrage des Widgets trägt den Schlüssel mit. Fehlt er oder stimmt er nicht, lehnt Lymbe die Anfrage ab.
Der Schlüssel steht sichtbar in deinem Quelltext. Das ist so gewollt. Er ist kein API-Schlüssel und öffnet keine Daten.
Damit nur deine Website das Widget nutzt, trägst du zusätzlich die erlaubten Domains ein.

Auf dem Handy

Auf Bildschirmen bis 768 Pixel Breite öffnet sich das Widget im Vollbild. Ob es dort auch von selbst aufgeht, legst du unter Anpassen fest.

Testhilfen

An die Adresse deiner Seite anhängen	Wirkung
`?lymbe_teaser=reset`	Setzt Teaser und automatisches Öffnen zurück, damit du sie erneut siehst
`?lymbe_track=off`	Dieser Browser wird nicht mehr in der Auswertung gezählt (z. B. für dein Team)
`?lymbe_track=on`	Hebt das wieder auf

Fehlerbehebung

Öffne die Entwicklerkonsole des Browsers (F12). Das Widget meldet sich dort mit [LYMBE Widget].

Problem	Ursache und Lösung
`Bot ID is required`, `Tenant slug is required` oder `Widget key is required`	Ein Pflicht-Attribut fehlt. Code neu über „Einbetten“ kopieren.
Widget erscheint gar nicht	Code fehlt auf dieser Seite, steht in einem Kommentar oder wird von einem Cookie-Banner blockiert. Im Quelltext nach `widget.js` suchen.
Widget erscheint, das Fenster bleibt leer oder meldet einen Fehler	Domain nicht in den erlaubten Domains. Domain ergänzen oder das Feld leeren.
Widget antwortet nicht	Assistent ist inaktiv oder die KI deines Workspaces ist gesperrt (Kontingent, siehe KI-Nutzung).
Kein Widget-Schlüssel im Code	Assistent einmal in der Konfiguration speichern, dann Code neu kopieren.
Content-Security-Policy blockiert	Erlaube die Lymbe-Adresse für `script-src`, `frame-src` und `connect-src`.

Weiter: Widget anpassen · JavaScript-Ereignisse · Veröffentlichen

VorherigeMCP für Code-Agenten NächsteAnpassen