Logo

TWITCH GOALBAR

A customizable goal bar for Twitch.

• Includes follows, subs, bits and donations (Kofi, StreamElements, Streamlabs, Fourthwall & Tipeeestream)
• Easy goal adjustment via commands
• super cute Settings UI to easily change stuff to make it fit your needs :3

happie

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 JetBrain dotPeek to check the .dll file's content.
BROWSER SOURCE URL
https://tawmae.xyz/overlays/twitch-goalbar
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 Pog Clap
Important Note: If you want to have the timers 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.

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.

CHANGELOG
Date Changes Version
September 20, 2025 Release 1.0.0