// Overlays
Free download
Guide

Set up a Twitch overlay in OBS

Download the file, drop it into OBS, enter your channel. Done.

Every one of my overlays is a single HTML file. No account, no server, no installation: you download the file, drop it into OBS and enter your channel name. After that your chat plays along.

5 minutes Beginner OBS Browser Source

Step by step

// How it works

  1. 01

    Download the overlay

    Pick an overlay from the overview and download its widget.html. Put it in a folder you will find again, for example Documents/Overlays. Next to it sits a second file called config.js.example. You need that one in step 3, so leave it in the same folder.

  2. 02

    Add a browser source in OBS

    A browser source is the kind of source in OBS that displays a web page or an HTML file. Click the plus under Sources, pick Browser and give the source a name. In the next window tick Local file and select the widget.html. Set Width 1920 and Height 1080: the overlay positions itself inside that area, so it wants the full canvas rather than a small box.

  3. 03

    Enter your channel

    Copy config.js.example and rename the copy to config.js. It has to sit next to the widget.html. Open it in a text editor, find the line with channel and enter your Twitch name exactly as it appears in your channel address. Save. You can ignore everything else in the file for now, the defaults are fine.

  4. 04

    Test it and go live

    Right-click the browser source, then Refresh, so OBS reads the new configuration. Now type the start command in your own chat, for Roulette that is !roulette. If the overlay reacts, you are done. If it does not, it is almost always a typo in the channel name.

Frequently asked

// In short

I see nothing, what am I doing wrong?

Check three things in this order: is Local file ticked, is your channel name correct in config.js, and did you refresh the source after saving? Almost every case is one of those three.

Do I need a bot?

Not to begin with. The overlays run on their own. A bot only becomes necessary once points should be paid out automatically. That means your chat bot's own currency, not Twitch channel points, and the Streamer.bot connection guide covers that.

Does it run on Mac and Windows?

Yes, and on Linux too. A browser source exists in OBS on all three, and because the overlay is just an HTML file, nothing gets installed.

Does it cost anything?

The free overlays run locally in your OBS. No subscription, no server, no running costs. A few of the more elaborate overlays are paid, and that is stated on their own page.

All overlays