Add a Game Overlay in Streamlabs Desktop

Adding a game overlay in Streamlabs Desktop lets you display your stream alerts, chat, and other widgets directly on top of your gameplay, either for your own reference or as a visual element for your viewers. This guide walks you through setting up a browser source overlay in Streamlabs Desktop, covering both the initial setup and common adjustments.

What You’ll Need

• Streamlabs Desktop installed and logged in with your streaming account (Twitch, YouTube, or Facebook).
• Your streaming software (Streamlabs Desktop itself) set up with your capture source (e.g., game capture or display capture) already added.
• An overlay design or widget URL from Streamlabs’ built-in library, or a custom widget URL from a service like Streamlabs, StreamElements, or your own hosted HTML.

Step-by-Step

1. Open Streamlabs Desktop and go to the Editor tab (the main scene layout view).
2. In the Sources box (usually bottom-left), click the + (plus) icon to add a new source.
3. From the dropdown, select Browser Source. Name it something descriptive like “Overlay” or “Alerts” and click Add Source.
4. In the Browser Source properties window, you’ll see a field for URL. Paste the overlay URL you want to use. If you don’t have one, you can find free overlays in the Streamlabs Library (the icon that looks like a grid) and copy the URL from there.
5. Set the Width and Height to match your stream resolution (commonly 1920×1080). Ensure FPS is set to 30 or 60 (matching your stream’s FPS is fine).
6. Check the box for Shutdown source when not visible if you want to save resources when the overlay is hidden (e.g., when you switch scenes).
7. Click Done. The overlay should now appear in your scene. Drag it to position it on the canvas. For a typical overlay, you’ll want it to cover the full screen, so set its position to (0,0) by dragging or by entering coordinates in the source settings.
8. To make the overlay interactive (e.g., for chat or clickable alerts), click the Settings (gear icon) on the source, then check Interact via WebSocket (if available) or use the Interact button in the source’s context menu to test clickable elements.
9. Test your overlay by triggering a test alert (e.g., in Streamlabs Dashboard, go to Alert Box > Test) or by viewing your stream preview. Adjust the position or size as needed.
10. Once satisfied, your overlay is live. Remember to keep the browser source active in the scene when you go live.

Common Mistakes

• Wrong URL: Using a widget URL that isn’t meant for browser sources (e.g., a direct link to a PNG image instead of an HTML page).
• Incorrect size: Not matching the overlay’s dimensions to your canvas, causing it to be cut off or scaled incorrectly.
• Overlay not visible: Forgetting to add the browser source to the correct scene, or having it hidden behind other sources.
• Performance issues: Running multiple heavy browser sources simultaneously can cause lag. Use only what you need.
• Forgetting to update: If you edit the overlay in Streamlabs, you may need to refresh the browser source (right-click > Refresh) to see changes.

Tips

• Use Scene Collections to save different overlay setups for different games or segments.
• For a clean look, make sure your overlay’s transparent areas are actually transparent (PNG or HTML with transparent background).
• If you’re using a custom overlay, test it in a local browser first to ensure it loads correctly.
• Consider using Global Sources for overlays that you want to appear across multiple scenes without duplicating them.
• To avoid accidentally clicking through the overlay during gameplay, you can disable the browser source’s interaction by unchecking “Interact via WebSocket” and using the “Interact” button only when needed.

Troubleshooting

• Overlay not showing: Double-check the URL is correct and that the source is not hidden (eye icon). Also ensure the browser source is above other sources in the list (drag it up).
• Overlay shows but is blank: Refresh the browser source (right-click > Refresh). If it’s still blank, open the URL in a regular browser to see if it loads. If it doesn’t, the URL may be broken or require login.
• Overlay is too big or small: Adjust the width and height in the browser source properties, or use the transform tools (Ctrl+T) to scale it visually.
• Overlay is laggy: Reduce the FPS of the browser source, or close other heavy applications. You can also try using a lower resolution overlay if available.
• Alerts not showing: Make sure you have the correct alert box URL from Streamlabs, and that your stream is connected. Test alerts in the dashboard.
• Overlay appears in preview but not on stream: Ensure you’re in the correct scene that is being broadcast, and that the browser source is not set to “Shutdown when not visible” while the scene is active.

Frequently Asked Questions

Can I use a game overlay without a capture card?

Yes, you can use display capture or game capture in Streamlabs Desktop, which doesn’t require a capture card. The overlay works the same way.

How do I make my overlay clickable for viewers?

Enable “Interact via WebSocket” in the browser source settings, and ensure your overlay HTML includes interactive elements. Viewers can then click on it if they have the “Interact” feature enabled on their end (usually via the stream’s chat commands).

Why is my overlay not showing up in recordings?

If you’re recording with Streamlabs Desktop, the browser source should be included. If not, check that the source is visible in the scene and that you’re recording the correct scene.

Can I use a StreamElements overlay in Streamlabs?

Yes, you can add any browser source URL, including StreamElements widgets, as long as you have the URL. Just paste it into the browser source URL field.

How do I update my overlay without restarting the stream?

Right-click the browser source and select “Refresh” to reload it. This applies changes from the URL without restarting the stream.

My overlay is blocking my game view. How do I fix it?

Check the source order in the Sources list. The overlay should be at the top to appear over the game, but if it’s blocking too much, you may need to resize it or make it semi-transparent in your overlay design.

Related

• Common Passwords Might Surprise You
• Flat Ethernet Cables: Easier to Route, Not Faster
• How to Rank Values with the RANK Function