Widgets

Was ist ein Widget?

Ein Widget ist eine einbettbare KI-Chat-Oberfläche, die du auf jeder beliebigen Website einsetzen kannst. Besucher können damit direkt auf deiner Seite mit deinem KI-Assistenten interagieren — ohne die Seite zu verlassen.

Widgets werden im emercai Dashboard konfiguriert und über ein kleines Script-Snippet ausgeliefert. Aussehen, Verhalten und Inhalte steuerst du über eine JSON-Konfiguration. Typisch ist ein Widget pro Anwendungsfall: ein Support-Widget im Help Center, ein Produktberater im Shop oder ein Lead-Generator auf einer Landingpage.

Widget erstellen

Öffne Widgets in der linken Seitenleiste. Klicke rechts oben auf Neues Widget.

Du wirst nach einem Namen gefragt. Nach der Bestätigung wird das Widget angelegt und du landest direkt auf der Detailseite, wo du alles weitere konfigurieren kannst.

Name festlegen

Der Name ist ausschließlich intern — deine Website-Besucher sehen ihn nie. Wähle etwas, das du und dein Team auf einen Blick erkennt, zum Beispiel Support Chat – Help Center oder Produktberater – Shop.

Du kannst das Widget jederzeit umbenennen, ohne dass sich am Embed auf deiner Website etwas ändert.

Beschreibung hinzufügen

Auch die Beschreibung ist intern. Sie ist Teil der Widget-Konfiguration und hilft Teams, die mit mehreren Widgets arbeiten. Halte darin fest, wofür das Widget gedacht ist, wen es anspricht oder welches besondere Verhalten es hat.

Beispiel: Beantwortet Fragen zu Preisen und Tarifen. Leitet weiter an den menschlichen Support, wenn ein Nutzer eine Rückerstattung verlangt.

Widget konfigurieren

Die Konfiguration legt fest, wie das Widget aussieht und sich verhält. Du bearbeitest sie als JSON-Objekt direkt im Dashboard. Änderungen werden nach dem Speichern wirksam.

Widget-Typ

Jedes Widget hat einen Typ, der das Layout auf der Seite bestimmt. Aktuell wird ein Typ unterstützt:

FooterBar — eine kompakte Chat-Leiste, die am unteren Bildschirmrand fixiert ist. Ein Klick öffnet das vollständige Chat-Fenster. Das ist das Standardformat für Website-Chatassistenten.

Der Typ wird beim Anlegen festgelegt und kann danach nicht mehr geändert werden. Wenn du ein anderes Layout benötigst, erstelle ein neues Widget.

Erscheinungsbild anpassen

Die JSON-Konfiguration unterstützt unter anderem folgende Optionen:

• Farben — Primärfarbe, Button-Farbe, Hintergrund
• Position — FooterBar links oder rechts ausrichten
• Branding — eigenes Logo, Avatar-Bild, Begrüßungstext
• Verhalten — automatisches Öffnen nach einer Verzögerung, Willkommensnachricht, Platzhaltertext im Eingabefeld

Eine vollständige Liste der unterstützten Konfigurationsfelder und deren Standardwerte findest du in der Konfigurationsreferenz.

Screenshot

Du kannst dem Widget einen Screenshot hinzufügen. Das ist praktisch für die interne Dokumentation oder bei der Übergabe an Teammitglieder — sie sehen sofort, wie das Widget in der Produktivumgebung aussieht. Der Screenshot ist nur intern sichtbar und wird Endnutzern nicht angezeigt.

Widget einbetten

Sobald dein Widget konfiguriert ist, bindest du es über ein Script-Tag in deine Website ein. Den Einbettungscode findest du auf der Detailseite des Widgets.

Einbettungscode

Der Snippet sieht so aus:

<script
  src="https://cdn.emercai.com/loader.js"
  data-widget-id="DEINE_WIDGET_ID"
  async
></script>

Platziere das Tag vor dem schließenden </body>-Tag auf jeder Seite, auf der das Widget erscheinen soll. Ersetze DEINE_WIDGET_ID durch die ID, die im Dashboard angezeigt wird.

Das Loader-Script ist minimal gehalten und lädt das Widget-Bundle asynchron — deine Seite wird beim Laden nicht blockiert.

Embed testen

Nach dem Einbinden des Snippets:

1. Öffne die Seite im Browser und scrolle nach unten — die FooterBar sollte erscheinen.
2. Klicke auf den Chat-Button und prüfe, ob das Widget korrekt öffnet.
3. Sende eine Testnachricht und bestätige, dass die KI antwortet.

Falls das Widget nicht erscheint, überprüfe, ob die data-widget-id mit der ID im Dashboard übereinstimmt und ob das Script-Tag korrekt im HTML platziert ist.

Teste neue Widgets zuerst auf einer Staging-Umgebung, bevor du sie live schaltest.

Widgets verwalten

Suchen und Filtern

Die Widget-Liste zeigt alle Widgets in deinem Account. Mit dem Suchfeld oben in der Liste kannst du nach Name filtern. Das ist besonders hilfreich, wenn du viele Widgets für verschiedene Sites oder Anwendungsfälle verwaltest.

Die Liste ist paginiert — bei vielen Widgets kannst du über die Navigation am unteren Ende der Liste blättern.

Widget bearbeiten

Klicke in der Liste auf ein Widget, um die Detailseite zu öffnen. Dort kannst du:

• Den Namen ändern
• Die Beschreibung aktualisieren
• Die JSON-Konfiguration bearbeiten
• Den Screenshot hochladen oder ersetzen

Speichere deine Änderungen mit dem Speichern-Button. Konfigurationsänderungen greifen sofort — aktive Embeds auf deiner Website laden die neuen Einstellungen beim nächsten Seitenaufruf.

Widget löschen

Öffne die Detailseite des Widgets und nutze die Lösch-Option (in der Regel im Einstellungsmenü oder in einem Gefahrenbereich am Ende der Seite).

Entferne das Embed-Script von deiner Website, bevor du das Widget löschst. Wenn der Snippet nach dem Löschen noch auf deiner Seite liegt, findet der Loader das Widget nicht und es wird nichts gerendert — trotzdem ist es sauberer, den Code vorher zu entfernen.

Das Löschen ist endgültig. Wenn du das Widget später wieder benötigst, musst du es von Grund auf neu anlegen.