Download the widget

If you're reading this, there is a good chance you have already done that!

Extract the contents

If you haven’t already done that. Right click the .zip file you downloaded and select Extract All. When prompted select your destination and click Extract. If you use 7-Zip/WinRAR, Right click, hover over the dropdown with the programs name, and choose your preferred extraction method.

Open StreamElements

Go to StreamElements and log in with Twitch. After a successful login, select Streaming tools from the sidebar on the left, then click on Overlays.

Create an overlay

Click the NEW OVERLAY button in the top right. When prompted select your desired overlay resolution. You can make it 1080p and put all your widgets in one overlay, or select Custom from the dropdown and input your own values. Remember the size you used for later. Click START.

Create a Custom Widget

Click the + button in the bottom left corner of the overlay editor. Then select STATIC/CUSTOM > Custom Widget. You should see some things appear in the sidebar on the left, including a button which says OPEN EDITOR, click it.

Pasting widget files

When the editor opens you should see it has a few tabs up top, and a text area below them. You need to match the contents of the files you extracted with the tab names. Ex: open html.txt with a text editor of your choice, ctrl + A to select all, ctrl + C to copy, now inside of StreamElements click anywhere in the text area, ctrl + A to select all, ctrl + V to paste. Do this for all the remaining files, then click DONE.

Do not setup more than one copy of this widget per overlay!

Post installation

If everything went right, you should now see some settings on the sidebar on the left, as well as a blue outlined box in the editor. You can grab the corners of that box to resize it to match the size of the workable area, or click the Position, size and style tab in the bottom left corner, then input your desired width and height.

Post installation: the sequel

Each of the tabs in the sidebar contain settings you can customize the widget to your heart’s content! If you want to know what each one of these does, go to the GitHub wiki, where everything is explained. Last thing you need to do is to Give the overlay a name in the top left, click the SAVE button in the top right, and click the link by clicking it’s icon on the left of the PREVIEW button.

Adding the widget to OBS

Click the + button in the bottom left of the Sources panel, then select browser. Give it a name of your choice, then click OK. Paste the link you copied into the URL field, and set the width and height to match what you made your StreamElements overlay, make sure “Shutdown source when not visible” is CHECKED! Then click OK. That’s it! Enjoy!