Multiplatform Event Widgets for Streamlabs

These widgets are built off the event lists widget in Streamlabs. Streamlabs, unlike StreamElements, combines all the platforms and widgets together into what they call ‘Themes’.

This setup guide will show how to take advantage of our multi-platform widgets. If you can’t get the full support from this guide, please make sure to join our discord for live support.

Making sure your accounts are setup on Streamlabs properly

1. For these widgets to work, you need to make sure your accounts are already connected to Youtube and Twitch. If you haven't already done so, click here and connect your platforms to Streamlabs.

2. Click on the widget share link provided in the download folder. This will take you directly to the streamlabs widget themes page and open a small popup window showing all of your themes.

3. At the bottom there will be a button that allows you to create a new theme. If you want to separate this from other event widgets you have, create a new theme and click Use on your newly made theme. If you want to add it to an existing theme, that is fine, but do know that it will overwrite the existing event widget settings within that theme.

Learn how to customize your new widgets

1. To customize this widget, scroll down to the bottom of the page where you see “HMTL/CSS/JS/Custom Fields” and select Custom Fields if it’s not already active.
   
2. You’ll see the settings split across 4 categories; Goal Settings, Text Settings, Widget BG Settings and Goal Bar settings.
   
3. The Goal Settings  is where you set the widgets label, your goal amount and the event set you would like to choose, we’ve split this into Follows, Subscribe/Members, and Donation/Superchat.
   
4. The Text Settings is where you set the font and general text settings on the widget, font type, size, color, and position of the label and goal percentage. These settings are set to the widget limits to avoid items disappearing.
   
5. The Widget BG settings is where you set the overall width and height of the widget, whether you want to round the corners, add a border via its width and color and set the color of the BG. 
   
   -If you want the BG to be invisible type “none” into the BG and Border color settings.
   
   -If you want circled edges, set the rounded corners to half the px size of the height of the widget.
   
   
6. The Goal Bar settings is where you can set the overall width and height of the goal bar, its bg and value position, whether you want rounded corners and its vertical position.
   
7. Once you are happy with the settings and look of your widget, click on Save at the very bottom of the page.
   
8. To add it to your streaming software, scroll to the top of the screen, and copy the Widget URL link and paste it into a 1280x720 browser source in OBS. 

Note that that specific link will always show the currently Active themes widget. If you would like to use multiple of our Streamlabs widgets, click on “Alertbox” on the left toolbar, then click into the Theme dropdown menu, then View all Themes. Next to the theme of the widget you would like to use, click on the link icon on the left, and select the specific link for the event widget to add into OBS.

1. To customize this widget, scroll down to the bottom of the page where you see “HMTL/CSS/JS/Custom Fields” and select Custom Fields if it’s not already active.
   
   
2. You’ll see the settings split across 2 categories; Text Settings and Widget BG Settings.
   
   
3. In Text Settings, you can set the Starting Text, Font type/color/weight/size as well as the Icon sizes for the platform and current event.
   
   
4. The Widget BG settings is where you set the overall width and height of the widget, whether you want to round the corners, add a border via its width and color and set the color of the BG. 
   -If you want the BG to be invisible type “none” into the BG and Border color settings.
   -If you want circled edges, set the rounded corners to half the px size of the height of the widget.
   
   
5. Once you are happy with the settings and look of your widget, click on Save at the very bottom of the page.
   
   
6. To add it to your streaming software, scroll to the top of the screen, and copy the Widget URL link and paste it into a 1280x720 browser source in OBS. 
   
   

Note that specific link will always show the currently Active themes widget. If you would like to use multiple of our Streamlabs widgets, click on “Alertbox” on the left toolbar, then click into the Theme dropdown menu, then View all Themes. Next to the theme of the widget you would like to use, click on the link icon on the left, and select the specific link for the event widget to add into OBS. 

1. To customize this widget, scroll down to the bottom of the page where you see “HMTL/CSS/JS/Custom Fields” and select Custom Fields if it’s not already active.
   
   
2. You’ll see the settings split across 4 categories; Hypetrain Settings, Event Values, Text and Widget BG Settings.
   
   
3. In the Hypetrain Settings, you can set the overall monetary costs of each level as well as individually change the color for each level of the hypetrain. You can also set the duration of all levels at the bottom of the list.
   
   
4. In the Event Values, you can set the monetary amount of each event. They are grouped as Twitch Follow/ Youtube Subscriber, Twitch Subscriber & Youtube Member, and Streamlabs Donation and Youtube Superchat as well as the value for individual Bits.
   
   
5. In Text Settings, you can set the Font type/color/weight/size as well as the font size of the Percentage amount.
   
   
6. In the Widget BG settings, you can set the rounded corners, the background color, border width and rounded corner value of the goal bar.
   
   
7. Once you are happy with the settings and look of your widget, click on Save at the very bottom of the page.
   
   
8. To add it to your streaming software, scroll to the top of the screen, and copy the Widget URL link and paste it into a 1280x720 browser source in OBS. 

Note that specific link will always show the currently Active themes widget. If you would like to use multiple of our Streamlabs widgets, click on “Alertbox” on the left toolbar, then click into the Theme dropdown menu, then View all Themes. Next to the theme of the widget you would like to use, click on the link icon on the left, and select the specific link for the event widget to add into OBS.