You do not need to know how to code to setup these widgets. It is mostly copying text from a file and pasting it into StreamElements. This guide shows you where to put everything so your stream looks great in a few minutes.
Looking for our full OBS walkthrough? Check out our main OBS Setup Page.
What You Get in Your Download
Your download folder comes with four text files:
HTML.txtCSS.txtJS.txtFIELDS.json
Quick Tip: Leave the Local File checkbox unchecked in OBS. Your widget lives on the web inside StreamElements. You just need to paste the web link into OBS.
Step by Step Setup
Make a New Widget
Log into StreamElements and click Streaming Tools, then Overlays. Click New Overlay in the top right. Pick 1080p for the size. Click the big plus button, pick Static/Custom, then Custom Widget. Click Open Editor.
Copy and Paste Your Files
Open the text files from your download. Copy the text inside each one and paste it into the matching tab inside the StreamElements editor:
-
Open
HTML.txt, copy all text, paste it into the HTML tab. -
Open
CSS.txt, copy all text, paste it into the CSS tab. -
Open
JS.txt, copy all text, paste it into the JS tab. -
Open
FIELDS.json, copy all text, paste it into the FIELDS tab.
Click Done at the bottom, then click Save in the top right corner.
Pick Your Colors and Settings
Look at the left sidebar menu. You will see dropdowns and boxes where you can change the settings. You can pick your favorite theme preset, set your goal numbers, or change how long messages stay on screen. Click the test buttons in the menu to see how it looks.
Put it into OBS
Click the copy link icon at the top of the StreamElements page. This copies your overlay web address.
Open OBS Studio. Add a new Browser Source to your scene. Paste the web link into the URL box. Set Width to 1920 and Height to 1080. Click OK and you are ready to stream.
Want More Stream Overlays?
Check out our custom goal bars, chat boxes, and GTA overlays on Etsy.