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.

Der Builder ist für Leute, die etwas programmieren können. Wenn du nur ein fertiges Overlay willst, nutze die Widget-Bibliothek. Die Code-Referenz (Events, Daten und Einstellungen) findest du unter Widget-Builder-Referenz.

Der Widget Builder listet deine Widgets und ihre OBS-URLs.

Ein neues Widget erstellen

1. Öffne 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.

Starte mit einem leeren Widget oder einer Vorlage.

Hinweis

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.

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.
• 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, 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.

Achtung

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.

Achtung

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.

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 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.