Streamlabs Integration

This guide shows you how to integrate gettickr.app countdown timers into your Streamlabs setup using browser sources.

What You Need

Step-by-Step Integration

Step 1: Create and Prepare Your Timer

Before adding the timer to Streamlabs, set it up in gettickr.app:

1. Open the Editor
2. Create and customize your timer (duration, colors, fonts, layout)
3. Navigate to the Renderer section
4. Copy the display URL, looks like: https://gettickr.app/r/#YOUR-TIMER-ID

Step 2: Add Browser Source in Streamlabs

Now add the timer to your scene:

1. Open Streamlabs and select your desired scene
2. In the Sources panel, click the "+" (plus) icon
3. Select "Browser Source" from the source type list
4. Give it a descriptive name (e.g., "Countdown Timer", "Break Timer", "Event Countdown")
5. Click "Add Source"

Step 3: Configure Browser Source Settings

Configure the browser source to display your gettickr.app timer:

Click "Done" to add the browser source.

Step 4: Position and Resize

Your timer now appears in the scene editor:

1. Move: Click and drag the timer to your desired position
2. Resize: Drag the red corner handles to adjust size
3. Proportional scaling: Hold Shift while dragging corners
4. Lock position: Right-click → Lock to prevent accidental moves
5. Fine adjustments: Use arrow keys for pixel-perfect positioning

Streamlabs-Specific Features

Widget Integration

Streamlabs has a widget system. While gettickr.app timers work great as browser sources, they're separate from Streamlabs' built-in widgets:

Scene Collections

Streamlabs' scene collections feature works perfectly with gettickr.app timers:

1. Create different scene collections for different stream types
2. Add appropriate timers to each collection
3. Switch between collections to change your entire stream setup

Example Collections:

Streamlabs Themes

When using Streamlabs themes, position your gettickr.app timer to complement the theme design:

• Overlay themes: Place timer in designated overlay areas
• Alert themes: Ensure timer doesn't overlap with alert positions
• Chat box themes: Position timer to avoid blocking chat
• Camera frame themes: Integrate timer into empty spaces

Remote Control with Streamlabs

Premium Remote Control

With a Premium gettickr.app account, you can control your timer while streaming:

Setup:

1. Open Editor in a browser tab or on a second monitor
2. Load your saved Premium timer
3. Keep the editor open during your stream

Control Functions:

Multiple Timers in Streamlabs

Many streamers use multiple timers for different purposes. Here are common strategies:

Strategy 1: Multiple Scenes

Create separate scenes for different timer uses:

Benefits: Clean organization, complete scene control, easy switching

Strategy 2: Multiple Sources in One Scene

Add several browser sources to the same scene and toggle visibility:

1. Add multiple browser sources with different timer URLs
2. Set visibility for each timer
3. Use hotkeys to show/hide timers as needed
4. Only one timer visible at a time

Benefits: Quick switching, single scene management, less complexity

Strategy 3: Scene Layers

Layer different timers for different purposes:

• Background layer: Always-visible event countdown
• Foreground layer: Break timer that appears when needed
• Overlay layer: Special event timer for giveaways

Common Issues & Solutions

Timer Not Appearing

Timer Behavior Issues

Performance Problems

Next Steps

• XSplit Integration - Alternative streaming software guide
• Remote Control - Learn about Premium remote control features
• Customize Design - Make your timer match your stream branding