Can I use TriBathon's overlay with StreamElements at the same time?

Yes. Add TriBathon's widget as an independent browser source in OBS, and StreamElements overlay as another source above it. They're compatible because they run on separate layers inside OBS.

What resolution do you recommend for the subathon overlay?

Use 1920x1080 as the OBS canvas base. TriBathon widgets are responsive, but we recommend a minimum of 350px width for legible timers. For 720p streams, adjust the widget to 280x100px.

Does the TriBathon overlay update in real time?

Yes. TriBathon's widget uses WebSocket to receive real-time updates. When someone subscribes on Twitch or Kick, the timer updates in less than 2 seconds in your OBS overlay.

Can I customize the TriBathon timer colors?

TriBathon lets you customize the widget theme from the configuration panel. You can adjust primary and background colors to match your channel's visual identity.

Subathon Overlay in OBS: Timer, Alerts & Widgets

Complete guide to configuring subathon overlays in OBS Studio. Learn how to add the TriBathon timer, StreamElements alerts and custom widgets for a professional stream.

The Right Overlay Makes All the Difference

A subathon without a professional overlay is like a store without a window display. The visible timer, event alerts and progress widgets are what motivate your audience to contribute, because they can see the direct impact of every sub or donation.

In this guide you'll learn how to configure a complete overlay in OBS Studio combining the TriBathon timer with StreamElements alerts — the most widely used overlay system among professional streamers.

🎯 What you'll get

By the end of this guide you'll have: a real-time timer visible to your audience, animated sub and donation alerts, and a clean, professional overlay that works with Twitch, Kick and YouTube simultaneously.

Overlay Architecture: What Goes on Which Layer

OBS works with source layers. Order matters: what's higher in the Sources panel is drawn on top of everything. For a subathon, the recommended structure is:

OBS Layer Order (top to bottom)

1
StreamElements Alerts— Sub/donation animations (top layer, always visible)
2
TriBathon Timer— Countdown timer widget
3
Secondary widgets— Milestones, goal progress, top donors
4
Static overlay— Frames, borders, channel decorations
5
Camera + game/content— Base video sources

Step 1: Configure the TriBathon Timer in OBS

The TriBathon timer integrates into OBS as a browser source, meaning it updates automatically without you doing anything during the stream.

Get the Widget URL

Log into your TriBathon dashboard.
Go to the Widgets section in the sidebar.
Select the timer style you prefer (compact, full or minimal).
Copy the generated widget URL. It will look like: https://tribathon.live/widget/timer?token=xxxxx

Add to OBS

In OBS, inside your subathon scene, click "+" in the Sources panel.
Select "Browser" and name it "TriBathon Timer".
Set the parameters:
- • URL: the URL copied from TriBathon
- • Width: 400px
- • Height: 150px
- • FPS: 30 (sufficient for the timer)
- • ✅ Check "Refresh browser when scene becomes active"
Click OK and position the timer where you want on your screen.

✅ Timer syncs automatically

You don't need to refresh anything during the stream. TriBathon sends real-time updates via WebSocket. Every sub or donation updates the timer in under 2 seconds.

Step 2: Configure StreamElements Alerts

StreamElements is the most popular alert tool and is completely free. It integrates with Twitch, Kick and YouTube to show animations when someone subscribes or donates.

Create Your StreamElements Overlay

Create an account at streamelements.com and connect your Twitch or Kick channel.
Go to Streaming Tools → My Overlay and click "New Overlay".
Select resolution 1920x1080.
Add alert widgets:
- • Alert Box: for subs, donations, follows, raids
- • Event List: latest stream events
- • Tip Jar / Sub Counter: goal progress
Customize colors, animations and sounds for each event type.
Click "Launch" and copy your overlay URL.

Add StreamElements to OBS

In OBS, add a new browser source named "StreamElements Alerts".
Paste the StreamElements overlay URL.
Set the size to 1920x1080 (full screen).
Make sure this source is above the TriBathon timer in the Sources panel.

⚠️ Transparent background in StreamElements

StreamElements alerts have a transparent background by default, so they can overlay any layer without blocking the TriBathon timer. If you see a black background, check that the overlay doesn't have a background color enabled in its settings.

Step 3: Additional Subathon Widgets

Beyond the timer and alerts, these widgets increase engagement during your subathon:

Milestones / Goal Progress Bar

Shows a progress bar toward the next subathon milestone. TriBathon includes a milestones widget you can add as a separate browser source. Updates in real time as subs accumulate.

Chat Overlay

Displays Twitch or Kick chat over the stream. StreamElements and KapChat offer customizable chat overlays. For multistream, Restream Chat unifies messages from all platforms.

Top Donors / Top Subs

A widget showing the biggest contributors in real time. This incentivizes competition among viewers to appear on the leaderboard. StreamElements includes this in its widget panel.

Happy Hour Indicator

TriBathon includes a widget that shows when Happy Hour is active and the current multiplier (2x, 3x). It's one of the most effective tools for spiking donations at key moments.

Recommended OBS Settings for Subathon

Performance settings to keep your overlay smooth during days of continuous streaming:

Output / Streaming

• Encoder: NVENC H.264 (GPU) preferred
• Bitrate: 6,000 kbps (Twitch/Kick)
• Keyframe: 2 seconds
• Preset: Quality / Max Quality

Browser Sources

• Timer widget FPS: 30
• StreamElements alerts FPS: 60
• ✅ Hardware acceleration enabled
• ✅ Refresh when scene activates

Overlay Design: Where to Place Each Element

Overlay positioning directly influences how much time your audience spends looking at it. Based on eye-tracking data from professional streamers:

Recommended 1920x1080 layout:

[TRIBATHON TIMER][TOP DONORS]

[Camera / Game / Content]

[MILESTONES][CHAT OVERLAY]

StreamElements alerts appear centered when triggered.

💡 Design tip

Place the timer in the top-left or top-right corner. UX research from Twitch shows viewers scan overlays in an F-pattern (left-right at the top), so the timer must be in those zones to maximize visibility.

Common Overlay Mistakes in Subathons

Timer too small to read

If the timer is unreadable on mobile (where most of your audience watches), you lose the motivational effect. Use at least 300-400px width.

Overlay taking up too much screen space

Main content must remain visible. Overlays covering more than 20% of the screen reduce watch time. Use compact designs and transparency.

Not testing before the subathon

Do a 30-minute private stream to verify the timer receives events, alerts fire correctly and there are no conflicts between browser sources.

Conclusion: A Professional Overlay in Under 30 Minutes

Setting up a complete subathon overlay doesn't require design skills or advanced technical knowledge. With OBS, TriBathon and StreamElements, you can have a professional setup in under 30 minutes that will run without interruption through days of continuous streaming.

The key is simplicity: visible timer, clear alerts and minimal visual noise. Your content is the star; the overlay is the frame that enhances it.

Ready to set up your subathon overlay? Create your TriBathon account and get your widget URL in 2 minutes →