# HTML-Widget
Der Block sendet ein Widget — eine kleine interaktive Karte direkt in der Nachricht: eine Umfrage, ein Quiz, einen Rechner, einen Timer, ein Glücksrad. Die Person tippt in der Karte, und der Bot erhält die Antwort und geht im Szenario weiter, wie nach einem Tastendruck.
Das Widget wird in privaten Telegram-Chats und im [Chat auf der Website](https://support.watbot.org/de/chatbots/channels/web) angezeigt. Kontakte aus anderen Messengern gehen über den Ausgang „Widget nicht angezeigt“ — verbinden Sie ihn mit einer normalen Nachricht.
## Womit anfangen
In einem neuen Block bietet das Panel drei Wege an:
- **„Für die KI beschreiben“** — öffnet das Panel [„Mit KI erstellen“](https://support.watbot.org/de/chatbots/blocks#mit-ki-erstellen): Beschreiben Sie die Karte in Worten, und die KI schreibt Code und Daten.
- **„Code schreiben“** — öffnet einen leeren HTML-Editor.
- **Vorlage** — eine fertige Karte, die Sie nur noch anpassen.
Vorlagen: „Umfrage“, „Sternebewertung“, „Quiz“, „Countdown“, „Mehrfachauswahl“, „Einzelauswahl“, „Schieberegler“, „Glücksrad“, „Treuekarte“, „Bestellstatus“ und „Preisrechner“. Nach der Wahl einer Vorlage erscheint unter dem Feld ein Hinweis: welche Antworten Sie hinzufügen und wo Sie die Texte ändern. Eine Vorlage können Sie auch später wählen — mit der Schaltfläche „Vorlagen“ über dem Editor. Die gewählte Vorlage ersetzt Code und Daten des Widgets.
## Einstellungen
Code, Daten und Vorschau liegen in den Tabs über dem Editor:
- **„HTML-Code“** — Markup, Stile und Skript des Widgets. Unter dem Feld sehen Sie, wie groß es ist und wie groß nach der Komprimierung.
- **„Daten“** — die Daten dieser Nachricht (`chat_data`), bis 1024 Byte, meist JSON. Das Widget liest sie als `TelegramWidget.chatData`. Praktisch: Texte und Optionen hier ablegen, den Code gemeinsam halten.
- **„Vorschau“** — wie die Karte aussieht und funktioniert. Der Schalter ☀/☾ wechselt zwischen hellem und dunklem Design, „Neu starten“ startet das Widget neu. Anfragen, die das Widget an den Bot senden würde, erscheinen unter der Vorschau.
- **„Nebeneinander“** — Code und Vorschau gleichzeitig. Der Tab vergrößert das Panel auf [Vollbild](https://support.watbot.org/de/chatbots/blocks#blockeinstellungen) und verkleinert es wieder, wenn Sie zu einem anderen Tab wechseln.
Über der Vorschau steht die Größe des Widgets:
- **„Breite“** — „Auto“ (Breite der Nachricht), 320, 400 oder „Eigene“ — von 200 bis 600 Punkt.
- **„Höhe“** — „Auto“ (nach Inhalt) oder „Eigene“ — von 50 bis 600 Punkt. Was nicht passt, wird abgeschnitten: Im Widget gibt es kein Scrollen.
Unter dem Editor:
- **„Beschriftung“** — Text unter dem Widget, bis 1024 Zeichen.
- **„Antworten des Widgets“** — die Ausgänge des Blocks, mehr dazu unten.
- **„Zusätzlich“** — „Antwort in eine Benutzervariable schreiben“ und „Ohne Ton zustellen“, siehe [„Zusätzlich“](https://support.watbot.org/de/chatbots/blocks/messages#zusätzlich).
In Code und Daten funktionieren [Platzhalter](https://support.watbot.org/de/chatbots/templates): `{{ $name }}` wird vor dem Senden ersetzt. Die Vorschau zeigt den Code so, wie er ist, ohne Ersetzungen.
### Grenzen
- Code bis 32 KB und bis 4 KB nach der Komprimierung. Passt er nicht, lässt er sich trotzdem speichern, aber das Widget wird nicht gesendet: Der Kontakt geht über den Ausgang „Widget nicht angezeigt“, und der Grund erscheint im „Ausführungsprotokoll“.
- Kein Netzwerk: Das Widget kann keine Skripte, Stile, Schriften und Bilder per Link laden und sendet keine Anfragen. Bilder nur als eingebettetes SVG oder `data:`-Adresse.
- Die Daten eines Tippens — bis 52 Byte: etwa 50 lateinische Buchstaben, Umlaute zählen doppelt.
- Eine Nachricht mit Widget lässt sich nicht weiterleiten oder speichern.
## Antworten und Ausgänge
Eine Schaltfläche im Widget ruft `TelegramWidget.request('ja')` auf — und der Kontakt geht über den Ausgang „ja“, als hätte er einen Button mit diesem Text gedrückt. Diese Buttons sieht der Kontakt nicht: Sie verbinden nur das Tippen im Widget mit dem Szenario.
- **Antworten des Widgets** — fügen Sie für jeden Wert, den das Widget sendet, eine Antwort hinzu.
- **„Jede andere Antwort“** — das Widget hat einen Wert gesendet, der unter den Antworten fehlt. Um ihn zu speichern, schalten Sie „Antwort in eine Benutzervariable schreiben“ ein.
- **„Widget nicht angezeigt“** — der Kontakt ist weder aus Telegram noch aus dem Chat auf der Website, der Code ist über dem Limit, oder Telegram hat die Nachricht abgelehnt. Verbinden Sie den Ausgang mit einer normalen Nachricht mit demselben Inhalt.
- **„Fortsetzen“** — nur im Schema sichtbar: Der Bot geht weiter, ohne auf ein Tippen zu warten.
Auch das Tippen auf alte Widgets im Chatverlauf kommt in diesem Block an.
### Antwort an das Widget und neuer Zustand
Nach dem Ausgang kann das Szenario dem Widget antworten — setzen Sie Kontaktvariablen, etwa mit dem Block „Variablenoperation“ oder „JavaScript-Interpreter“:
- **`widget_answer`** — was das Widget als Antwort auf seine Anfrage erhält: `TelegramWidget.request()` gibt `{ result }` mit diesem Wert zurück.
- **`widget_chat_data`** — neue Daten des angetippten Widgets: Die Karte wird in derselben Nachricht neu gezeichnet.
Neu zeichnen muss die Karte der Code des Widgets selbst: Bei neuen Daten schickt ihm die Plattform das Ereignis `chatDataChanged`. Legen Sie das Zeichnen in eine Funktion und rufen Sie sie beim Laden und beim Ereignis auf — sonst bleibt die Karte, wie sie war. Die fertigen Vorlagen sind bereits so aufgebaut.
```js
function render() {
const data = JSON.parse(TelegramWidget.chatData || '{}')
// …
}
render()
TelegramWidget.onEvent('chatDataChanged', render)
```
Später aktualisieren — etwa wenn eine Bestellung bezahlt ist — können Sie das Widget mit dem Block [„HTML-Widget aktualisieren“](https://support.watbot.org/de/chatbots/blocks/messages/widget-update).
### Umfrage und Glücksrad
Zwei Schlüssel in den Widget-Daten schalten eine fertige Mechanik ein, ein Szenario ist dafür nicht nötig:
- **`"poll": ["Ja", "Nein"]`** — eine Umfrage, bis 10 Optionen. Die Stimmen zählt die Plattform selbst: eine Stimme pro Kontakt, eine erneute ändert die Wahl. Das Widget erhält das Ergebnis: die Optionen, die Zahl der Stimmen und die Wahl des Kontakts selbst.
- **`"prizes": ["5 % Rabatt", …]`** — ein Glücksrad. Den Preis wählt die Plattform: zufällig und einmal pro Kontakt.
Die gewählte Option oder der Gewinn wird noch vor dem Übergang über den Ausgang in die Kontaktvariable `widget_result` geschrieben — Sie können sie gleich in die nächste Nachricht einsetzen: „Ihr Gewinn: {{ $widget_result }}“.
## Widgets vom KI-Agenten
Auch der KI-Agent kann Widgets senden — schalten Sie im Block [KI-Agent](https://support.watbot.org/de/chatbots/blocks/ai-agent#tools) das Tool „HTML-Widgets“ ein. Ein Tippen in der Karte des Agenten kommt bei ihm als Nachricht des Kontakts an.