Tutorials

Adding a Browser Source

Show Trophy Case animations on your stream by adding your overlay URL as a browser source.

Choose your app: OBS Studio · Streamlabs Desktop · Meld Studio · XSplit Broadcaster

Set up your Trophy Case overlay

Open Settings and find Stream Overlay.
Turn on Allow Showcasing.
Under Browser source, choose your canvas size. For a full-screen overlay, match your streaming canvas, for example, 1920 × 1080 for 1080p landscape.
Enable the showcase animations you want viewers to use. Choose an animation under Customize & preview to adjust its options.
Click Save Overlay Settings, then copy the overlay URL using the copy button beside it.

Use that overlay URL in the steps below. Your public case URL and Award Keys are not needed.

OBS Studio

Select the scene where you want trophies to appear.
In Sources, click +, choose Browser, and create a source named Trophy Case.
Leave Local file unchecked and paste your overlay URL into URL.
Set Width and Height to the dimensions saved in Trophy Case.
Click OK. Place the source above your game or camera in the Sources list so trophies appear over them.
Position the source on your scene. For a matching full-screen canvas, right-click it and choose Transform → Fit to screen.

Leave Shutdown source when not visible and Refresh browser when scene becomes active off to avoid reloading the overlay when changing scenes.

OBS browser-source documentation

Streamlabs Desktop

Open your scene in the editor. In Sources, click +.
Choose Browser Source, then Add Source. Create a new source named Trophy Case.
Paste your overlay URL into the URL field.
Set Width and Height to the dimensions saved in Trophy Case, then finish adding the source.
Move the source above your game or camera in the Sources list. Position it to cover the intended area of your scene.

Leave Shutdown source when not visible and Refresh browser when scene becomes active off to keep the overlay loaded across scene changes.

Streamlabs browser-source guide

Meld Studio

Open the scene where you want your overlay.
In Layers, click + and choose Browser.
Select the new layer and paste your overlay URL into the URL field in the Inspector.
Size the browser layer to match the width and height saved in Trophy Case. Meld’s Lock Size option can preserve the browser’s dimensions if you then scale the layer on your scene.
Arrange the layer above your game or camera so the trophies remain visible.

To reload the overlay, use the reload icon beside the browser URL in the Inspector.

Meld browser-layer documentation

XSplit Broadcaster

Select your scene and choose Add Source → Webpage.
Paste your overlay URL and click OK.
Open the source properties. Under Display, adjust the screen area to match the dimensions saved in Trophy Case.
Position the source over your scene and arrange it above your game or camera.

XSplit webpage-source documentation

Other streaming apps

Look for a Browser, Webpage, or URL source. Paste your overlay URL, match its browser dimensions to your Trophy Case canvas, and layer it above your video. An app needs support for live web overlays; an image or video upload cannot display this overlay.

Test your overlay directly

You can send a test straight to OBS, Streamlabs, Meld, or your other streaming app from Trophy Case Settings. You do not need a viewer’s help or to go live.

Keep the scene containing your browser source open and visible in your streaming app.
In Settings, enable Showcasing and the animation you want to test, then click Save Overlay Settings.
Under Customize & preview, select the animation and click Test Overlay.
Watch your streaming app’s canvas. Your Participation Trophy will play using your saved settings once its turn in the queue arrives.

Tests do not create awards or notifications. Save any changes before testing again.

Preview only plays inside Settings. Test Overlay sends the animation to your actual browser source. You can also use Open Overlay to watch it in a browser tab.

Troubleshooting

No trophy appears: Animations appear when a showcase is activated. Check that Allow Showcasing and the chosen animation are enabled and saved.
Trophies are cut off or misplaced: Match the source’s browser width and height to Trophy Case Settings. Resizing its box in the scene alone may not change the browser dimensions.
The overlay is behind your video: Move its source or layer above your game and camera, and check that it is visible.
Changes have not appeared: Save your Trophy Case settings, then refresh the browser source in your streaming app. If you changed canvas size, update the source dimensions too.