OBS Studio Integration
Information
OBS Studio is the most popular free, open-source streaming software.
Integrating gettickr.app timers into OBS is quick and easy using browser
sources!
This guide walks you through adding gettickr.app countdown timers to your OBS Studio setup, from initial configuration to advanced streaming workflows.
Requirements
Before you begin, make sure you have:
| Requirement | Details |
|---|---|
| OBS Studio | Version 28.0 or higher recommended (Download) |
| gettickr.app Timer | Created and customized at gettickr.app |
| Timer URL | The display/renderer URL for your timer |
| Internet Connection | Required for browser source to load timer |
Step-by-Step Integration Guide
Step 1: Create Timer and Copy URL
First, you need to create your timer and get its display URL:
- Go to the Editor
- Create and customize your timer (design, duration, colors)
- In the Renderer section, find your timer's display URL
- Copy the complete URL, looks like:
https://gettickr.app/r/#YOUR-TIMER-ID
Tip
Premium users: Save your timer first to get a stable URL that won't
change. Free timers generate new URLs with each edit.
Step 2: Add Browser Source in OBS
Now add the timer to your OBS scene:
- Open OBS Studio and select the scene where you want the timer
- In the Sources panel, click the "+" button
- Select "Browser" from the source type list
- Give your source a descriptive name (e.g., "Countdown Timer" or "Break Timer")
- Click OK
Information
You can rename sources later by right-clicking them in the Sources
panel and selecting "Rename".
Step 3: Configure Browser Source Settings
In the Browser Source properties window, configure these settings:
| Setting | Value | Notes |
|---|---|---|
| URL | https://gettickr.app/r/#YOUR-TIMER-ID | Replace with your actual timer URL |
| Width | 1920 | Match your timer's design width |
| Height | 1080 | Match your timer's design height |
| FPS | 30 | Sufficient for smooth countdown animation |
| CSS | Leave empty | Not needed for gettickr.app timers |
| Shutdown source when not visible | ✅ Recommended | Saves resources |
| Refresh browser when scene becomes active | ✅ Recommended | Ensures timer is current |
| Control audio via OBS | ⬜ Disabled | Timers don't produce audio |
Tip
Not sure about width and height? Use the dimensions you set when
designing your timer in the editor. Common sizes: 1920×1080 (full screen),
800×600 (overlay), 400×200 (small corner timer). negligible performance
impact!
Click OK to create the browser source.
Step 4: Position and Scale Timer
Your timer now appears in the OBS preview. Position and resize it:
- Move: Click and drag the timer to your desired position
- Resize: Drag corner handles to adjust size
- Proportional scaling: Hold Shift while dragging to maintain aspect ratio
- Align: Right-click → Transform → for alignment options
- Lock: Right-click → Lock to prevent accidental movement
| Transform Option | Shortcut | Use Case |
|---|---|---|
| Edit Transform | Ctrl+E | Precise positioning with numbers |
| Reset Transform | None | Return to original size |
| Center to Screen | None | Quick centering |
| Stretch to Screen | None | Full-screen timer |
Warning
If your timer appears pixelated or blurry, increase the browser
source width and height to match your stream resolution. OBS scales sources to
their native resolution.
OBS Scene Setup Ideas
| Scene Type | Timer Placement | Typical Size | Common Use |
|---|---|---|---|
| Starting Soon | Center, full-screen | 1920×1080 | Pre-stream countdown |
| BRB / Break | Center or top-center | 800×400 | Stream breaks |
| Gaming Overlay | Top-right corner | 300×150 | Event countdown during gameplay |
| Subathon | Persistent top bar | 1920×100 | Long-running donation timer |
| Tournament | Bottom-third overlay | 1920×200 | Match/round timer |
| Giveaway | Side panel | 400×600 | Contest entry window |
Tip
Create separate scenes for different timer uses, or use multiple timers
in one scene and toggle their visibility as needed!
Premium Features in OBS
Remote Control During Stream
With a Premium account, you can control your timer while streaming without touching OBS:
Setup:
- Open the Editor in a separate browser tab or on a second monitor
- Load your saved Premium timer
- Keep the editor open during your stream
Control:
- Start timer when stream begins
- Pause if you need to extend a break
- Reset to restart countdown
- Adjust duration on the fly
- Update design without leaving your stream
Premium Feature
Changes made in the editor are automatically synchronized to
OBS in real-time. No need to refresh the browser source or update URLs!
| Feature | Free Timer | Premium Timer |
|---|---|---|
| Add to OBS | ✅ Yes | ✅ Yes |
| Remote control during stream | ❌ No | ✅ Yes |
| URL stability after edits | ❌ URL changes | ✅ URL stays same |
| State persistence | ❌ Resets | ✅ Saves state |
| Multiple saved timers | ❌ No | ✅ Yes |
Common Issues & Solutions
Timer Not Displaying
| Problem | Solution |
|---|---|
| Black screen in OBS | Verify URL is correct and starts with https://gettickr.app/r/# |
| "Local File" checkbox enabled | Disable "Local File" - we're using a web URL |
| No internet connection | Check your network connection |
| Browser source too small | Increase width/height in source properties |
| Timer behind other sources | Right-click → Order → Move Up |
Timer Not Updating or Synchronizing
| Issue | Cause | Solution |
|---|---|---|
| Free timer: Changes don't appear | URL changed with edit | Copy new URL and update browser source |
| Premium timer: Remote control not working | Editor tab closed | Keep editor tab open during stream |
| Timer frozen | Browser source paused | Right-click → Refresh |
| Old timer showing | Cached content | Enable "Refresh browser when scene becomes active" |
Warning
Free timers generate a new URL every time you edit them. You
must update the browser source URL in OBS after each edit. Premium timers
maintain stable URLs!
Performance Issues
| Symptom | Cause | Solution |
|---|---|---|
| OBS lagging with timer | Too high resolution | Use reasonable dimensions (1920×1080 max) |
| High CPU usage | Multiple browser sources | Enable "Shutdown source when not visible" |
| Choppy animation | Low FPS setting | Set browser source FPS to 30 |
| Stream encoding lag | Too many sources | Disable unused timer sources |
Tip
Browser sources use minimal resources when configured correctly. A
single gettickr.app timer typically uses less than 1% CPU!
Next Steps
- Customize Design - Make your timer match your stream aesthetic
- Remote Control - Learn about Premium remote control features
- Streamlabs Integration - Alternative streaming software guide