Widget-Builder
Der Widget-Builder generiert eigenständige HTML-Komponenten — Kontaktformulare, Feedback-Formulare, Preistabellen — die direkt im Chat-Fenster erscheinen, wenn die KI sie auslöst oder der Besucher sie aus dem Widget-Menü öffnet.
Ein Builder-Widget sammelt Daten (gespeichert im Tab Einsendungen). Es ruft keine Versanddienste oder Produktkataloge auf — das übernehmen Integrationen, die Ergebnisse als Chat-Text oder Produkt-Karussell zurückgeben.
Builder öffnen
Gehen Sie zum Tab Möglichkeiten und wechseln Sie zum Unter-Tab AI-Baukasten (auch über den Schnelllink AI-Baukasten in der Seitenleiste erreichbar). Klicken Sie auf Neues Widget.
Schnellvorlagen
Oben stehen zwei Startvorlagen zur Verfügung:
| Vorlage | Was sie generiert |
|---|---|
| Kontaktformular | Name, E-Mail, Nachricht mit Senden-Button |
| Preistabelle | Dreistufige Preisanzeige mit Umschalter monatlich/jährlich |
Klicken Sie auf eine Vorlage, um sie sofort zu generieren, oder überspringen Sie sie und beschreiben Sie unten Ihre eigene.
Eigener Prompt
Geben Sie eine Beschreibung des gewünschten Widgets in das Eingabefeld ein. Seien Sie so konkret wie Sie möchten:
Ein Feedback-Formular mit 1-5-Sterne-Bewertung, einem Kommentarfeld und
einem Button „Feedback senden". Dunkler Hintergrund mit orangefarbenen Akzenten.
Die KI generiert das Widget und zeigt eine Live-Vorschau innerhalb eines Chat-Mockups, sodass Sie genau sehen, wie es für einen Besucher aussieht.
Iterieren und verfeinern
Nach der Generierung erscheint unter der Vorschau das Feld „Bitten Sie um eine Änderung…". Beschreiben Sie, was Sie ändern möchten:
Mache die Buttons abgerundet und vergrößere die Schrift der Preise.
Füge unter der Preistabelle einen Hinweis hinzu: „Alle Preise zzgl. MwSt."
Jede Iteration ist eine neue KI-Generierung und aktualisiert die Vorschau.
Widget speichern
Wenn alles passt, geben Sie ein:
- Widget-Name — interne Bezeichnung (z. B. „Preistabelle – Haupt").
- Auslösebedingung — die Klartext-Bedingung, wann die KI dieses Widget zeigt.
- Im Widget-Menü anzeigen — optional auch im ＋-Starter-Menü auflisten, damit Besucher es bei Bedarf öffnen können (unabhängig von der KI-Auslösung).
Zeige die Preistabelle, wenn der Besucher nach Tarifen, Preisen oder Leistungsumfang fragt.
Ein Widget kann KI-ausgelöst, im Menü, beides oder keines sein — aber um angezeigt zu werden, muss es aktiviert sein. Klicken Sie auf Speichern; das Widget erscheint in der Möglichkeiten-Übersicht als Karte mit Vorschau-Miniatur.
Widgets verwalten
In der Möglichkeiten-Übersicht können Sie:
- Ein Widget ein-/ausschalten.
- Bearbeiten — öffnet den Builder erneut mit dem vorhandenen HTML zur Verfeinerung.
- Löschen — entfernt das Widget dauerhaft.
Wie Widgets im Chat erscheinen
Wenn die KI eine Übereinstimmung mit der Bedingung erkennt (oder der Besucher das Widget aus dem ＋-Menü öffnet), wird es als Bot-Nachricht gerendert. Das Widget läuft in einem isolierten <iframe>, kann Ihre Seite also nicht beeinflussen, und passt seine Größe an den Inhalt an.
Hat das Widget ein Formular, sendet der Besucher es aus dem Chat heraus ab. Nach dem Absenden wird das Formular durch eine neutrale „Gesendet"-Bestätigung ersetzt, und die Daten werden in Ihrem Tab Einsendungen gespeichert.
Tipps
- Halten Sie Widgets auf eine einzige Aktion fokussiert — eine Preistabelle mit Kontaktformular und Produktkarussell überfordert.
- Machen Sie Auslösebedingungen konkret, damit das Widget nicht in unzusammenhängenden Gesprächen erscheint.
- Generierte Widgets verwenden nur Inline-CSS und reines JavaScript — keine externen Bibliotheken oder Netzwerkanfragen.
- Der Render-Endpoint erzwingt die volle Breite des Widgets, sodass es zur eingestellten Größe passt. Wenn ein Layout dennoch unpassend aussieht, fragen Sie: „Mache den Wrapper width:100%, damit er den Container füllt."