Anleitung · 6 Schritte
So fügst du ein Custom Widget in StreamElements hinzu
Ein Custom Widget ist ein StreamElements-Widget, dessen Code du selbst einfügst. So werden die meisten Premium-Widgets geliefert, wenn es keine Installation mit einem Klick gibt. Die Einrichtung dauert etwa fünf Minuten.
Kurze Antwort
Öffne in StreamElements ein Overlay, klicke auf +, wähle Static/Custom › Custom widget, markiere das neue Widget und klicke auf Open Editor. Füge den Code in die Tabs HTML, CSS, JS und FIELDS ein, schließe den Editor, klicke auf Save und füge dann die Overlay-URL in OBS als Browserquelle hinzu.
Schritt für Schritt
Overlay öffnen oder erstellen
Gehe in StreamElements zu Streaming tools › My overlays. Öffne ein bestehendes Overlay oder erstelle ein neues mit 1920×1080.
Custom Widget hinzufügen
Klicke im Overlay-Editor auf + und wähle Static/Custom › Custom widget. Auf der Arbeitsfläche erscheint ein Platzhalter-Widget.
Code-Editor öffnen
Markiere das Widget und klicke im Bereich links auf Open Editor. Der Editor hat vier Tabs: HTML, CSS, JS und FIELDS.
Code einfügen
Ersetze den Inhalt jedes Tabs durch die passende Datei aus deinem Download. Code-Dateien heißen meistens wie der Tab (zum Beispiel widget.html, widget.css, widget.js und fields.json). Füge die Fields-Datei in FIELDS ein; sie erzeugt die Einstellungen, die du später ändern kannst.
Speichern und positionieren
Schließe den Editor und klicke oben im Overlay-Editor auf Save. Ziehe das Widget auf der Arbeitsfläche an die richtige Stelle, passe seine Größe an und ändere dann in den Einstellungen im linken Bereich Texte, Farben und Optionen.
In OBS anzeigen
Kopiere die Overlay-URL mit dem Link-Symbol. Klicke im Bereich Quellen (Sources) auf +, wähle Browser, vergib einen Namen und klicke auf OK. Füge die URL ein, stelle 1920×1080 ein und klicke auf OK.
Gut zu wissen
- Der Tab FIELDS erzeugt die Einstellungen des Widgets. Sieht das Einstellungsfeld nach dem Einfügen leer aus, prüfe, ob die Fields-Datei in FIELDS gelandet ist und nicht in JS.
- Füge jede Datei vollständig in ihren eigenen Tab ein. Ein Widget mit abgeschnittenem Code bleibt meistens leer.
- Füge nur Code aus Quellen ein, denen du vertraust. Der Code eines Custom Widgets läuft in deinem Overlay.
- Um Alerts oder Chat zu testen, nutze Emulate im Overlay-Editor.
Lieber keinen Code einfügen?
Unsere Packs enthalten einen StreamElements-Install-Link für die Installation mit einem Klick, der das Overlay mit allen fertig eingerichteten Widgets anlegt. Dann kannst du das hier überspringen. Die Code-Dateien liegen trotzdem im Download, falls du manuell einrichten willst. Siehe So installierst du ein Overlay per Link.
