Gradient Event List Widget

Thanks for downloading our Gradient Event List 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

  1. Log in to Streamelements with your Youtube or Twitch account
  2. Go to the “2. Widget” folder in the package you’ve downloaded
  3. 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

  1. Pick your widget in your StreamElements dashboard and click “Edit”

  1. Click on “Layers” and go to “Gradient Event List”

  1. Go to the “Settings” tab

  1. Woohoo, here you can customize everything to your taste :)

Customization Options

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

Tailor the design of your widget to match your style with a range of customizable settings. These options let you adjust text characteristics, spacing, and other elements for a polished and personalized appearance.

Name Description
Font Name Choose from a variety of Google Fonts for your text.
Font Weight Adjust the thickness of your font.
Highlight Font Weight Set the thickness for highlighted font sections.
Font Size Determine the size of your text.
Icon Size Customize the size of icons within the widget.
Padding Define the space between text and the gradient edges at the top and bottom.
Spacing Control the distance between individual events.
Border Roundness Adjust the roundness of corners for visual elements.

Behavior

Modify the behavior of your widget to better match your streaming style with these specific settings. Adjust how events are displayed and how the gradient animations behave for a more dynamic viewer experience.

Name Description
Max Events Set the maximum number of events that can be displayed simultaneously.
Gradient Animation Speed Adjust the speed of gradient animations when they are active.

Global Events Control

This widget offers two distinct color modes to personalize your events: Global and Event-Specific. The Global Controls allow you to establish a uniform color scheme across all events, ensuring a cohesive visual experience. When you set the Icon Color, Font Color, and Background Color in the Global Controls, these choices become the default colors for every event within the widget.

To activate the global color settings, it's necessary to adjust each event's individual settings. You'll find an option titled "Overwrite Global Color" within the settings of each event. By default, this may be enabled, allowing you to assign unique colors to that particular event. However, if you prefer a harmonized color theme across all events, you'll need to disable the "Overwrite Global Color" option for each event. Once disabled, the global color settings will take precedence, ensuring that all events reflect the universal color choices you've selected.

Name Description
Global Icon Color Set a uniform color for all icons.
Global Gradient Color 1 Choose the starting color for global gradients.
Global Gradient Color 2 Select the ending color for global gradients.
Global Font Color Define a consistent color for all text elements.

Specific Event Controls

Name Description
Enable Event Toggle to activate or deactivate a specific event.
Overwrite Global Color Choose to use individual color settings, independent of global options.
Icon Color Customize the color of the event's icon.
Gradient Color 1 Set the starting color for the event's gradient.
Gradient Color 2 Choose the ending color for the event's gradient.
Font Color Select a specific color for the event's text.
Template Define a display template with placeholders like {{amount}} or {{name}} (more on that below)
Pluralization Single Specify singular forms for units (e.g., 1 Dollar, 1 Month, 1 Bit).
Pluralization Multiple Define plural forms for units (e.g., 20 Dollars, 3 Months, 1000 Bits).
Animation Minimum Set the minimum amount required to trigger gradient animation; set to -1 to disable, 0 for always active.

*Pluralization & animation minimum is not available for Followers (Twitch) and Subscribers (YouTube)

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 five available variables: {{icon}}, {{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
{{icon}} Displays the associated event icon.
{{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}}.

Sample Layouts

Here are a few examples of how you can structure your text fields:

Layout Format Example Output
{{name}} {{currency}}{{amount}} Alex $20
{{icon}} {{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:

  1. Open “Position, size and style” menu

  1. 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

  1. Copy the URL of your Widget from the StreamElements dashboard
  2. Open OBS Studio
  3. Click “Add Source” (plus icon) in the Sources section.
  4. Add a “Browser” source, give it a name, and press “Ok”
  5. Paste the URL you’ve copied
  6. Set the width to 1920 and the height to 1080
  7. Press “Ok” and we’re done!

Streamlabs Desktop

  1. Copy the URL of your Widget from the StreamElements dashboard
  2. Open Streamlabs Desktop
  3. Click “Add a new Source” (plus icon) in the Sources section.
  4. Choose “Browser Source”, give it a name, and press “Add Source”.
  5. Paste the URL you’ve copied previously
  6. Set the width to 1920 and the height to 1080
  7. Now press “Close” and that’s it! Your widget is ready to use!