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.

[!NOTE] Don’t extract the file named widget.zip! The widget.ioextension relies on it to install the widget for you.

Install the widget.io extension

Chrome/Edge/Opera only.

Go to the widget.io chrome web store page and click on the installation button. You may be ask to give installation permission if you use a chromium based browser that isn’t chrome. Allow it and proceed.

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.

The widget.io button

If installed correctly, you should now see a brand new red button on the lower left side of the screen. When you click on it, a pop-up should appear with a few things inside of it. Click the upload button and select the widget.zip which got extracted from the zip file you downloaded. Click the CREATE WIDGET button.

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!