# Widget Builder > Bau dein eigenes Kick-Stream-Widget mit HTML, CSS und JavaScript im KickBot Widget Builder, teste es mit Test-Events und veröffentliche es in der Bibliothek. Source: https://kickbot.com/de/docs/widgets/widget-builder Mit dem Widget Builder baust du dein eigenes Overlay für deinen Kick-Stream, mit HTML, CSS und JavaScript. KickBot schickt Live-Events von Kick (Follows, Subs, Gifted Subs, KICKs, Raids, Chat-Nachrichten und mehr) an deinen Code. Du musst dich also mit keiner API verbinden. Du kannst das Widget in deinem eigenen Stream nutzen und es veröffentlichen, damit andere Streamer es aus der Widget-Bibliothek installieren können. Du öffnest ihn unter [kickbot.com/dashboard/widget-builder](https://kickbot.com/dashboard/widget-builder). Der Builder ist für Leute, die etwas programmieren können. Wenn du nur ein fertiges Overlay willst, nutze die [Widget-Bibliothek](https://kickbot.com/de/docs/widgets/widget-library). Die Code-Referenz (Events, Daten und Einstellungen) findest du unter [Widget-Builder-Referenz](https://kickbot.com/de/docs/widgets/widget-builder-reference). ![Die Startseite des KickBot Widget Builders mit dem Button Neues Widget, einem Widget mit versteckter URL und dem Bereich Referenz](https://kickbot.com/docs/images/widgets/widget-builder/01-home.webp "Der Widget Builder listet deine Widgets und ihre OBS-URLs.") ## Ein neues Widget erstellen 1. Öffne [kickbot.com/dashboard/widget-builder](https://kickbot.com/dashboard/widget-builder) und klick auf **Neues Widget**. 2. Wähle **Leer** oder starte mit einer Vorlage: **Viewer Count**, **Simple Follower Goal** oder **Basic Chat Widget**. Eine Vorlage kopiert den Code dieses KickBot-Widgets, damit du ihn ändern kannst. 3. Gib einen **Widget-Namen** ein. Bei einem leeren Widget stellst du auch **Breite** und **Höhe** in Pixeln ein (standardmäßig 800 × 600). 4. Klick auf **Widget erstellen**. Der Editor öffnet sich. ![Das Popup Neues Widget mit Leer und den Vorlagen Viewer Count und Simple Follower Goal](https://kickbot.com/docs/images/widgets/widget-builder/02-new-widget.webp "Starte mit einem leeren Widget oder einer Vorlage.") > **Note:** Im Gratis-Plan kannst du bis zu 10 Widgets im Widget Builder haben. Mit Premium gibt es kein Limit. Widgets, die du aus der Bibliothek installierst, zählen nicht mit. ## Der Editor Der Editor hat drei Teile: Einstellungen links, der Code in der Mitte und eine Live-Vorschau rechts. ![Der Editor im Widget Builder mit Grundeinstellungen und Nutzervariablen links, dem HTML-Tab in der Mitte und der Vorschau rechts](https://kickbot.com/docs/images/widgets/widget-builder/03-editor.webp "Einstellungen, Code und Vorschau im Editor des Widget Builders.") - **Grundeinstellungen**: der Name sowie die Breite und Höhe, in der das Widget gerendert wird. - **Nutzervariablen**: Einstellungen, die Streamer ohne Code ändern können, zum Beispiel eine Farbe, einen Text oder eine Zielzahl. Siehe [Nutzervariablen](https://kickbot.com/de/docs/widgets/widget-builder-reference#user-variables). - **Test-Events senden**: Buttons, die ein Test-Event (Sub, Gifted Sub, KICKs, Follow, Raid, Nachricht und mehr) an die Vorschau senden. - **Sichtbarkeit**: zeigt, ob das Widget privat oder veröffentlicht ist, und hat den Button **Widget veröffentlichen**. - **Code**: Tabs für **HTML**, **CSS** und **JavaScript**. Mit **Editor-Layout** oben zeigst du eine Datei (**Einzeln**) oder zwei Dateien gleichzeitig (**Nebeneinander** oder **Übereinander**). - **Vorschau**: zeigt das Widget in seiner Größe, passend skaliert. Sie aktualisiert sich, während du tippst. Mit dem Neu-laden-Button startest du sie neu, mit dem Pop-out-Button öffnest du sie in einem eigenen Fenster (praktisch, um die Browser-Konsole zu öffnen). Der Editor speichert deine Arbeit von selbst, während du tippst. **Speichern** speichert alles auf einmal, und der Text darunter zeigt, wann zuletzt gespeichert wurde. **Verlassen** bringt dich zurück zur Widget-Liste. Der Editor braucht einen breiten Bildschirm. Auf dem Handy bittet KickBot dich, ihn an einem Computer zu öffnen. Dein Widget ist gespeichert, du kannst dort also weitermachen. ## Dein Widget testen 1. Öffne **Test-Events senden**. 2. Klick auf ein Event, zum Beispiel **Follow** oder **Nachricht**. 3. Sieh dir an, wie die Vorschau reagiert. Test-Events haben denselben Aufbau wie echte Events, mit Beispieldaten. Sie gehen nur an die Vorschau auf dieser Seite, nie an OBS oder deinen Stream. Um mit echten Events zu testen, füge das Widget in OBS hinzu und geh live, oder bitte einen Freund, deinem Kanal zu folgen. ## Dein Widget im Stream nutzen Jedes Widget, das du baust, erscheint auch unter [Gespeicherte Widgets](https://kickbot.com/dashboard/saved-widgets), mit „Dein eigenes Widget“ unter dem Namen. Seine URL führt immer deinen neuesten Code aus. 1. Klick auf der Seite des Widget Builders an deinem Widget auf **URL kopieren**. 2. Füge in OBS eine Quelle vom Typ **Browser** hinzu, füge die URL ein und stell Breite und Höhe auf die Größe des Widgets ein. 3. Klick auf **OK**. Wenn du den Code änderst, während das Widget in OBS ist, aktualisiere die Browser-Source, damit der neue Code lädt. Wenn du unter Gespeicherte Widgets den Wert einer Nutzervariable änderst und auf **Änderungen speichern** klickst, lädt OBS das Widget von selbst neu. Mehr Hilfe findest du unter [Browser-Source in OBS hinzufügen](https://kickbot.com/de/docs/getting-started/add-browser-source-obs). > **Caution:** Halte die URL privat. Jeder, der sie hat, kann dein Widget auf seinem Bildschirm zeigen. ## In der Widget-Bibliothek veröffentlichen Veröffentliche ein Widget, wenn andere Streamer es finden und installieren sollen. 1. Öffne im Editor **Sichtbarkeit** und klick auf **Widget veröffentlichen**. 2. Füge ein **Hauptbild** und mindestens ein weiteres Bild hinzu. Insgesamt kannst du bis zu 10 Bilder hinzufügen, jedes bis zu 10 MB. 1920 × 1080 funktioniert am besten. 3. Schreib eine **Beschreibung**: was das Widget zeigt und wie man es einrichtet. 4. Schick es ab. Das Popup bestätigt, dass dein Widget zur Prüfung geschickt wurde. Das KickBot-Team prüft jedes Widget. Wenn es freigegeben wird, erscheint es in der Widget-Bibliothek mit deinem Kick-Namen als Ersteller. Die Prüfung dauert meist weniger als 24 Stunden. > **Caution:** Du kannst ein Widget nur einmal veröffentlichen. Danach zeigt der Editor „Widget bereits veröffentlicht. Kontaktiere den Support für Änderungen (Versionierung kommt bald)“. Teste dein Widget gründlich, bevor du es veröffentlichst. ## Ein Widget löschen Öffne auf der Seite des Widget Builders das Menü **⋯** an einem Widget und klick auf **Löschen**. Das entfernt seinen Code und seine Einstellungen und lässt sich nicht rückgängig machen. ## Teammitglieder Teammitglieder brauchen die Berechtigung **Widget Builder**, um den Editor zu öffnen und Widgets zu bauen. Um Widget-URLs zu sehen, brauchen sie **Widgets konfigurieren**. Siehe [Team verwalten](https://kickbot.com/de/docs/account/team). ## Häufige Fragen **Muss ich programmieren können?** Ja, etwas HTML, CSS und JavaScript. Wenn du nicht programmierst, installiere ein Widget aus der [Widget-Bibliothek](https://kickbot.com/de/docs/widgets/widget-library) und ändere stattdessen seine Einstellungen. **Kann ich ein KickBot-Widget aus der Bibliothek bearbeiten?** Den Code eines Widgets aus der Bibliothek kannst du nicht ändern. Starte ein neues Widget mit der Vorlage **Viewer Count**, **Simple Follower Goal** oder **Basic Chat Widget**. So bekommst du eine Kopie des Codes, die du ändern kannst. **Kann mein Widget Schriften, Bilder oder andere Skripte laden?** Ja. Dein HTML, CSS und JavaScript laufen in OBS in einer normalen Webseite. Du kannst also Webfonts, Bilder und Skripte von anderen Seiten einbinden. Mit Nutzervariablen vom Typ **Bild/GIF**, **Video** oder **Audio** können Streamer ihre eigenen Dateien hochladen. **Kann ich Widgets mit der KickBot-API erstellen?** Ja. Mit der KickBot-API kannst du deine Widgets auflisten, erstellen und aktualisieren. Siehe die [API-Referenz für Widgets](https://kickbot.com/docs/api/reference/widgets).