Installationsanleitung

Deine Alerts, in Minuten installiert

Die komplette Anleitung für FrameWork Alerts in OBS und Streamlabs – als Video und Schritt für Schritt zum Nachlesen.

Streamlabs + OBS

Jeder FrameWork-Alert wird gleich installiert: eine Browser Source in OBS, eine Variante „Text Over Image“ in Streamlabs und die Custom Fields aus deinem Download. Sieh dir das Video einmal an oder folge den Schritten unten.

Komplette Videoanleitung, auf Englisch · Streamlabs + OBS

Teil 1

Die Browser Source in OBS einrichten

  1. Öffne deine Alert-Plattform (Streamlabs) und geh zum Bereich „Alerts“.

  2. Wähle den Alert-Typ, den du einrichten willst (Followers, Subscribers, Donations usw.), und deaktiviere alle Alert-Typen, die du nicht für Vollbild-Alerts nutzt.

  3. Kopiere die Widget-URL, die die Plattform anzeigt.

  4. Öffne OBS → neue Quelle hinzufügen → Browser Source wählen → eindeutig benennen (z. B. Alerts - Fullscreen).

  5. Füge die kopierte URL in das Feld „URL“ ein.

  6. Stell Width und Height auf deine Canvas-Auflösung ein:

    • Du findest sie in OBS unter Settings → Video → Base (Canvas) Resolution

  7. Aktiviere „Shutdown source when not visible“.

  8. Klick auf OK und achte darauf, dass diese Browser Source ganz oben in deiner Quellenliste steht, über allen anderen Quellen.

Teil 2

Die Alert-Variante konfigurieren

  1. Füge auf deiner Alert-Plattform eine neue Variante für den gewählten Alert-Typ hinzu und gib ihr einen eindeutigen Namen.

  2. Stell das Layout auf „Text Over Image“ (nötig, damit der Alert richtig angezeigt wird).

  3. Zieh im Bereich „Image“ deine Alert-Datei hinein und klick dann auf „Select“.

  4. Stell die Alert Duration ein:

    • Spiel den Alert ab und notiere die gesamte Dauer.
    • Zieh 1 Sekunde davon ab und trag den Wert ins Feld „Alert Duration“ ein.
    • Beispiel: Dauert der Alert 35 Sekunden → trag 34 Sekunden ein.

  5. Sound → auf Standard lassen (ignorieren).

  6. Alert Animation → auf Fade In / Fade Out stellen (empfohlen).

  7. Text Animation & Font → nach deinem Geschmack anpassen.

Teil 3

Eigenes HTML / CSS / JS hinzufügen

  1. Aktiviere den Schalter „Custom HTML/CSS“.

  2. Geh zurück in deinen Alert-Ordner und öffne die Datei „Custom Fields — For Full Screen Alerts“.

  3. Kopiere jede Datei in den passenden Bereich auf der Plattform:

    • HTML → in den Tab „HTML“
    • CSS → in den Tab „CSS“
    • JS → in den Tab „JS“

  4. Klick auf „Custom Fields“ → „Edit Custom Fields“ → füge den Inhalt der Custom-Fields-Datei ein.

  5. Klick auf „Update Custom Fields“ und dann auf „Save“ (unten rechts).

Teil 4

Feinabstimmung über die Custom Fields

Öffne nach dem Speichern die Custom Fields, um diese Optionen zu erreichen:

Text DelaySpiel den Alert ab und pausiere, wenn der Bildschirm schwarz wird. Notiere den Zeitpunkt – jeder Alert hat am Ende etwa 4 Sekunden Schwarzbild. Trag genau diesen Zeitpunkt hier ein.
Text Horizontal PositionSteuert die Position des Texts nach links/rechts. Für die Mitte auf 50 stellen.
Text Vertical PositionSteuert die Position des Texts nach oben/unten. Für die Mitte auf 50 stellen.
Alert VolumeStandardmäßig voroptimiert. Bei Bedarf leiser stellen.

Wenn alles eingestellt ist, klick auf „Test Alert“, um zu prüfen, ob alles richtig funktioniert.

Teil 5

Kleine Alerts im selben Bereich reparieren

Hast du in derselben Kategorie einen Vollbild-Alert und einen kleinen Alert (z. B. Vollbild-Follower-Alert + kleiner Follower-Alert), wird der kleine Alert falsch skaliert, weil beide denselben Widget-Link nutzen. So behebst du das.

  1. Öffne die Variante des kleinen Alerts.

  2. Aktiviere „Custom HTML/CSS“.

  3. Geh zurück in deinen Alert-Ordner und öffne „Custom Fields — For Non-Full-Screen Alerts“.

  4. Kopiere jede Datei in den richtigen Tab:

    • HTML → Tab „HTML“
    • CSS → Tab „CSS“
    • JS → Tab „JS“

  5. Klick auf „Edit Custom Fields“ → füge den Inhalt der Custom-Fields-Datei ein → klick auf „Update Custom Fields“ → klick auf „Save“.

  6. Öffne die Custom Fields dieser Variante und stell Folgendes ein:

    • Horizontal Position: auf 50
    • Vertical Position: auf 25
    • Image Size: bestimmt, wie groß der Alert erscheint
    • Alert Layout: über die eingebaute Layout-Option der Plattform auf „Image Above“ stellen (nicht über die Custom Fields)

Deine Alerts sind jetzt vollständig installiert und eingerichtet. Wenn Probleme auftauchen, schick uns über unsere Website ein Support-Ticket, und wir melden uns so schnell wie möglich.

Hängst du bei einem Schritt fest?

Schick uns ein Support-Ticket mit deiner Plattform und dem Schritt, bei dem du bist, und das Studio führt dich durch.

Support-Ticket senden