# Twitch Overlay in OBS einrichten

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

published: 2026-07-01 | updated: 2026-10-03 | source: https://twitch-overlays.coding-freaks.com/anleitung/twitch-overlay-in-obs-einrichten

Ein Overlay von mir ist eine HTML-Datei, die in [OBS](https://obsproject.com/) läuft. Kein Konto, kein Server, keine Installation.

## 1. Overlay im Config Hub einrichten

Öffne den [Config Hub](https://twitch-overlays.coding-freaks.com/einrichten/). Du wählst dort dein Overlay und trägst deinen Twitch-Kanalnamen ein. Erst beim Speichern fragt er nach einem Ordner auf deiner Festplatte, und mit dem Klick auf Ordner wählen und speichern 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. 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. 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](https://twitch-overlays.coding-freaks.com/overlays/kugelfall) ist es zum Beispiel `!kugel`. Reagiert das Overlay, bist du fertig. Reagiert es nicht, ist es fast immer ein Tippfehler im Kanalnamen.

*Das Kugelfall-Overlay: nach dem Befehl im Chat fallen drei Kugeln durch das Pin-Feld, jede nimmt einen anderen Weg, unten leuchtet die Fächerleiste und der Gewinn wird eingeblendet: Der Moment, auf den es hinausläuft: ein Befehl im Chat, und das Overlay in deiner Szene reagiert. Hier das kostenlose Kugelfall-Overlay.*

## 4. Später etwas ändern

Farben, Befehle, Einsätze und die Auszahlung stellst du im [Config Hub](https://twitch-overlays.coding-freaks.com/einrichten/) 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

### 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](https://twitch-overlays.coding-freaks.com/wissen/twitch-kanalpunkte-einrichten), und wie das geht, steht in der [Anleitung zur Streamer.bot-Anbindung](https://twitch-overlays.coding-freaks.com/anleitung/overlay-mit-streamer-bot-verbinden).

### 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](https://twitch-overlays.coding-freaks.com/einrichten/) an der jeweiligen Karte. Gratis heißt dabei wirklich gratis: kein Abo, kein Konto, kein Server, die Datei läuft bei dir in OBS.