Stream Elements Widgets Tutorial

This guide walks through the process of loading widgets in StreamElements and OBS Studio, ensuring a smooth and professional-looking stream.

Step One:

Create an account on StreamElements.
Go to the dashboard. Go to the Overlays section in the left menu.
Under Streaming Tools, go to the Overlays section

Step Two:

Click on Create New Overlay or select an existing one to modify.
Adding a Widget in StreamElements

Step Three:

Set the resolution (preferably 1080p), then click Start.

Step Four:

Click on the plus (+) icon, and you’ll see the side panel options.

Step Five:

Click on the plus (+) icon, and you’ll see the side panel options.
Then, click on the Static/Custom option.

Step Six:

Click on ‘Custom Widget.’ The panel will change.

Step Seven:

Click on ‘Open Editor’ in the left-side panel. A new editor will appear in front of you.

Step Eight:

You will see a code canvas. After your purchase, you will receive files for HTML, JS, and Fields code.
Remove the existing HTML, CSS, JS, and Fields code from the canvas.
Paste your HTML code into the HTML section.
Paste your JS code into the JS section.
Paste your Fields code into the Fields section.
Leave the Data section as it is And HIT OK!!

Step NINE:

Your widget has loaded successfully and is ready to go!

Step Ten:

After successfully loading, save it from the top right
Give it any name you want.
Then, copy the link.
Open OBS and create a new scene or use an existing one.

Step Eleven:

In OBS, go to the Sources section and click on the plus (+) icon.

Step Tewelve:

After clicking the plus (+) icon, find ‘Browser’ and click on it.
Give it any name you want.

Step Thirteen:

After setting your name, update the values.
Paste the link you copied from StreamElements.
Change the width to 1920px.
Change the height to 1080px
.Click ‘OK’.

Step Fourteen:

Now you’re ready to go live with your Twitch widgets. Happy streaming!!!!