Direkt zum Hauptinhalt

Mein erstes Overlay

Dieser Walkthrough baut ein einfaches "Just Chatting"-Layout: Cam-Rahmen, Chat-Box, Alert. Zielzeit: 10 Minuten. Wir nutzen den Standard-Weg über den Pro Editor (/dashboard/overlays), weil das heute der Weg ist, den ein Klick auf + Neues Overlay tatsächlich öffnet. Wer lieber im schlanken Legacy-Builder ohne Canvas arbeitet, findet die Entsprechungen in Klammern.

Schritt 1: Overlay anlegen

  1. Dashboard öffnen, links im Menü « Pro Editor » (nicht mehr "Overlays" - der Menüpunkt heißt heute so).
  2. Falls du noch kein Overlay hast: Empty-State bietet 📦 Starter-Pack installieren (fertiges Alert-Overlay + Leaderboard-Widget) oder 🎬 OBS-Setup-Assistent (geführter Onboarding-Wizard unter /dashboard/overlays/setup). Für diesen Walkthrough: + Neues Overlay.
  3. Namen vergeben, z. B. Just Chatting v1, mit « Anlegen » bestätigen.
  4. Du landest direkt im Canvas-Editor (/overlay/editor.php), leere 1920×1080-Fläche.

Es gibt hier keine Szenen-Vorlage "Just Chatting" mehr zum Anklicken. Korrektur (Code-Check 2026-07-08): Die an dieser Stelle vorher genannten Layout-Packs (Neon Gaming, Cozy Stream, Minimal Clean u. a.) über einen Presets-Dialog gibt es im echten Canvas-Editor (/overlay/editor.php, overlay-editor.js) nicht - dieser Code ist nur an den retirierten Legacy-Builder () angebunden und für dich hier nicht erreichbar. Für diesen Walkthrough bauen wir daher ohnehin manuell, damit du jedes Element kennenlernst.

Schritt 2: Webcam-Rahmen anlegen

Ziehe das Element Webcam aus der linken Palette auf die Fläche, oben links:

  • Position: per Drag oder rechts im Panel x/y direkt eintragen (z. B. x=60, y=60)
  • Größe: ca. 480×480 px für einen quadratischen Rahmen
  • Form/Rahmen: Eigenschaften-Panel rechts, Rahmenfarbe deiner Marke

Wichtig: Das Webcam-Element im Overlay ist nur ein Platzhalter/Rahmen - es liefert kein echtes Kamerabild. Die echte Webcam legst du in OBS als eigene Quelle unter der Browser-Source-Quelle des Overlays, exakt an der gleichen Position/Größe ausgerichtet. Ein Live-Video-Element mit echtem Kamera-Sync (LiveKit-Anbindung) gibt es separat für Team-/Regie-Setups - siehe Book Pro Editor → Verfügbare APIs im Overlay.

Schritt 3: Chat-Box

Ziehe Chat-Box auf die Fläche, z. B. unten links. Eigenschaften rechts:

  • Zeilen/Max. Nachrichten: z. B. 7-12
  • Akzentfarbe passend zum Rest des Layouts
  • Größe/Position per Drag oder x/y/width/height-Feldern

Chatlix zieht automatisch den Live-Chat der verbundenen Plattform (Twitch/YouTube/Kick). Kommt nichts an: Verbindung unter /dashboard/integrations prüfen - abgelaufene Tokens sind die häufigste Ursache.

Schritt 4: Alert

Für einen klassischen Alert-Einblendtext nutzt du entweder:

  • Live Alert-Box: blendet deine bestehenden, zentral konfigurierten Alert-Animationen (Follow/Sub/Cheer/Raid/Tip) ein/aus - kein eigenes Aussehen im Editor, sondern Steuerung der Standard-Alerts.
  • Alert-Element (Editor): ein eigenständiges, optisch frei konfigurierbares Alert-Objekt direkt im Layout, inklusive Test-Trigger für die Vorschau (kein echtes Event nötig).

Für den Walkthrough: Alert-Element aufs Layout ziehen, mittig oben platzieren, Testlauf über den Test-Trigger im Eigenschaften-Panel prüfen.

Schritt 5: Speichern und in OBS

  1. Oben « Speichern ».
  2. « Browser-Source-URL » kopieren (Format /overlay/view.php?token=<token>, ggf. mit &scene=-Parameter bei mehreren Szenen).
  3. OBS öffnen, in deiner Szene + → Browser-Quelle.
  4. URL einfügen, Width 1920, Height 1080, FPS 60 - Details/typische Fallstricke stehen in Book Browser Source Setup → Empfohlene Settings.
  5. OK.

Die Webcam-Quelle (echte Hardware) legst du unter die Browser-Source, damit das Overlay drüber liegt.

Schritt 6: Test

Im Dashboard über das Overlay-Element den Test-Trigger auslösen (Alert-Element) oder über den Onboarding-Wizard Api.overlayTestAlert() nutzen - das ist eine echte Zustellung, kein Fake-Event, du bekommst einen ehrlichen Zustellstatus zurück. Wenn der Alert in OBS erscheint: läuft. Wenn nicht: erst « Overlay Debug » (/dashboard/overlay-debug) im Dashboard checken, danach Book Pro Editor → Pro Editor Troubleshooting.

Was kommt danach?

  • Mehrere Szenen (Starting Soon, Gameplay, BRB, Ending): kein neues Overlay pro Szene nötig - im Pro Editor legst du mehrere Szenen innerhalb desselben Overlays an (Szenen-Selector oben), sie teilen sich URL und Token, das Umschalten läuft per &scene=-Parameter. Details: Book Pro Editor → Pro Editor Grundlagen.
  • Mehr Elemente pro Layout: im Legacy-Builder wird's ab ~5 Elementen unübersichtlich, weil es keine manuelle Z-Reihenfolge gibt - im Pro Editor (Layer-Liste, Tastenkürzel [/]) skaliert das deutlich besser, bis zum Tarif-Limit (siehe [Overlay Builder Grundlagen]).
  • KI-gestützt bauen: /dashboard/ai-builder (Pro-Tarif) baut dir ein Layout aus einer Textbeschreibung.
  • Externe Regie: /dashboard/regie - Regie-Pult, mit dem eine zweite Person live Overlay-Elemente ein-/ausblendet, ohne den Editor zu öffnen.