Snow Globe Goal 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!


🚀 Quick Start Guide

Step 1: Basic Setup

  1. Select Goal Type: Choose from the dropdown (e.g., "Subscriber Goal", "Tip Goal", "Follower Goal")
  2. Set Target Number: Enter your goal amount in the "Goal" field
  3. Add Goal Label: Customize the text that appears with your goal (e.g., "Sub Goal", "Donation Drive")

Step 2: Visual Customization

  1. Choose Wave Colors: Set your primary, secondary, and accent wave colors to match your brand
  2. Adjust Animation: Use wave speed and intensity sliders to find the perfect flow
  3. Position Text: Select whether goal information appears above or below the cat

Step 3: Test Your Widget

  1. Enable Demo Mode: Turn on the demo checkbox to see your widget in action
  2. Adjust Demo Speed: Use the speed slider to control how fast the preview cycles
  3. Fine-tune Settings: Make any final adjustments to colors, text, or effects

Step 4: Go Live

  1. Disable Demo Mode: Turn off demo when you're happy with the appearance
  2. Add to OBS: Copy the widget URL into your streaming software
  3. Monitor Progress: Watch as your community helps fill the cute cat with every contribution!

Customization Fields

Behavior Settings (Shared)

Name Rewritten Description
Goal Type (eventType ) Choose which metric to track. Platform options differ (see Platform Notes).
Goal (goal ) Set the target value to reach.
Display Type (displayType ) Choose how to display progress: Percentage, Count, or Count/Total.
Demo Mode (enableTestMode ) Simulate filling and draining for previews.
Demo Speed (demoSpeed ) Set demo animation speed multiplier (0.5–5x).

Design Settings (Shared)

Name Rewritten Description
Primary Wave Color (waveColor1 ) Base liquid color (hex).
Secondary Wave Color (waveColor2 ) Second gradient color (hex).
Accent Wave Color (waveColor3 ) Accent gradient color (hex).
Wave Animation Speed (waveSpeed ) Adjust wave motion speed (0.2–3).
Wave Intensity (waveIntensity ) Control wave height/complexity (0.3–2).
Wave Highlight Color (waveHighlightColor ) Surface highlight color (hex).
Glow Intensity (glowIntensity ) Strength of inner liquid glow (0–2).
Globe Glow Intensity (ballGlowIntensity ) Outline/globe glow strength (0–4).
Globe Glow Color (ballGlowColor ) Outline/globe glow color (hex).

Message Settings (Shared)

Name Rewritten Description
Text Position (textPosition ) Place the label/value at the Top or Bottom.
Text Color (textColor ) Color for both label and value (hex).
Font Family (fontFamily ) Choose a Google Font.
Label Font Size (labelSize ) Label text size (px).
Label Font Weight (labelWeight ) Label weight (Normal/Bold).
Label Color (labelColor ) Label color (hex).
Value Font Size (valueSize ) Value text size (px).
Value Font Weight (valueWeight ) Value weight (Normal/Bold).
Enable Text Glow (textGlow ) Toggle glow on label/value.
Text Glow Color (textGlowColor ) Glow color (hex).

Event & Effects Settings (Shared)

Name Rewritten Description
Enable Bubble Effects (enableSparkles ) Toggle liquid bubble/sparkle particles.
Bubble Intensity (sparkleIntensity ) Number/brightness of sparkles (0.2–2).
Enable Pop Effect (enablePopParticles ) Burst particles on increments toward the goal.
Pop Particle Color (popParticleColor ) Color of pop particles (hex).
Pop Particle Intensity (popParticleIntensity ) Amount of pop particles (0.2–3).
Enable Completion Celebration (enableCompletionCelebration ) Trigger celebration when reaching 100%.
Celebration Particle Type (celebrationParticleType ) Use Stars or a Custom Image.
Custom Particle Image (celebrationParticleImage ) Image used when type is Custom.
Particle Color (celebrationParticleColor ) Color tint for celebration particles (hex).
Particle Glow Color (celebrationGlowColor ) Outer glow color (hex).
Celebration Intensity (celebrationIntensity ) Number/energy of celebration particles (0.5–3).
Enable Snow Effect (enableSnowEffect ) Toggle snow-globe snowfall.
Snow Particle Count (snowParticleCount ) Number of snow particles (10–150).
Snow Particle Size (snowParticleSize ) Average flake size (1–5).
Snow Speed (snowSpeed ) Fall/sway speed of snow (0.3–3).

Platform Notes (Differences)

Topic Twitch YouTube
Goal Type (eventType ) Follower, Subscriber, Tip, Cheer (total/session/week/month/goal variants). Sponsor, Subscriber, Superchat, Tip/Donation (total/session/week/month/goal variants).
Currency display Shown for Tip goals. Shown for Tip/Donation and Superchat goals.

⚠️ 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 Reset Goals

There’s a chance that you already used goal widgets on your stream before, or maybe there was something that messed up your data or, obviously, you reached your goals and want to start from scratch, here’s what you need to do to ensure everything works as intended

  1. Press the settings icon located in the top right corner of your screen.

  2. Navigate to the "Session Data" section.

  3. Click on "Reset Goals”
  4. Confirm by clicking "Save Changes" and then close the window.
  5. Finally, click "SAVE" in the top right corner of your screen and refresh the page.

Troubleshooting

At times, the widget may not reflect the most current data, displaying an incorrect goal count. This is often due to a delay in channel data updates. To resolve this and sync the latest information, please follow the steps below:

  1. Press the settings icon located in the top right corner of your screen.

  2. Navigate to the "Session Data" section.

  3. Click on "Reset Session".

  4. Confirm by clicking "Save Changes" and then close the window.
  5. Finally, click "SAVE" in the top right corner of your screen and refresh the page.

By following these instructions, your widget should display the correct goal amounts, reflecting the most up-to-date data from your channel.

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!