Boba Drink Goal Widget

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

  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 “Boba Drink Goal Widget”

  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!

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 Type Select the goal you wish to track.
Goal Specify the target amount for the goal.
Goal Label Enter the text to be displayed on the widget.
Display Type Choose how to show the goal's progress—percentage, total number, or count out of the total.

Text Settings

To tailor the appearance of text in your widget, here are several settings that allow you to control its position, alignment, spacing, and style. These adjustments will enable you to ensure the text is both visually appealing and in harmony with your overall stream design.

Name Description
Text Position Choose the location for displaying the text on the widget.
Text Alignment Set the text alignment as left, center, or right.
Text Padding Adjust the space between the text and the widget's edges.
Text Spacing Control the vertical distance between the label and the count.
Font Name Select from a variety of Google Fonts for your text.
Label Color Customize the color of the text label.
Label Weight Define the thickness of the label font.
Label Size Set the font size for the label.
Count Color Choose a color for the count text.
Count Weight Adjust the thickness of the count font.
Count Size Determine the font size for the count text.

Experimental Settings

Name Description
Color Change A hue adjustment slider ranging from 0 to 360. This feature enables you to alter the overall color tone of the widget's graphics.

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