| 𝓦𝓲𝓭𝓰𝓮𝓽 𝓘𝓷𝓼𝓽𝓪𝓵𝓵𝓪𝓽𝓲𝓸𝓷

</aside>

This is a guide for installing a widget overlay into StreamElements and integrating it with OBS.

StreamElements Account: Ensure you are logged in. Make sure your Twitch or Youtube is fully connected to Stream Elements.
Overlay Files: Have your widget files ready.
OBS: Installed and set up on your device. How to install OBS here.

</aside>

Download and Extract Start with download the .zip file from Etsy and extracting it into a folder.

Setting Up Your Widget Begin by logging into StreamElements via the official website StreamElements.
Configuring Your Widget Access the “Streaming Tools” from the left-side menu and click on “My Overlays”. Start a new overlay. For the resolution, we will adjust that later, so hit “START”.

Creating and Adjusting Widgets Get your files ready. To add a new widget, click the blue “ Add Widget”, “ Static/Custom” then “Custom Widget”

Code Customization Go to the file. Open each file with Notepad. Replace the existing code with the new code from the ZIP file for different section. First, HTML. Fully delete existing HTML code in the Stream Elements code editor, then copy-paste the given code from your downloaded file. Fully remove code from the CSS tab. Fully remove code from the JS tab. Fully delete existing FIELDS code in the Stream Elements code editor, then copy-paste the given code from your downloaded file. Fully delete existing HTML code in the Stream Elements code editor, then replace with {} . Then, hit “Done”.

Adjustments After replacing the code, you can adjust the size of your chat box by dragging the square around. You can also change the font and the colors.

Finalizing the Configuration Once you have verified the code, save your settings using the blue button at the top. If using YouTube for streaming, remember you’ll need to start streaming to test the chat.

</aside>

For OBS or similar streaming software, copy your overlay source link from the top of your StreamElements overlay settings. Create a new browser source in OBS, paste your widget link, and set the dimensions to 1080 by 1080. Ensure not to distort the chat widget dimensions to avoid quality loss and adjust the font size from StreamElements settings to fit your display. If the adjustment box in OBS is too large or small, adjust it using the dimensions and in Stream Elements.