Streamlabs Integration

Information

Streamlabs ist eine beliebte All-in-One-Streaming-Software, die auf OBS-Technologie basiert und zusätzliche Features, Alerts und Integrationen bietet. Das Einbinden von gettickr.app Timern in Streamlabs ist schnell und einfach!

In dieser Anleitung erfährst du, wie du gettickr.app Countdown-Timer in dein Streamlabs-Setup einbindest – über die Browserquellen-Funktion.

Was du benötigst

Voraussetzung	Details
Streamlabs	Desktop-App (Download)
gettickr.app Timer	Erstellt auf gettickr.app
Timer-URL	Anzeige-/Renderer-URL deines Timers
Internetverbindung	Wird für die Browserquelle benötigt

Tip

Streamlabs nutzt dieselbe Browserquellen-Technologie wie OBS Studio. Wenn du OBS kennst, kommt dir der Ablauf sehr bekannt vor!

Schritt-für-Schritt-Anleitung

Schritt 1: Timer erstellen und vorbereiten

Bevor du den Timer in Streamlabs einfügst, erstelle ihn auf gettickr.app:

Öffne den Editor
Erstelle und gestalte deinen Timer (Dauer, Farben, Schriftarten, Layout)
Wechsle zum Bereich Renderer
Kopiere die Anzeige-URL, z.B.: https://gettickr.app/r/#DEIN-TIMER-ID

Premium Feature

Speichere deinen Timer zuerst, um eine stabile URL zu erhalten. Premium-Timer behalten ihre URL auch nach Änderungen. Bei kostenlosen Timern wird mit jeder Änderung eine neue URL generiert.

Schritt 2: Browserquelle in Streamlabs hinzufügen

Jetzt fügst du den Timer deiner Szene hinzu:

Öffne Streamlabs und wähle die gewünschte Szene
Klicke im Quellen-Panel auf das „+“ (Plus)
Wähle „Browserquelle“ aus der Liste
Gib einen aussagekräftigen Namen ein (z.B. „Countdown Timer“, „Pausen-Timer“, „Event-Countdown“)
Klicke auf „Quelle hinzufügen“

Schritt 3: Browserquellen-Einstellungen konfigurieren

Stelle die Browserquelle so ein, dass dein gettickr.app Timer korrekt angezeigt wird:

Einstellung	Empfohlener Wert	Hinweise
URL	`https://gettickr.app/r/#DEIN-TIMER-ID`	Hier die Timer-URL einfügen
Breite	`1920`	Entspricht der Timer-Designbreite
Höhe	`1080`	Entspricht der Timer-Designhöhe
FPS	`30`	Für flüssige Animation ausreichend
CSS	Leer lassen	Nicht benötigt
Quelle bei Unsichtbarkeit abschalten	⚠️ Optional	Spart Ressourcen, kann Timer aber zurücksetzen
Browser beim Szenenwechsel neu laden	⬜️ Meist deaktiviert	Nur aktivieren, wenn Timer neu laden soll

Warning

Wenn „Quelle bei Unsichtbarkeit abschalten“ aktiviert ist, kann der Timer beim Szenenwechsel zurückgesetzt werden. Teste dies je nach Workflow!

Klicke auf „Fertig“, um die Browserquelle hinzuzufügen.

Schritt 4: Positionieren und Anpassen

Dein Timer erscheint jetzt im Szenen-Editor:

Verschieben: Ziehe den Timer an die gewünschte Position
Größe ändern: Ziehe an den roten Ecken
Proportional skalieren: Halte Shift beim Ziehen
Position sperren: Rechtsklick → Sperren, um versehentliches Verschieben zu verhindern
Feinjustierung: Mit den Pfeiltasten pixelgenau verschieben

Schnellaktion	Shortcut	Zweck
Horizontal zentrieren	Transform-Menü	Schnelles Zentrieren
Vertikal zentrieren	Transform-Menü	Schnelles Zentrieren
Auf Bildschirmgröße	Transform-Menü	Vollbild-Timer
Transformation zurück	Transform-Menü	Ursprungsgröße wiederherstellen

Streamlabs-spezifische Features

Widget-Integration

Streamlabs bietet ein eigenes Widget-System. gettickr.app Timer funktionieren als Browserquelle unabhängig davon:

Feature	Streamlabs Widgets	gettickr.app Timer
Anpassung	Begrenzte Vorlagen	Vollständig anpassbar
Außerhalb Streamlabs	❌ Nein	✅ Ja (Web, OBS, XSplit)
Fernsteuerung	⬜️ Eingeschränkt	✅ Ja (Premium)
Design-Freiheit	⬜️ Vorlagenbasiert	✅ Volle Kontrolle
Stabile URLs	N/A	✅ Ja (Premium)

Information

Nutze gettickr.app Timer als Browserquelle für maximale Flexibilität. Sie funktionieren parallel zu Streamlabs-Widgets ohne Konflikte!

Szenensammlungen

Mit Szenensammlungen kannst du verschiedene Timer für unterschiedliche Stream-Typen vorbereiten:

Erstelle verschiedene Sammlungen (z.B. Standard, Event, Just Chatting)
Füge passende Timer zu jeder Sammlung hinzu
Wechsle zwischen Sammlungen, um das gesamte Setup zu ändern

Streamlabs-Themes

Platziere deinen Timer so, dass er zum Theme passt:

Overlay-Themes: Timer in vorgesehene Overlay-Bereiche einfügen
Alert-Themes: Timer nicht über Alerts platzieren
Chatbox-Themes: Timer nicht über den Chat legen
Kamera-Frame-Themes: Timer in freie Bereiche integrieren

Fernsteuerung mit Streamlabs

Premium-Fernsteuerung

Mit einem Premium-Konto kannst du deinen Timer während des Streams fernsteuern:

Setup:

Öffne den Editor in einem Browser-Tab oder auf einem zweiten Monitor
Lade deinen gespeicherten Premium-Timer
Halte den Editor während des Streams geöffnet

Steuerungsfunktionen:

Aktion	Was passiert	Wann sinnvoll
Start	Countdown beginnt	Streamstart, Pausenbeginn
Pause	Timer wird angehalten	Unterbrechungen, Verlängerung
Reset	Timer auf Anfang zurück	Countdown neu starten
Dauer anpassen	Zeit während Stream ändern	Pausen verlängern/kürzen
Design ändern	Farben, Schrift etc. anpassen	Branding anpassen

Premium Feature

Alle Änderungen werden sofort in Streamlabs übernommen! Kein Neuladen oder URL-Wechsel nötig.

Feature	Kostenloser Timer	Premium-Timer
In Streamlabs einbinden	✅ Ja	✅ Ja
Fernsteuerung	❌ Nein	✅ Ja
URL nach Änderungen	❌ Wechselt	✅ Bleibt gleich
Timer speichern	❌ Nein	✅ Ja
Status speichern	❌ Nein	✅ Ja

Mehrere Timer in Streamlabs

Viele Streamer nutzen mehrere Timer. Häufige Strategien:

Strategie 1: Mehrere Szenen

Erstelle für jeden Zweck eine eigene Szene:

Szenenname	Timer-Zweck	Timer-Typ
Starting Soon	Pre-Stream-Countdown	CountTo (fester Startzeitpunkt)
BRB	Pausen-Timer	Countdown (5–15 Min.)
Live	Event-Countdown-Overlay	CountTo (zukünftiges Event)
Ending Soon	Stream-Ende-Countdown	Countdown (10 Min.)

Vorteil: Übersichtliche Organisation, einfacher Szenenwechsel

Strategie 2: Mehrere Quellen in einer Szene

Füge mehrere Browserquellen in eine Szene ein und schalte sie sichtbar/unsichtbar:

Mehrere Browserquellen mit unterschiedlichen Timer-URLs anlegen
Sichtbarkeit je nach Bedarf umschalten
Hotkeys für schnelles Umschalten nutzen

Vorteil: Schnelles Wechseln, weniger Szenen nötig

Strategie 3: Szenen-Layer

Lege verschiedene Timer auf unterschiedliche Layer:

Hintergrund: Immer sichtbarer Event-Countdown
Vordergrund: Pausen-Timer, der bei Bedarf eingeblendet wird
Overlay: Spezielle Timer für Aktionen/Gewinnspiele

Häufige Probleme & Lösungen

Timer wird nicht angezeigt

Problem	Ursache	Lösung
Schwarze/leere Browserquelle	Falsche URL	Prüfe, ob die URL mit `https://gettickr.app/r/#` beginnt
Timer abgeschnitten	Quelle zu klein	Breite/Höhe anpassen
Timer hinter anderen Quellen	Layer-Reihenfolge	Quelle nach oben verschieben
Nichts lädt	Keine Internetverbindung	Netzwerk prüfen

Timer-Verhalten

Problem	Ursache	Lösung
Timer setzt sich beim Szenenwechsel zurück	„Quelle bei Unsichtbarkeit abschalten“ aktiviert	Deaktiviere diese Option
Timer aktualisiert sich nach Änderung nicht (free)	Neue URL generiert	Neue URL kopieren und in Browserquelle einfügen
Fernsteuerung funktioniert nicht (Premium)	Editor geschlossen	Editor-Tab geöffnet lassen
Timer eingefroren	Browserquelle pausiert	Rechtsklick → Quelle neu laden

Warning

Kostenlose Timer erzeugen bei jeder Änderung eine neue URL. Du musst die Browserquellen-URL in Streamlabs nach jeder Änderung aktualisieren. Premium-Timer behalten ihre URL!

Performance-Probleme

Symptom	Lösung
Streamlabs ruckelt	Auflösung/FPS der Browserquelle reduzieren
Hohe CPU-Auslastung	„Quelle bei Unsichtbarkeit abschalten“ für ungenutzte Timer aktivieren
Ruckelige Animation	FPS der Browserquelle auf 30 erhöhen
Encoding-Probleme	Unnötige Browserquellen schließen

Tip

Browserquellen sind bei richtiger Konfiguration sehr ressourcenschonend. Jeder gettickr.app Timer benötigt nur minimal CPU/GPU!

Nächste Schritte

XSplit Integration – Alternative Streaming-Software
Timer fernsteuern – Premium-Fernsteuerung kennenlernen
Design anpassen – Timer ans Stream-Branding anpassen

Streamlabs Integration

Information

In dieser Anleitung erfährst du, wie du gettickr.app Countdown-Timer in dein Streamlabs-Setup einbindest – über die Browserquellen-Funktion.

Was du benötigst

Voraussetzung	Details
Streamlabs	Desktop-App (Download)
gettickr.app Timer	Erstellt auf gettickr.app
Timer-URL	Anzeige-/Renderer-URL deines Timers
Internetverbindung	Wird für die Browserquelle benötigt

Tip

Streamlabs nutzt dieselbe Browserquellen-Technologie wie OBS Studio. Wenn du OBS kennst, kommt dir der Ablauf sehr bekannt vor!

Schritt-für-Schritt-Anleitung

Schritt 1: Timer erstellen und vorbereiten

Bevor du den Timer in Streamlabs einfügst, erstelle ihn auf gettickr.app:

Öffne den Editor
Erstelle und gestalte deinen Timer (Dauer, Farben, Schriftarten, Layout)
Wechsle zum Bereich Renderer
Kopiere die Anzeige-URL, z.B.: https://gettickr.app/r/#DEIN-TIMER-ID

Premium Feature

Speichere deinen Timer zuerst, um eine stabile URL zu erhalten. Premium-Timer behalten ihre URL auch nach Änderungen. Bei kostenlosen Timern wird mit jeder Änderung eine neue URL generiert.

Schritt 2: Browserquelle in Streamlabs hinzufügen

Jetzt fügst du den Timer deiner Szene hinzu:

Öffne Streamlabs und wähle die gewünschte Szene
Klicke im Quellen-Panel auf das „+“ (Plus)
Wähle „Browserquelle“ aus der Liste
Gib einen aussagekräftigen Namen ein (z.B. „Countdown Timer“, „Pausen-Timer“, „Event-Countdown“)
Klicke auf „Quelle hinzufügen“

Schritt 3: Browserquellen-Einstellungen konfigurieren

Stelle die Browserquelle so ein, dass dein gettickr.app Timer korrekt angezeigt wird:

Einstellung	Empfohlener Wert	Hinweise
URL	`https://gettickr.app/r/#DEIN-TIMER-ID`	Hier die Timer-URL einfügen
Breite	`1920`	Entspricht der Timer-Designbreite
Höhe	`1080`	Entspricht der Timer-Designhöhe
FPS	`30`	Für flüssige Animation ausreichend
CSS	Leer lassen	Nicht benötigt
Quelle bei Unsichtbarkeit abschalten	⚠️ Optional	Spart Ressourcen, kann Timer aber zurücksetzen
Browser beim Szenenwechsel neu laden	⬜️ Meist deaktiviert	Nur aktivieren, wenn Timer neu laden soll

Warning

Wenn „Quelle bei Unsichtbarkeit abschalten“ aktiviert ist, kann der Timer beim Szenenwechsel zurückgesetzt werden. Teste dies je nach Workflow!

Klicke auf „Fertig“, um die Browserquelle hinzuzufügen.

Schritt 4: Positionieren und Anpassen

Dein Timer erscheint jetzt im Szenen-Editor:

Verschieben: Ziehe den Timer an die gewünschte Position
Größe ändern: Ziehe an den roten Ecken
Proportional skalieren: Halte Shift beim Ziehen
Position sperren: Rechtsklick → Sperren, um versehentliches Verschieben zu verhindern
Feinjustierung: Mit den Pfeiltasten pixelgenau verschieben

Schnellaktion	Shortcut	Zweck
Horizontal zentrieren	Transform-Menü	Schnelles Zentrieren
Vertikal zentrieren	Transform-Menü	Schnelles Zentrieren
Auf Bildschirmgröße	Transform-Menü	Vollbild-Timer
Transformation zurück	Transform-Menü	Ursprungsgröße wiederherstellen

Streamlabs-spezifische Features

Widget-Integration

Streamlabs bietet ein eigenes Widget-System. gettickr.app Timer funktionieren als Browserquelle unabhängig davon:

Feature	Streamlabs Widgets	gettickr.app Timer
Anpassung	Begrenzte Vorlagen	Vollständig anpassbar
Außerhalb Streamlabs	❌ Nein	✅ Ja (Web, OBS, XSplit)
Fernsteuerung	⬜️ Eingeschränkt	✅ Ja (Premium)
Design-Freiheit	⬜️ Vorlagenbasiert	✅ Volle Kontrolle
Stabile URLs	N/A	✅ Ja (Premium)

Information

Nutze gettickr.app Timer als Browserquelle für maximale Flexibilität. Sie funktionieren parallel zu Streamlabs-Widgets ohne Konflikte!

Szenensammlungen

Mit Szenensammlungen kannst du verschiedene Timer für unterschiedliche Stream-Typen vorbereiten:

Erstelle verschiedene Sammlungen (z.B. Standard, Event, Just Chatting)
Füge passende Timer zu jeder Sammlung hinzu
Wechsle zwischen Sammlungen, um das gesamte Setup zu ändern

Streamlabs-Themes

Platziere deinen Timer so, dass er zum Theme passt:

Overlay-Themes: Timer in vorgesehene Overlay-Bereiche einfügen
Alert-Themes: Timer nicht über Alerts platzieren
Chatbox-Themes: Timer nicht über den Chat legen
Kamera-Frame-Themes: Timer in freie Bereiche integrieren

Fernsteuerung mit Streamlabs

Premium-Fernsteuerung

Mit einem Premium-Konto kannst du deinen Timer während des Streams fernsteuern:

Setup:

Öffne den Editor in einem Browser-Tab oder auf einem zweiten Monitor
Lade deinen gespeicherten Premium-Timer
Halte den Editor während des Streams geöffnet

Steuerungsfunktionen:

Aktion	Was passiert	Wann sinnvoll
Start	Countdown beginnt	Streamstart, Pausenbeginn
Pause	Timer wird angehalten	Unterbrechungen, Verlängerung
Reset	Timer auf Anfang zurück	Countdown neu starten
Dauer anpassen	Zeit während Stream ändern	Pausen verlängern/kürzen
Design ändern	Farben, Schrift etc. anpassen	Branding anpassen

Premium Feature

Alle Änderungen werden sofort in Streamlabs übernommen! Kein Neuladen oder URL-Wechsel nötig.

Feature	Kostenloser Timer	Premium-Timer
In Streamlabs einbinden	✅ Ja	✅ Ja
Fernsteuerung	❌ Nein	✅ Ja
URL nach Änderungen	❌ Wechselt	✅ Bleibt gleich
Timer speichern	❌ Nein	✅ Ja
Status speichern	❌ Nein	✅ Ja

Mehrere Timer in Streamlabs

Viele Streamer nutzen mehrere Timer. Häufige Strategien:

Strategie 1: Mehrere Szenen

Erstelle für jeden Zweck eine eigene Szene:

Szenenname	Timer-Zweck	Timer-Typ
Starting Soon	Pre-Stream-Countdown	CountTo (fester Startzeitpunkt)
BRB	Pausen-Timer	Countdown (5–15 Min.)
Live	Event-Countdown-Overlay	CountTo (zukünftiges Event)
Ending Soon	Stream-Ende-Countdown	Countdown (10 Min.)

Vorteil: Übersichtliche Organisation, einfacher Szenenwechsel

Strategie 2: Mehrere Quellen in einer Szene

Füge mehrere Browserquellen in eine Szene ein und schalte sie sichtbar/unsichtbar:

Mehrere Browserquellen mit unterschiedlichen Timer-URLs anlegen
Sichtbarkeit je nach Bedarf umschalten
Hotkeys für schnelles Umschalten nutzen

Vorteil: Schnelles Wechseln, weniger Szenen nötig

Strategie 3: Szenen-Layer

Lege verschiedene Timer auf unterschiedliche Layer:

Hintergrund: Immer sichtbarer Event-Countdown
Vordergrund: Pausen-Timer, der bei Bedarf eingeblendet wird
Overlay: Spezielle Timer für Aktionen/Gewinnspiele

Häufige Probleme & Lösungen

Timer wird nicht angezeigt

Problem	Ursache	Lösung
Schwarze/leere Browserquelle	Falsche URL	Prüfe, ob die URL mit `https://gettickr.app/r/#` beginnt
Timer abgeschnitten	Quelle zu klein	Breite/Höhe anpassen
Timer hinter anderen Quellen	Layer-Reihenfolge	Quelle nach oben verschieben
Nichts lädt	Keine Internetverbindung	Netzwerk prüfen

Timer-Verhalten

Problem	Ursache	Lösung
Timer setzt sich beim Szenenwechsel zurück	„Quelle bei Unsichtbarkeit abschalten“ aktiviert	Deaktiviere diese Option
Timer aktualisiert sich nach Änderung nicht (free)	Neue URL generiert	Neue URL kopieren und in Browserquelle einfügen
Fernsteuerung funktioniert nicht (Premium)	Editor geschlossen	Editor-Tab geöffnet lassen
Timer eingefroren	Browserquelle pausiert	Rechtsklick → Quelle neu laden

Warning

Kostenlose Timer erzeugen bei jeder Änderung eine neue URL. Du musst die Browserquellen-URL in Streamlabs nach jeder Änderung aktualisieren. Premium-Timer behalten ihre URL!

Performance-Probleme

Symptom	Lösung
Streamlabs ruckelt	Auflösung/FPS der Browserquelle reduzieren
Hohe CPU-Auslastung	„Quelle bei Unsichtbarkeit abschalten“ für ungenutzte Timer aktivieren
Ruckelige Animation	FPS der Browserquelle auf 30 erhöhen
Encoding-Probleme	Unnötige Browserquellen schließen

Tip

Browserquellen sind bei richtiger Konfiguration sehr ressourcenschonend. Jeder gettickr.app Timer benötigt nur minimal CPU/GPU!

Nächste Schritte

XSplit Integration – Alternative Streaming-Software
Timer fernsteuern – Premium-Fernsteuerung kennenlernen
Design anpassen – Timer ans Stream-Branding anpassen