Pixel Potion 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
- 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 your widget.
- Go to the “Settings” tab
- 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 Configuration
- Select Goal Type: Choose from the dropdown (e.g., "Subscriber Goal", "Tip Goal", "Follower Goal")
- Set Target Amount: Enter your goal number in the "Goal" field
- Customize Label: Set your goal text (e.g., "Potion Goal", "Magic Milestone", "Brew Challenge")
Step 2: Style Your Potion
- Choose Potion Colors: Set primary, secondary, and accent wave colors for your magical liquid
- Adjust Rotation: Use the rotation slider to angle your potion bottle perfectly (-180° to +180°)
- Fine-tune Animation: Control wave speed and intensity for the perfect magical flow
- Enable Effects: Turn on bubble effects for extra sparkle in your potion
Step 3: Customize Text & Layout
- Position Goal Text: Choose to display progress above or below the potion
- Select Typography: Pick your favorite Google Font and adjust sizes
- Add Text Glow: Enable glow effects for better visibility over any background
- Set Colors: Customize text colors to match your streaming brand
Step 4: Test & Launch
- Enable Demo Mode: Turn on demo to see your widget cycle through different fill levels
- Adjust Demo Speed: Control how fast the preview animation runs
- Perfect Your Settings: Make final tweaks to colors, rotation, and effects (and don’t forget to disable the demo mode!)
- Go Live: Add to your streaming software and start brewing some magic!
Customization Fields
Basic Settings
| Field Name | Description |
|---|---|
| Goal Type | Select the type of goal to track (follower/subscriber/tip/cheer with various time periods) |
| Goal | Set the target number for your goal |
| Goal Label | Text displayed with the progress value (e.g., "Potion Goal", "Magic Milestone") |
| Display Type | Choose how progress is shown: Percentage, Count, or Count/Total format |
Wave Appearance
| Field Name | Description |
|---|---|
| Primary Wave Color | Main color of the magical liquid (base layer) |
| Secondary Wave Color | Secondary color for potion depth and variation |
| Accent Wave Color | Accent color for liquid highlights and magical texture |
| Wave Highlight Color | Color used for surface reflections and magical light effects |
| Wave Animation Speed | Controls how fast the liquid moves (0.2x to 3x speed) |
| Wave Intensity | Adjusts the height and movement of wave peaks |
| Potion Rotation (degrees) | Rotate the entire potion bottle from -180° to +180° |
| Background Color | Set a custom background color for the widget area |
| Enable Bubble Effects | Toggle floating magical bubble/sparkle particles within the liquid |
| Bubble Intensity | Controls density and movement of bubble effects (when enabled) |
| Glow Intensity | Adjusts the intensity of magical glow effects around waves and particles |
Demo & Testing
| Field Name | Description |
|---|---|
| Enable Demo Mode | Activates automatic cycling through different fill levels for testing |
| Demo Speed (x) | Controls how fast the demo cycles from empty to full (0.5x to 5x speed) |
Interactive Effects
| Field Name | Description |
|---|---|
| Enable Pop Effect on Goal | Shows pixel particle burst when new events occur (follows, subs, etc.) |
| Pop Particle Color | Color of pixel particles that appear when new events trigger |
| Pop Particle Intensity | Controls size and quantity of pop effect particles |
Celebration Effects
| Field Name | Description |
|---|---|
| Enable Completion Celebration | Triggers special pixel star effects when goal reaches 100% |
| Celebration Particle Type | Choose between pixel stars or custom uploaded image |
| Custom Particle Image | Upload your own pixel art for celebration particles (when custom type selected) |
| Particle Glow Color | Magical glow/outline color for celebration particles |
| Celebration Intensity | Controls size, quantity, and duration of celebration effects |
Text Styling
| Field Name | Description |
|---|---|
| Text Position | Position goal text above or below the potion container |
| Text Color | Primary color for goal progress text |
| Font Family | Google Fonts selection for all text elements |
| Label Font Size | Size of the goal label text (in pixels) |
| Label Font Weight | Font weight for goal label (Normal or Bold) |
| Label Color | Specific color for the goal label text |
| Value Font Size | Size of the progress value text (in pixels) |
| Value Font Weight | Font weight for progress value (Normal or Bold) |
| Enable Text Glow | Adds magical glow effect around all text for better visibility |
| Text Glow Color | Color of the glow effect around text (when enabled) |
⚠️ 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
Press the settings icon located in the top right corner of your screen.
Navigate to the "Session Data" section.
- Click on "Reset Goals”
- Confirm by clicking "Save Changes" and then close the window.
- 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:
Press the settings icon located in the top right corner of your screen.
Navigate to the "Session Data" section.
Click on "Reset Session".
- Confirm by clicking "Save Changes" and then close the window.
- 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
- 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!