OBS Studio Integration
Configure PalcoTimer as an overlay in your live streams.
Introduction
OBS Studio (and other streaming software) supports "Browser Source", allowing you to display web pages directly in your stream. PalcoTimer is optimized to work as an overlay with transparent background.
Adding Browser Source
Follow these steps to add the timer in OBS:
- Open OBS Studio and select the scene where you want to add the timer
- Click "+" in Sources and select "Browser"
- Give the source a name (e.g., "PalcoTimer")
- Paste your room's Viewer URL. Find it in the Controller under "Links"
- Configure size: Width: 1920 (or your stream resolution), Height: 1080 (or your stream resolution)
- Click OK to add the source
Transparent Background
To use the timer as an overlay (just the number appearing over video), add the transparent background parameter to the URL:
https://app.palcotimer.com/r/ABC123/viewer?background=transparentAlso, check "Custom CSS" in the OBS Browser Source and add:
body { background-color: rgba(0, 0, 0, 0) !important; }Dica
If the background still isn't transparent, make sure the "Shutdown source when not visible" option is unchecked in OBS.
URL Parameters
Use URL parameters to customize the display:
| Parameter | Description | Example |
|---|---|---|
| background=transparent | Removes background | ?background=transparent |
| only=timer | Shows only the number | ?only=timer |
| only=progress | Shows only the bar | ?only=progress |
| only=message | Shows only messages | ?only=message |
| hide=controls | Hides screen controls | ?hide=controls |
| progress=ring | Uses circular progress | ?progress=ring |
Combined example:
https://app.palcotimer.com/r/ABC123/viewer?background=transparent&only=timer&hide=controlsAdvanced Tips
Multiple sources
Create multiple Browser Sources with different parameters: one for the timer, another for messages, another for the progress bar. This way you can position each element independently.
Auto refresh
If the timer stops updating, configure OBS to reload the page periodically ("Refresh browser when scene becomes active" option).
Transforms
Use OBS transforms (Edit Transform) to resize and position the timer exactly where you want on screen.
Also works with Streamlabs, XSplit, vMix, and other software that supports browser source.