Donation Price List Widget

Thanks for downloading our 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!

Widget Installation

  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”

  2. Click on “Layers” and go to your widget.

  3. Go to the “Settings” tab

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

⚠️ 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!

Customization Fields

🎯 Basic Setup

Name Description
Title Text shown as the widget title at the top.
Visible Items How many items from the list are visible at once (1–20).
Widget Scale Overall scale of the card (shrinks or enlarges the whole widget).
Enable Idle State (disable floating) When enabled, rows stop floating and only animate briefly when redeemed.
Enable Redeem Mode (tips/bits or tips/superchats trigger items) Turn on redeem logic so tips/bits (Twitch) or tips/SuperChats (YouTube) can trigger items.
Redeem Cooldown (seconds) How long a redeemed item stays in the "Redeemed by…" state before it resets.

📝 Item List

Each item has its own set of fields (1–20):

Name Description
Item N Label Text label for the item (e.g. "Hydrate", "Change Scene").
Item N Price Amount required to redeem this item (integer or decimal).
Item N Currency Which currency triggers this item: Twitch: Bits / Tips ($). YouTube: SuperChat / Tips ($).

Behavior:

  • Exact-price match – A redeem only triggers if the sent amount matches one item’s price for the chosen currency.
  • Per-item queue – If an item is already active, additional redeems of the same item are queued and played after the cooldown.

🔤 Fonts & Sizing

Name Description
Widget Font Family Google Font used for the title and all items.
Widget Font Weight Overall font weight (from Regular to Black).
Title Size (px) Font size for the title.
Item Size (px) Font size for item labels. Price text scales with row height and respects this cap.

🌈 Colors

Name Description
Title Color Color of the title text.
Card Background Background color of the main card.
Row Background Background color of each item row.
Price Badge Background Background color of the price pill on the left (or right).
Item Text Color Color of the item labels.
Price Text Color Color of the price text and currency icon.
Present Icon Color Color of the present icon that appears while an item is redeemed.

📐 Layout

Name Description
Item Alignment Horizontal alignment of the item labels (Left / Center / Right) within their row.
Price Badge Alignment Which side the price badge sits on (Left or Right of the row).
Card Corner Radius Roundness of the outer card corners.
Row Corner Radius Roundness of each row. Larger values make pill-shaped rows.
Row Gap Vertical space between rows.
Row Height Height of each row; also controls price badge and icon sizing.
Card Padding Inner padding around the list inside the card.

💰 Redeem & Animation Behavior

Aspect Description
Redeem Message When an item is redeemed, its label temporarily changes to "Redeemed by <username>" with a smooth bold/opacity animation.
Present Icon A present icon appears on the opposite side from the price badge while the item is redeemed and animates in sync with the label.
Cooldown & Exit After the cooldown, the row plays a smooth exit animation and then returns to its normal label. Queued redeems for that item start automatically afterward.
Idle State Animations In idle mode, rows do not wave; redeemed rows fade/slide in and out more subtly.
Floating State Animations When idle is disabled, rows have a gentle wave motion. Redeemed labels and the present icon pulse and breathe while active.
Equalized Price Widths All price badges automatically widen to match the widest price so the list looks aligned.

📺 Platform-Specific Behavior

Platform Description
Twitch Redeems can be triggered by tips (dollar amounts) or bits. Bits use an icon inside the price badge; tips show a $  symbol.
YouTube Redeems can be triggered by Tips ($) or SuperChats. SuperChats use a YouTube-style SuperChat icon inside the price badge, colored by the price text color.

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!