XSplit Integration
Information
XSplit Broadcaster and XSplit Gamecaster are professional streaming
applications used by content creators worldwide. Integrating gettickr.app
timers into XSplit is straightforward using webpage sources!
This guide covers how to add gettickr.app countdown timers to both XSplit Broadcaster and XSplit Gamecaster.
What You Need
| Requirement | Details |
|---|---|
| XSplit Broadcaster or Gamecaster | Download from xsplit.com |
| gettickr.app Timer | Created at gettickr.app |
| Timer URL | Display/renderer URL from your timer |
| Internet Connection | Required for webpage source |
Tip
XSplit uses "webpage sources" instead of "browser sources" (OBS
terminology), but they work exactly the same way!
XSplit Broadcaster Integration
Step 1: Create Your Timer
First, prepare your timer in gettickr.app:
- Open the Editor
- Create and customize your timer (duration, design, colors, fonts)
- Navigate to the Renderer section
- Copy the display URL, looks like:
https://gettickr.app/r/#YOUR-TIMER-ID
Premium Feature
Save your timer to get a stable URL. Premium timers keep the same
URL even after edits, while free timers generate new URLs with each change.
Step 2: Add Webpage Source
Add the timer to your XSplit scene:
- Open XSplit Broadcaster
- Select the scene where you want the timer
- Click "Add Source" or right-click in the scene area
- Select "Webpage..." from the source types
- The Webpage source configuration dialog opens
Step 3: Configure Webpage Source
Set up your webpage source with these settings:
| Setting | Value | Notes |
|---|---|---|
| Name | "Countdown Timer" or descriptive name | Helps identify the source later |
| URL | https://gettickr.app/r/#YOUR-TIMER-ID | Paste your timer URL |
| Width | 1920 (or timer design width) | Match your timer dimensions |
| Height | 1080 (or timer design height) | Match your timer dimensions |
| Use hardware acceleration | ✅ Recommended | Improves animation performance |
| Refresh interval | Default (usually 1000ms) | Standard setting works well |
Click "OK" to add the webpage source.
Step 4: Position and Resize
Your timer appears in the scene editor:
- Move: Click and drag the timer to desired position
- Resize: Drag corner handles to adjust size
- Maintain aspect ratio: Resize normally to keep proportions
- Free resize: Hold Shift while dragging to resize freely
- Layer order: Right-click → Order → Bring Forward/Send Backward
| Transform Action | How to Access | Use Case |
|---|---|---|
| Bring to Front | Right-click → Order | Place timer above all sources |
| Send to Back | Right-click → Order | Place timer below overlays |
| Center | Transform properties | Quick centering |
| Fit to Screen | Resize to canvas size | Full-screen timer |
Tip
Use XSplit's snap-to-edge feature to align timers perfectly with scene
boundaries or other sources!
XSplit Gamecaster Integration
XSplit Gamecaster has a simplified interface optimized for gaming streams.
Adding Timer to Gamecaster
- Open XSplit Gamecaster
- Click the "Overlays" button
- Select "Add Overlay" → "Webpage"
- Paste your timer URL
- Give it a name (e.g., "Break Timer")
- Choose from preset positions or custom placement
| Gamecaster Preset | Best For |
|---|---|
| Top Center | Break timers, event countdowns |
| Top Right | Small corner timer overlays |
| Bottom Center | Full-width timer bars |
| Center | Full-screen starting soon timers |
| Custom | Precise manual positioning |
Information
Gamecaster's simplified overlay system makes setup faster, but offers
less customization than Broadcaster's full scene editor.
Advanced XSplit Settings
Hardware Acceleration
XSplit's hardware acceleration improves webpage source performance:
| Setting | Performance Impact | Use When |
|---|---|---|
| Enabled | Better animation smoothness, higher GPU usage | You have a dedicated GPU |
| Disabled | Lower GPU usage, possible animation stutter | CPU is stronger than GPU |
Tip
If your timer animation looks choppy, enable hardware acceleration.
If you experience overall stream lag, try disabling it.
Refresh Interval
The refresh interval controls how often XSplit reloads the webpage source:
| Interval | Effect | Best For |
|---|---|---|
| 500ms | Very frequent updates | Critical countdown accuracy |
| 1000ms (1s) | Default, balanced | Standard timer usage |
| 2000ms | Less frequent updates | Static or slow-updating timers |
Information
For gettickr.app timers, the default 1000ms interval works perfectly.
The timer continues counting smoothly between refreshes.
Source Properties
Right-click on your timer webpage source for additional options:
| Option | What It Does | When to Use |
|---|---|---|
| Refresh | Manually reload webpage | Timer appears frozen |
| Properties | Re-open configuration | Change URL or dimensions |
| Rename | Change source name | Better organization |
| Duplicate | Copy source | Reuse timer in other scenes |
| Remove | Delete source | Clean up unused timers |
Layer Management
XSplit uses layers to determine what appears on top:
| Layer Strategy | How to Implement | Use Case |
|---|---|---|
| Timer on Top | Right-click → Bring to Front | Timer visible above everything |
| Timer Behind Overlays | Position between layers | Timer visible but below alerts |
| Timer as Background | Send to Back | Timer behind gameplay |
| Grouped Layers | Group related sources | Manage multiple elements together |
Tip
Hold Ctrl and click multiple sources to select them together, then
right-click to apply transformations to all at once!
Remote Control with XSplit
Premium Remote Control
Premium gettickr.app users can control timers while streaming:
Setup:
- Open Editor on second monitor or browser tab
- Load your saved Premium timer
- Keep editor open during stream
Control Actions:
| Action | Effect | XSplit Behavior |
|---|---|---|
| Start | Begin countdown | Updates instantly in scene |
| Pause | Freeze timer | Pauses immediately |
| Reset | Return to start | Resets without refresh |
| Adjust Duration | Change time | Updates live |
| Update Design | Modify appearance | Changes appear instantly |
Premium Feature
All changes sync in real-time to XSplit! No manual webpage
source refresh needed.
| Feature | Free Timer | Premium Timer |
|---|---|---|
| Add to XSplit | ✅ Yes | ✅ Yes |
| Remote control | ❌ No | ✅ Yes |
| URL stability | ❌ Changes with edits | ✅ Always same |
| Save timer library | ❌ No | ✅ Yes |
| State persistence | ❌ Resets | ✅ Saves state |
Multi-Scene Timer Setup
Strategy 1: Different Timers per Scene
Create specialized scenes with appropriate timers:
| Scene Name | Timer Purpose | Webpage Source |
|---|---|---|
| Starting Soon | Pre-stream countdown | Timer URL 1 |
| BRB - Short | 5 minute break | Timer URL 2 |
| BRB - Long | 15 minute break | Timer URL 3 |
| Event Countdown | Special stream event | Timer URL 4 |
Workflow: Switch scenes to switch timers automatically
Strategy 2: Multiple Webpage Sources
Add several webpage sources to one scene:
- Add first timer webpage source
- Add second timer webpage source (different URL)
- Use visibility toggle to show/hide timers
- Set hotkeys for quick switching
Workflow: Stay in one scene, toggle timer visibility
Strategy 3: Source Swapping
Use one webpage source, swap URLs as needed:
- Create webpage source with Timer A URL
- When switching timers, right-click → Properties
- Change URL to Timer B
- Click OK to apply
Workflow: Minimal sources, manual URL changes
Tip
Best approach: Strategy 1 (different scenes) is cleanest for
organization. Strategy 2 works well for quick visibility toggles during
streams.
Common Use Cases
| Streaming Scenario | XSplit Setup | Timer Configuration |
|---|---|---|
| Stream Starting Soon | Full-screen scene | 1920×1080 CountTo timer |
| Break Timer | BRB scene with timer overlay | 800×400 Countdown (5-15 min) |
| Subathon | Timer on all scenes | 1920×100 top bar Countdown |
| Tournament Rounds | Tournament scene | 600×300 round timer |
| Giveaway | Side overlay on main scene | 400×600 entry countdown |
XSplit Presentations
XSplit's presentation feature saves your complete setup:
Saving Your Setup:
- Configure all scenes with timers
- File → Save Presentation
- Name it descriptively (e.g., "Stream Setup - Timers")
- Load this presentation for future streams
Benefits:
| What Gets Saved | Benefit |
|---|---|
| All scenes | Instant scene recreation |
| Webpage sources with URLs | No URL re-entry needed |
| Source positions & sizes | Consistent layout |
| Layer ordering | Reliable visual hierarchy |
| Hotkey assignments | Workflow preservation |
Information
Save different presentations for different stream types (regular
stream, special events, IRL streaming) with appropriate timers pre-configured!
Troubleshooting
Timer Not Displaying
| Problem | Cause | Solution |
|---|---|---|
| Blank webpage source | Incorrect URL | Verify URL: https://gettickr.app/r/#... |
| Timer cut off | Source too small | Increase width/height to match timer |
| Black background | Transparency not working | Check timer design has transparent background |
| Nothing loads | No internet | Verify network connection |
| Timer behind other sources | Layer order wrong | Right-click → Order → Bring Forward |
Performance Issues
| Symptom | Cause | Solution |
|---|---|---|
| Choppy timer animation | Hardware acceleration off | Enable hardware acceleration |
| XSplit lagging | Too many webpage sources | Reduce active webpage sources |
| High CPU usage | Software rendering | Enable GPU/hardware acceleration |
| Stream encoding drops | Overall system load | Close unnecessary programs |
Tip
XSplit shows CPU/GPU usage in the bottom-right. Monitor these metrics
to identify performance bottlenecks!
Synchronization Problems
| Issue | Fix |
|---|---|
| Free timer: Changes don't appear | Copy new URL and update webpage source properties |
| Premium timer: Remote control not working | Ensure editor tab is open and connected |
| Timer appears frozen | Right-click source → Refresh |
| Timer out of sync | Reload webpage source or restart XSplit |
Warning
Free timers generate a new URL with each edit. You must update
the webpage source properties with the new URL. Premium timers maintain stable
URLs!
Next Steps
- OBS Integration - Alternative streaming software guide
- Remote Control - Learn about Premium remote control features
- Customize Design - Match your timer to your stream branding