// Overlays
Kostenlos downloaden
Anleitung

Twitch Overlay in OBS einrichten

Im Hub einrichten lassen, in OBS eine Browser-Quelle darauf legen. Fertig.

Ein Overlay von mir ist eine HTML-Datei, die in OBS läuft. Kein Konto, kein Server, keine Installation.

5 Minuten Einsteiger OBS Browser Source

Schritt für Schritt

// So gehts

  1. 01

    Overlay im Config Hub einrichten

    Öffne den Config Hub. Er fragt dich zuerst nach einem Ordner auf deiner Festplatte, dann hakst du die Overlays an, die du haben willst, und trägst deinen Twitch-Kanalnamen ein. Beim Klick auf Jetzt installieren schreibt er die widget.html und eine dazu passende config.js genau in diesen Ordner und nirgendwo sonst. Das setzt Chrome oder Edge voraus, weil nur die einer Webseite erlauben, in einen Ordner zu schreiben. In Firefox und Safari zeigt der Hub stattdessen den Weg von Hand an: das Overlay als Zip-Paket und die fertige config.js einzeln herunterladen, das Zip entpacken, die config.js daneben legen, weiter mit Schritt 2.

    Der Config Hub erklaert in drei nummerierten Zeilen, was er tut: Ordner waehlen, Kanal eintragen, in OBS eine Browser-Quelle auf die widget.html legen
    Der Hub sagt selbst, was er vorhat, bevor er irgendetwas anfasst. Schritt 3 in dieser Liste ist der einzige, den du danach noch von Hand machst.
  2. 02

    Browser-Quelle in OBS anlegen

    Eine Browser-Quelle ist die Quelle in OBS, die eine Webseite oder eine HTML-Datei anzeigt. Im Menü heißt sie in beiden Sprachversionen einfach Browser, sonst auf Englisch Browser Source. Klick unten im Feld Quellen auf das Plus, wähl Browser und gib der Quelle einen Namen. Im nächsten Fenster setzt du den Haken bei Lokale Datei und wählst die widget.html aus. Den vollständigen Pfad dorthin zeigt dir der Hub am Ende zum Kopieren an. Trag Breite 1920 und Höhe 1080 ein: das Overlay positioniert sich selbst innerhalb dieser Fläche, es braucht also die volle Leinwand und keinen kleinen Kasten.

    Die Eigenschaften einer Browser-Quelle in OBS: Haken bei Lokale Datei, die ausgewählte widget.html, Breite 1920 und Höhe 1080
    Mehr als diese vier Angaben braucht es nicht. Der Pfad ist der Ordner, den du im Hub gewählt hast, hier als Windows-Beispiel.
  3. 03

    Testen und live gehen

    Rechtsklick auf die Browser-Quelle, dann Aktualisieren. Jetzt tippst du den Startbefehl in deinen eigenen Chat. Welcher das ist, sagt dir der Hub am Ende und die Seite des jeweiligen Overlays; beim Kugelfall ist es zum Beispiel !kugel. Reagiert das Overlay, bist du fertig. Reagiert es nicht, ist es fast immer ein Tippfehler im Kanalnamen.

    Der Moment, auf den es hinausläuft: ein Befehl im Chat, und das Overlay in deiner Szene reagiert. Hier das kostenlose Kugelfall-Overlay.
  4. 04

    Später etwas ändern

    Farben, Befehle, Einsätze und die Auszahlung stellst du im Config Hub unter Einstellungen ein, er schreibt die config.js dann neu. Dort steht auch, wenn es von einem Overlay eine neue Fassung gibt; beim Aktualisieren bleiben deine Einstellungen erhalten. Nach jeder Änderung die Browser-Quelle in OBS einmal aktualisieren, sonst läuft dort noch die alte Fassung. Wer lieber selbst schreibt: die config.js ist eine gewöhnliche Textdatei und lässt sich in jedem Editor öffnen.

Häufige Fragen

// Kurz erklärt

Ich sehe nichts, was mache ich falsch?

Prüf drei Dinge in dieser Reihenfolge: ist der Haken bei Lokale Datei gesetzt, zeigt die Quelle auf die widget.html in dem Ordner, den du im Hub gewählt hast, und hast du die Quelle nach der letzten Änderung aktualisiert? Fast jeder Fall ist einer dieser drei.

Muss ich dem Config Hub etwas erlauben?

Einmal den Zugriff auf genau den Ordner, den du selbst auswählst. Dorthin schreibt er, sonst nirgendwohin. Der Rest läuft in deinem Browser: dein Kanalname und die Zugangsdaten deines Bots landen in der config.js auf deiner Festplatte und werden nicht an mich gesendet.

Brauche ich einen Bot?

Für den Anfang nicht. Die Overlays laufen von allein. Ein Bot wird erst nötig, wenn Punkte automatisch ausgezahlt werden sollen. Gemeint ist die Währung deines Chatbots, nicht die Twitch-Kanalpunkte, und wie das geht, steht in der Anleitung zur Streamer.bot-Anbindung.

Läuft das auf Mac und Windows?

Ja, und auf Linux auch. Eine Browser-Quelle gibt es in OBS auf allen drei Systemen. Der Config Hub braucht auf jedem davon Chrome oder Edge; hast du die nicht, bleibt der Weg von Hand aus Schritt 1, und der funktioniert überall.

Kostet das etwas?

Ein Teil der Overlays ist gratis und im Hub sofort startklar, die aufwendigeren schalte ich auf Anfrage frei. Welches wozu gehört, steht im Config Hub an der jeweiligen Karte. Gratis heißt dabei wirklich gratis: kein Abo, kein Konto, kein Server, die Datei läuft bei dir in OBS.

Zuletzt aktualisiert am 31. Juli 2026.

Alle Overlays