Essential Widgets Guide

Welcome, this is a short guide on how to take advantage of our widgets in our essentials collection, if you can’t get the full support from this guide, please make sure to join our discord for live support.

Please do note that our essentials widgets are all designed in Streamelements custom widget editor. We will look into Streamlabs versions in the future.

Table of Contents

1. Countdown Widget

For the streamers that don't need 5 minute long renders of their starting soon screen. Just insert a short looping bg video, set the timer and format settings, then refresh the browser source to reset the timer.
Simple and effective, and why its made it onto our essentials widget list.

We built this widget on Streamelements due to the custom widget options that Streamelements allows. Regardless of that, this is a platform agnostic widget, and will work on OBS or Streamlabs Desktop the same.

1. Start by double clicking the One_Click Link in the product folder you received. This will add the overlay to your streamelements account.

2. Click on Edit to edit your new Overlay.

3. You are now in the Overlay Editor. Click on layers > Countdown timer > settings > then click on the settings dropdown that’s underneath “Open Editor”. 

4. Here you will see all the settings, you can edit. Edit as you please.

5. When you are done, Press Save and click on the link icon next to Preview to copy the link to your new rotator.

6. Open OBS or Streamlabs Desktop and add it to a 960x540 browser source.

7. In the browser source settings on both OBS and Streamlabs Desktop, makes sure Shutdown source when not visible is turned on, as this refreshes the browser every time you switch to the scene, allowing for an easy timer reset.

8. If you come up with a great design for a timer, share it in our discord .

2. Sponsor and Social Rotator

For streamers that are sick of re-rendering their Sponsor rotators when they get a new Sponsor. Saving large file sizes due to long social loops, this widget will stitch together up to 10 video or images to rotate for your scenes!

1. Start by double clicking the One_Click Link in the product folder you received. This will add the overlay to your streamelements account.

2. Click on Edit to edit your new Overlay.

3. You are now in the Overlay Editor. Click on layers > Sponsor Widget > Settings.

This is where you'll find all the customisable settings in the widget.

4. Click on the Delay dropdown, here you have a Start Delay (s) and Full Loop Delay (mins) settings. Edit as necessary.

Start Delay: Adds delay at the start of the full loop

Full Loop Delay: Adds a total delay at the end of all used sponsor slots

5. Click on the Sponsor 1 dropdown. Set an Image or Video, then Duration and the Fade In/Out settings.

6. Repeat with other Sponsor or Social assets you would like to add.

7. Press Save and click on the link icon next to Preview to copy the link to your new rotator.

8. Open OBS or Streamlabs Desktop and add it to a 960x540 browser source.


Extra things you can do:

Duplicate the Overlay, and add different variants for different scenes or to group socials and sponsors seprately.

Take advantage of the Start Delay to overlap different Rotators on top of each other.

i.e:
Rotator 1: 3 Sponsors - 10s each - Start Delay 0s - End Delay 9.5 mins. Total Loop Time = 10mins
Rotator 2: 3 Socials - 10s each - Start Delay 300s (5mins) - End Delay 4.5mins. Total Loop Time = 10mins

Total Loop is 10 minutes. So in this situation, Rotator 1 will start rotating its 3 sponsors then go into delay for 9min30s to finish off a 10min loop. 5mins in Rotator 2 will start it's Social rotation, followed by a 4min30s delay to finish its 10min loop.

Resulting in 30s Rotations alternating every 5 mins.

3. Last Event Label

A custom label widget that will always show the last event your channel has received. Fits perfectly on our event boxes or cam overlays, with the option to select which event, customise the font and animation settings, as well as the position of each data section.

1. Start by double clicking the One_Click Link in the product folder you received. This will add the overlay to your streamelements account.

2. Click on Edit to edit your new Overlay.

3. You are now in the Overlay Editor. Click on layers > Last Event Widget > Settings.

This is where you'll find all the customisable settings in the widget.

4. Start by clicking on the Event Settings dropdown. Here you will find all of the available events with the option to turn them on or off. Select the ones you require, and move onto the next step.

5. Click on the Animations dropdown. This area is split into 3 sections. Main Data/Event Data/Icon. Each section has 3 timing options + an animation dropdown. Select the settings you want.

Intro Timing: The intro animation duration.

Intro Delay: The time before the animation starts.

Outro Timing: The outro animation duration.

6. The next dropdown is the Font Settings. You'll find the general font style settings for each section. Customise as you please.

7. Finally we have our position settings. This is where you can position each data section horizontally and vertically. Mix this with Text Align in your Font Settings to get the desired look you want.

Note: The Horizontal slider goes from -100% to 100%. If you have a section on Left Align, use the positive values, and negative values for Right Aligned sections.

8. Press Save and click on the link icon next to Preview to copy the link to your new rotator.

9. Open OBS or Streamlabs Desktop and add it to a 960x540 browser source.

4. 4-Event Rotator

A custom label widget that rotates 4 data sets for you in a neat and organised manner. Fits perfectly in our event boxes, with resources in discord to get them looking like the rest of your pack!

1. Start by double clicking the One_Click Link in the product folder you received. This will add the overlay to your streamelements account.

2. Click on Edit to edit your new Overlay.

3. You are now in the Overlay Editor. Click on layers > Events Rotator Widget > Settings.

This is where you'll find all the customisable settings in the widget.

4. Start by clicking on the Event Settings dropdown. Here you will find all of the available Event settings to edit what you want on each rotation.

Each of the 4 events have these options to choose from:

Event Type: Choose which event to display

Icon: Choose the correct icon for your event

Main Text: A text box to input data with prefixes and/or extra text.

Subtitle Text: An extra text box to separate the data or text

Use these prefixes to call the correct data:

%name - Displays the Name

%sender - Displays the Name of the Gifter (if you use %name for gifted-latest, it will return the last gift receivers name, vs the gifted senders name)

%amount - Displays the Amount for events that show monetary value (bits/stars/dono/superchat), months (subscriber/supporter/member), or gifted amount.

%count - Displays the count number for events that show a count of something; session/weekly/monthly/total/goal events all use counts

5. Click on the Animations dropdown. This area is split into 3 sections. Main Data/Event Data/Icon. Each section has 3 timing options + an animation dropdown. Select the settings you want.

Intro Timing: The intro animation duration.

Intro Delay: The time before the animation starts.

Outro Timing: The outro animation duration.

6. The next dropdown is the Font Settings. You'll find the general font style settings for each section. Customise as you please.

7. Finally we have our position settings. This is where you can position each data section horizontally and vertically. Mix this with Text Align in your Font Settings to get the desired look you want.

Note: The Horizontal slider goes from -100% to 100%. If you have a section on Left Align, use the positive values, and negative values for Right Aligned sections.

8. Press Save and click on the link icon next to Preview to copy the link to your new rotator.

9. Open OBS or Streamlabs Desktop and add it to a 960x540 browser source.

5. Advanced Labels

A different take on Streamelements base label widget. Customise or edit data/events/icons separately with delay and animation options. Updated with new animations as our coders store them in our library of custom text animations.

1. Start by double clicking the One_Click Link in the product folder you received. This will add the overlay to your streamelements account.

2. Click on Edit to edit your new Overlay.

3. You are now in the Overlay Editor. Click on layers > Label Widget > Settings.

This is where you'll find all the customisable settings in the widget.

4. Start by clicking on the Event Settings dropdown. Here you will find all of the available Event settings to edit what event and how you want to show it.

Icon: Choose the correct icon for your event

Main Text: A text box to input data with prefixes and/or extra text.

Subtitle Text: An extra text box to separate the data or text

Use these prefixes to call the correct data:

%name - Displays the Name

%sender - Displays the Name of the Gifter (if you use %name for gifted-latest, it will return the last gift receivers name, vs the gifted senders name)

%amount - Displays the Amount for events that show monetary value (bits/stars/dono/superchat), months (subscriber/supporter/member), or gifted amount.

%count - Displays the count number for events that show a count of something; session/weekly/monthly/total/goal events all use counts

5. Click on the Animations dropdown. This area is split into 3 sections. Main Data/Event Data/Icon. Each section has 3 timing options + an animation dropdown. Select the settings you want.

Intro Timing: The intro animation duration.

Intro Delay: The time before the animation starts.

Outro Timing: The outro animation duration.

To test out the animation, click on Emulate Animation > Allow tests > Test Me!
Make sure to turn of Allow tests when you are happy.

6. The next dropdown is the Font Settings. You'll find the general font style settings for each section. Customise as you please.

7. Finally we have our position settings. This is where you can position each data section horizontally and vertically. Mix this with Text Align in your Font Settings to get the desired look you want.

Note: The Horizontal slider goes from -100% to 100%. If you have a section on Left Align, use the positive values, and negative values for Right Aligned sections.

8. Press Save and click on the link icon next to Preview to copy the link to your new rotator.

9. Open OBS or Streamlabs Desktop and add it to a 960x540 browser source.

More from our blog

Quidam officiis similique sea ei, vel tollit indoctum efficiendi nihil tantas platonem eos.

View All

GETREKT Labs and GETREKT Elements create custom and pre-made stream overlays for YouTube, Facebook, Twitch, Kick, Tiktok and all major streaming platforms, for use with StreamElements, StreamLabs and OBS.

GETREKT Labs features custom stream overlays, animated Twitch overlays, interactive stream assets, 3D world building, Unreal Engine 5 environments, custom widgets, stream overlays for OBS, camera overlays, reactive overlays, emotes, alerts, sound effects (sfx), set-up, coding and more for all items. Set-up includes all platforms and integration with StreamLabs, Stream Elements and OBS.

GETREKT Elements features pre-made stream overlays and assets, including animated Twitch stream overlays, camera overlays, stream layouts, emotes, alerts, sfx, Twitch panels, scene transitions, stingers, OBS overlays and more – all with an easy 1 click set up in StreamLabs and StreamElements with OBS.

Looking for your Wishlist?

You must have an account and be signed in to access your wishlist

Don't worry you can continue shopping without creating an account, but you won't be able to save items to your wishlist