Halloween Goal Widget
Thanks for downloading our Halloween Goal 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
- 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 “Halloween Goal”
- Go to the “Settings” tab
- 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!
Goal Settings
This widget allows you to monitor a variety of goal types tailored to either Twitch or YouTube. For Twitch streams, you can track Followers, Subscribers, Cheers, and Tips. For YouTube, the widget supports Sponsors/Members, Subscribers, Superchats, and Tips. You're empowered to set the goal amount, personalize the goal message on the display, and choose from different display styles to best suit your stream's theme.
| Name | Description |
|---|---|
| Goal Label | The name or title of your goal. |
| Display Type | How the progress of your goal will be shown (e.g., percentage, number). |
| Goal Amount | The target number or amount you're aiming for. |
| Goal Type | The type of goal, like followers, subs, or donations. |
Design Settings
For fine-tuning the visual aspects of your widget, the graphic settings section provides control over various features. Whether you want to add an outline, adjust effect colors, or play with color hues, these settings let you customize the widget's appearance to match your stream's aesthetic.
| Name | Description |
|---|---|
| Text Position | Where the text appears on the widget. |
| Icon Selection | Choose which icon to display. |
| Custom Icon | Upload a custom icon of your choice. |
| Icon Color 1 | The first color for the icon’s gradient. |
| Icon Color 2 | The second color for the icon’s gradient. |
| Enable Big Icon | Turn on a larger icon display. |
| Icon Background Color 1 | The first color for the icon background gradient. |
| Icon Background Color 2 | The second color for the icon background gradient. |
| Icon Background Stroke Width | Thickness of the border around the icon background. |
| Icon Background Stroke Color | Color of the border around the icon background. |
| Cobweb Color 1 | The first color for the cobweb gradient (for a themed design). |
| Cobweb Color 2 | The second color for the cobweb gradient. |
| Bar Background Stroke Width | Thickness of the border around the progress bar. |
| Bar Background Stroke Color | Color of the border around the progress bar. |
| Bar Background Color 1 | The first color for the progress bar background gradient. |
| Bar Background Color 2 | The second color for the progress bar background gradient. |
| Bats Color | Color of the bats in the background (for a themed design). |
| Bar Fill Color 1 | The first color for the progress bar fill gradient. |
| Bar Fill Color 2 | The second color for the progress bar fill gradient. |
| Bar Fill Stroke Width | Thickness of the outline around the progress bar fill. |
| Bar Fill Stroke Color | Color of the outline around the progress bar fill. |
| Bar Border Roundness | How rounded the edges of the progress bar are. |
| Bar Height | The vertical size of the progress bar. |
Text Settings
You can refine the text elements of your widget to enhance readability and fit your channel's branding. From spacing to font selection, each setting is designed to give you full control over how text appears on your stream.
| Name | Description |
|---|---|
| Font Name | Choose a font from Google Fonts for the text. |
| Font Amount Weight | How bold or light the number text (goal amount) is. |
| Font Amount Color | The color of the number text (goal amount). |
| Font Amount Size | The size of the number text (goal amount). |
| Font Label Weight | How bold or light the label text is. |
| Font Label Color | The color of the label text. |
| Font Label Size | The size of the label text. |
⚠️ 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!