Why Overlays Install Through StreamElements — and How to Use Them in OBS or Streamlabs

A fair question before buying an animated overlay: why does it need StreamElements, and am I locked into something? Short answer — no. Here is what each piece actually does.

What StreamElements is doing in the chain

An animated overlay that reacts to your stream is a small web page, not a picture. Something has to host that page and connect it to your channel so it knows when someone follows, subscribes or sends a message. That is the job StreamElements does. It is free, and it is what the one-click install link sets up for you.

The output is a single overlay URL. That URL is the actual product as far as your streaming software is concerned.

Your streaming software just loads that URL

OBS Studio, Streamlabs and Twitch Studio all support the same thing: a Browser Source that loads a web page into your scene. None of them care where the page is hosted. So the chain is:

  1. Install link puts the overlay into your free StreamElements account.
  2. You copy the overlay URL from there.
  3. You paste it into a Browser Source in whichever software you stream with.

That is why the same product works in OBS and Streamlabs without a separate version for each. It also means switching software later does not cost you the overlay — you paste the same URL into the new one.

What you can change without touching code

This is the part most people underestimate. Because the overlay lives in your StreamElements account, its settings panel is yours. Depending on the widget, you can typically adjust:

  • Colours, including separate colours for streamer, moderator, VIP and subscriber where a widget supports roles
  • Size, position and font
  • Text and labels
  • Goal type and target on goal widgets
  • Which events fire which alert, and the test button for each

No editing software, no code. If you want a pink version of a purple widget, that is a colour picker, not a redesign.

Setting it up, concretely

In OBS, add a Browser Source, paste the URL, and set the width and height to match your canvas — 1920 × 1080 for a standard Full HD stream, not the 800 × 600 OBS starts with. Leave the pre-filled Custom CSS in place; it is what keeps the overlay background transparent. Then drag the source to the top of your Sources list so it draws in front of your camera and gameplay.

Streamlabs works the same way with its own Browser Source. We have a longer walkthrough in the OBS setup guide.

What if you do not want a StreamElements account at all?

Then buy the products that do not need one. A good part of our catalogue is plain files you drop straight into OBS:

The product page for every item lists what it needs under Works with and How to install, so you can check before you buy rather than after.

The honest trade-off

The advantage of a hosted overlay is that it is live: chat appears, goals fill, alerts fire, and you configure all of it from a settings panel. The cost is that it depends on a third-party account and an internet connection. Plain files have no dependency at all, but they cannot react to anything. Which one is right depends on whether you want a moving picture or a working widget.