Horizontal Event List Widget

Thanks for downloading our Horizontal 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 “Horizontal Event List”

  1. Go to the “Settings” tab

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

Name Description
Font Name Choose from Google Fonts selection
Font Weight Set the standard thickness of the text
Highlight Font Weight Define the thickness for emphasized text
Padding Adjust the space around the text
Font Size Specify the text size (in pixels)
Icon Size Determine the size of icons (in pixels)

Global Controls

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
Icon Color Sets the universal color for all icons
Font Color Sets the default text color
Background Color Sets the default background color

Specific Event Controls

Name Description
Enable Event Toggles the visibility of the specified event
Overwrite Global Color Allows event-specific colors, overriding global settings
Icon Color Determines the icon color for the event
Background Color Sets the background color for the event
Font Color Sets the text color for the event
Template Chooses the layout template for the event display
Pluralization Single Sets the singular form for items (e.g., "1 Month", "1 Bit")
Pluralization Multi Sets the plural form for items (e.g., "2 Months", "200 Bits")

*Pluralization is not available for Follow (Twitch) and Subscriber (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!