Free Minimal Event Bar Widget
Thanks for downloading our Free Minimal Event Bar Widget
Here you will find instructions on how to set everything up and an in-depth description of its possibilities.
⚠️ Take note: This widget is hosted on StreamElements and works only with StreamElements donations — make sure you have a StreamElements account before setting it up!
Setup Guide
- Log in to Streamelements with your Youtube or Twitch account
- Go to the “2. Widget” folder in the package you’ve downloaded
- Pick the file that corresponds to your streaming platform (Twitch or YouTube) and double-click to install it.
Voila! Your widget is installed!
Widget Customization
Pick your widget in your StreamElements dashboard and click “Edit”
- Click on “Layers” and go to “Minimal Hud”
- Go to the “Settings” tab
- Woohoo, here you can customize everything to your taste :)
Customization Options
⚠️ IMPORTANT
For all of your customizations to take effect, you need to press "Save" in the top right corner of the editor and refresh the page before adding the widget to your streaming software!
Design
Enhance the aesthetics of your widget with these design settings. They allow you to modify various elements, from background color to text styling, ensuring your widget aligns seamlessly with your stream's visual theme.
| Name | Description |
|---|---|
| Background Color | Set the background color for the entire widget. |
| Corner Roundness | Adjust the roundness of the widget's corners. |
| Font Name | Choose from a range of Google Fonts for your text. |
| Font Weight | Define the thickness of your widget’s font. |
| Highlight Font Weight | Set the thickness for text that is highlighted. |
| Font Color | Customize the color of your widet’s font. |
| Font Size | Adjust the size of the font used in the widget. |
| Padding | Set the space between the border and the text. |
| Icon Size | Adjust the size of icons displayed within the widget. |
| Icon Text Spacing | Set the spacing between icons and text. |
| Train Fill Color | Choose a background color for the filled train section. |
| Train Fill Font Color | Set the font color for text on the filled train section. |
| Train Empty Color | Define the background color for the empty train section. |
| Train Empty Font Color | Select the font color for text on the empty train section. |
| Train Font Size | Adjust the font size for the train count. |
Train Options
The Train feature in our widget is designed to dynamically showcase subscriber, gift, and follower activities on your stream. Each time someone follows, subscribes, or sends gifted subs, a count on the right side of your stream updates in real time. This feature plays a pivotal role in fostering a sense of community and excitement, encouraging more viewer interaction and showing appreciation for their support.
| Name | Effect |
|---|---|
| Train Trigger Event | Choose the event that activates the train. Options include Subscriber & Gifts, Follower, or Disabled. |
| Train Duration (Seconds) | Set the duration for the train before it resets, defaulting to 300 seconds (5 minutes). |
Events
| Name | Effect |
|---|---|
| Enable Event Name Event | Enables/disables the event in the rotator. Disabled = not shown in widget. |
| Event Name Event Icon | Choose an icon to display alongside the event text. |
| Event Name Event Icon Color Overlay | Set the color of the event icon. |
| Event Name Event Template | Template to enable event display customization. This is an advanced setting - more info about it below! |
| Event Name Pluralization Single | Single pluralization value. Aka 1 Month, 1 Bit, 1 Raider. |
| Event Name Pluralization Multiple | Multiple pluralization value. aka 5 Months, 300 Bits, 25 Raiders. |
Text Fields Customization
This section will guide you through tailoring the text fields within your widget to fit your unique style and preferences:
- Utilize any of the four available variables: {{name}}, {{amount}}, {{plural_amount}}, and {{currency}} to dynamically insert content.
- This widget is designed to support a variety of languages and currency symbols so you can use it in your native language easily.
- Emphasize parts of your text by enclosing them within double angle brackets: << >>. For instance, <<This will be highlighted>>.
- Feel free to insert your own words between the variables for a personalized touch. Example: {{name}} generously contributed {{amount}}.
Variable Definitions
| Variable | Description |
|---|---|
| {{name}} | Inserts the user's name (e.g., Mike). |
| {{amount}} | Shows the numeric value of the event (e.g., 200). |
| {{currency}} | Includes the currency symbol (e.g., $). |
| {{plural_amount}} | Adds the plural form of the unit (e.g., Bits for multiple). |
Note: The {{plural_amount}} variable adjusts to match the quantity specified by {{amount}}.
Default Templates
| Event | Template | Result |
|---|---|---|
| Follow | {{name}} <<#{{amount}}>> | Kudos #234 |
| Subscriber | {{name}} <<{{amount}} {{plural_amount}}>> | Kudos 4 Months |
| Cheer/Bits | {{name}} <<{{amount}} {{plural_amount}}>> | Kudos 3349 Bits |
| Tip/Donation | {{name}} <<{{currency}}{{amount}}>> | Kudos $4.20 |
Sample Layouts
Here are a few examples of how you can structure your text fields:
| Layout Format | Example Output |
|---|---|
| {{name}} {{currency}}{{amount}} | Alex $20 |
| {{name}} <<{{amount}} {{plural_amount}}>> | Alex 20 Followers |
| NEW <<DONATION>>: {{name}} | NEW DONATION: Alex |
These templates serve as a starting point. You can mix and match variables and text to create a format that resonates with your brand and engages your audience.
Size and Opacity
This widget is fully responsive - you can change its size however you want to and it will always look nice. To do that simply follow these steps:
- Open “Position, size and style” menu
- Change height, width, and opacity to your liking
⚠️ IMPORTANT
For all of your customizations to take effect, you need to press "Save" in the top right corner of the editor and refresh the page before adding the widget to your streaming software!
How to Add it to the Streaming Software?
OBS Studio
- Copy the URL of your Widget from the StreamElements dashboard
- Open OBS Studio
- Click “Add Source” (plus icon) in the Sources section.
- Add a “Browser” source, give it a name, and press “Ok”
- Paste the URL you’ve copied
- Set the width to 1920 and the height to 1080
- Press “Ok” and we’re done!
Streamlabs Desktop
- Copy the URL of your Widget from the StreamElements dashboard
- Open Streamlabs Desktop
- Click “Add a new Source” (plus icon) in the Sources section.
- Choose “Browser Source”, give it a name, and press “Add Source”.
- Paste the URL you’ve copied previously
- Set the width to 1920 and the height to 1080
- Now press “Close” and that’s it! Your widget is ready to use!