Logo

TWITCH GOALBAR

A fully customizable Twitch goal bar supporting follows, subs, bits, channel points and donations (Kofi, StreamElements, Streamlabs, Fourthwall, and Tipeeestream).

• Adjust goals easily via chat commands
• Automatic currency conversion for donations
• An overall goal that includes all types of events
• Custom Triggers for completed goals
• Clean and adorable (uwu) Settings UI for quick customization

happie

TWITCH GOALBAR – tawmae Cover Image
This extension requires a .dll file (TawmaeUI.dll) to run. You will be asked to have it automatically downloaded from my GitHub Repository to your Streamer.bot directory when you open the Settings UI, but you can also manually download it here. You can use tools like JetBrains dotPeek to inspect the file’s content.
BROWSER SOURCE URL
https://tawmae.xyz/overlays/twitch-goalbar-v2
ACTION IMPORT
Loading...
Never import actions from untrusted sources. Want to know what you are importing? Paste the import code in here (Decoder made by TakeJoshyy).
SETUP

1. Copy the Action Import text from above into your clipboard.

2. In Streamer.bot, click the Import button at the top of the window. Paste the text into the Import String section and press Import at the bottom.

3. Now head to the Commands tab and look for the imported commands. Then rightclick the group and select Group -> Enable All.

4. In the Settings action, rightclick the Test trigger and hit Test Trigger to open the Settings UI once. This makes sure that the .dll file has been downloaded and is up to date.

If you don't have my .dll in your Streamer.bot directory already, it will ask you to automatically download it. If you wish to manually place it there, you can to that here.

5. Go into the Servers/Clients -> WebSocket Server tab. Check Auto Start WebSocket Server, leave Address at 127.0.0.1 and the Port at 8080. You can set a password if you want, just make sure to leave Enforce All Requests unchecked. Start the server.

Here you can check in real-time if your Websocket server is up and running:

6. Copy the Browser Source URL from above into your clipboard.

7. In OBS, create a new Browser Source, name it whatever you want. Then paste the copied URL into URL and preferably set the Width and Height to your OBS canvas size. The width of the goal bar is dynamic and will adapt based on your entered width though.

And then you're done! And since it came up a lot: for donations to show up, you need to connect the donation platform of your choice with Streamer.bot (Kofi, Streamelements, Fourthwall etc). Once it's connected to Streamer.bot, the goalbar will pick donations up automatically. Pog Clap
Important Note: If you want to have the browser source in multiple scenes, don’t create a second browser source. Instead, use nested scenes or source clones.

COMMANDS

!goalbarFollowersGoal [Number]

Change the goal amount for follows.

!goalbarSubsGoal [Number]

Change the goal amount for subs.

!goalbarBitsCurrent [Number]

Change the current amount for bits.

!goalbarBitsGoal [Number]

Change the goal amount for bits.

!goalbarDonationsCurrent [Number]

Change the current amount for donations.

!goalbarDonationsGoal [Number]

Change the goal amount for donations.

!goalbarChannelPointsCurrent [Number]

Change the current amount for channel points.

!goalbarChannelPointsGoal [Number]

Change the goal amount for channel points.

!goalbarOverallGoalCurrent [Number]

Change the current amount for the Overall Goal.

!goalbarOverallGoalGoal [Number]

Change the goal amount for the OverallGoal.

SETTINGS UI

The Settings UI allows for some customization.



The General Settings allow to change which goals will be included and also to determine the general design of the goal bar. To apply changes, hit the 'Save' button.

All the other tabs allow to customize the individual goals. Their goal amount, progress bar color, titles and icons (https://icones.js.org/collection/all). To apply changes, hit the 'Save' button.

CUSTOM TRIGGERS

Under Custom -> TWITCH GOALBAR you will be able to find various triggers that populate variables whenever a goal is completed.


Available variables:

  • goalName string - the name of the goal
  • goalValue double / int - the target value of the goal
  • currentValue double / int - the current progress value of the goal



CHANGELOG
Date Changes Version
October 16, 2025 Added a channel points goal 1.0.3
October 12, 2025 This change requires to add a new browser source URL (check above); added new events: New Followers, New Subscribers, Overall Goal; new followers and new subs resets back to 0 whenever you start your stream; the overall goal combines all kinds of events and add their points to an overall goal; added more fonts; added more currencies; setting the background transparency now removes the dropshadow of the background; added custom triggers when goals are completed 1.0.2
September 23, 2025 Added 'Zoom Level' to the General tab of the Settings UI; added currency symbols to the overlay; fixed an issue with goal values from commands 1.0.1
September 20, 2025 Release 1.0.0

Other extensions you may like