Erste Schritte

Mit den OBS Overlays von BurgerBot kannst du Informationen, Alerts und interaktive Funktionen direkt in deinem Stream anzeigen.

Die Overlays werden als Browserquelle in OBS eingebunden. Du musst dafür keine zusätzlichen Dateien herunterladen oder Programme installieren.

BurgerBot stellt dir für jedes Overlay eine eigene URL zur Verfügung.

Welche Overlays gibt es?

Im Bereich OBS Overlays findest du alle aktuell verfügbaren Overlays für deinen Stream.

Bingo

Zeige dein BurgerBot-Bingo direkt im Stream.

Über „Board bearbeiten“ kannst du dein Bingo konfigurieren und anschließend als Overlay in OBS anzeigen.

Now Playing

Mit dem Now Playing Overlay kannst du den aktuell über Spotify abgespielten Song in deinem Stream anzeigen.

Dafür muss dein Spotify-Account vorher mit BurgerBot verbunden sein.

Stream Alerts

Über Stream Alerts kannst du Twitch-Events direkt als Alerts in deinem Stream anzeigen.

Dazu gehören beispielsweise neue Follower, Subs, Resubs, Subgifts, Raids oder Bits – abhängig von deiner Alert-Konfiguration.

Für deine Alerts benötigst du nur eine einzige Browserquelle in OBS.

Design, Verhalten und Tests der Alerts verwaltest du anschließend zentral über den Bereich Alerts in BurgerBot.

1. Bundesliga Ergebnisse

Mit dem Bundesliga-Overlay kannst du aktuelle Spielstände der 1. Bundesliga direkt in deinem Stream anzeigen.

Das Overlay kann unabhängig vom aktuell gestreamten Spiel oder Inhalt als zusätzliche Stream-Anzeige verwendet werden.

World of Warcraft

Das World-of-Warcraft-Overlay zeigt den letzten Tod auf dem Classic95-Server direkt in deinem Stream an.

Die Daten werden über Classic95 bereitgestellt.

Overlay in OBS einrichten

Die Einrichtung funktioniert bei den BurgerBot-Overlays grundsätzlich immer nach demselben Prinzip.

1. Overlay-URL kopieren

Öffne im BurgerBot-Dashboard:

OBS Overlays

Wähle das gewünschte Overlay aus und kopiere die dafür angezeigte OBS-URL.

Wichtig: Verwende für OBS die normale Overlay-URL ohne ?preview=1. Die Preview-Version ist lediglich für die Vorschau im BurgerBot-Dashboard gedacht.

2. Browserquelle in OBS erstellen

Öffne OBS und wähle in deiner gewünschten Szene unter Quellen:

+ → Browser

Erstelle eine neue Browserquelle und gib ihr beispielsweise einen passenden Namen:

BurgerBot Alerts

BurgerBot Bingo

oder

BurgerBot Now Playing

3. URL einfügen

Füge die zuvor aus BurgerBot kopierte URL in das Feld URL der Browserquelle ein.

Damit lädt OBS das Overlay direkt von deiner BurgerBot-Instanz.

4. Auflösung einstellen

Für Overlays, die über den gesamten Stream gelegt werden, empfehlen wir eine ausreichend große Browserquelle.

Bei einem Stream in Full HD beispielsweise:

Breite: 1920

Höhe: 1080

Das Overlay kannst du anschließend innerhalb deiner OBS-Szene positionieren und skalieren.

Bei kleineren Overlays kannst du Größe und Position natürlich entsprechend deinem Stream-Layout anpassen.

Transparenter Hintergrund

BurgerBot-Overlays sind für die Verwendung mit einem transparenten Hintergrund ausgelegt.

Normalerweise musst du dafür in OBS kein eigenes CSS hinterlegen.

Falls du Custom CSS verwendest, kannst du folgende Einstellungen nutzen:

body { background-color: rgba(0, 0, 0, 0); margin: 0; overflow: hidden; }

Wichtig: Verwende kein eigenes background: black, background: #000 oder eine ähnliche Hintergrundfarbe. Andernfalls kann hinter deinem Overlay eine schwarze Fläche erscheinen.

Stream-Vorschau

Bei unterstützten Overlays zeigt dir BurgerBot direkt im Dashboard eine Stream-Vorschau.

Damit kannst du überprüfen, wie das Overlay ungefähr in deinem Stream aussehen wird, bevor du es in OBS einbindest.

Bei Änderungen am Overlay kannst du die Vorschau ebenfalls nutzen, um deine Einstellungen zu kontrollieren.

Mehrere BurgerBot-Overlays verwenden

Du kannst natürlich mehrere BurgerBot-Overlays gleichzeitig in OBS verwenden.

Beispielsweise:

Browserquelle 1: Stream Alerts
Browserquelle 2: Now Playing
Browserquelle 3: Bingo

Jedes Overlay erhält dafür eine eigene Browserquelle und kann unabhängig von den anderen Quellen positioniert werden.

Änderungen am Overlay

Viele Einstellungen werden direkt über dein BurgerBot-Dashboard vorgenommen.

Du musst die Browserquelle deshalb nicht jedes Mal neu in OBS anlegen, wenn du beispielsweise das Design oder bestimmte Einstellungen eines Overlays änderst.

Solange die URL gleich bleibt, kann die bestehende Browserquelle weiterverwendet werden.

Kurz erklärt

Die Einrichtung eines BurgerBot-Overlays funktioniert grundsätzlich immer gleich:

BurgerBot öffnen

→ gewünschtes Overlay auswählen

→ OBS-URL kopieren

→ in OBS Browserquelle hinzufügen

→ URL einfügen

→ Größe und Position einstellen

→ fertig

Danach kann BurgerBot die entsprechenden Inhalte direkt in deinem Stream anzeigen.