Goals & Subathon
Your goals, one card per platform. During a subathon it shows the timer beside the subathon's own goals, which add time and unlock rewards, then goes back to your goals once the subathon ends.
Platforms: Twitch, YouTube, Kick, and the integrations switched on in Connection
Action pack: Stream UI - Backend keeps progress across restarts and lets you edit counts live; Stream UI - Sounds plays sound files; Stream UI - Broadcast runs the subathon buttons → Connection
Progress is counted and saved by the overlay that runs the actions, which also sends the chat messages and plays the sounds. Other overlays showing the goals count along for instant feedback, then take the saved values. → Which overlay runs the actions
Two buttons above the tabs switch the page between Goals and Subathon. Both modes have the same sections, each with its own goals: your normal goals keep their settings and counts through a subathon. Subathon mode adds Timer settings, and its goals add time and have steps of their own instead of a target. Each mode has its own Event history settings too. The style elements and the test buttons follow the mode picked.
The page
The widget's page works like a small app:
- Settings, Style and Controls, the tabs over the editor, switch what it shows.
- The column on the left lists the tab's sections, the same in both modes: General settings, Timer settings (Subathon mode only), Goal settings, Event history settings, Platform goals, Integration goals (while an integration is switched on) and, last, Totals (its on/off switch on its row; with two sources or more switched on). On the Controls tab: Show and Hide → Show and hide, and in Subathon mode the subathon's controls → Driving the subathon, each with its triggers. Click one to edit it in the main area.
- Platform goals and Integration goals each open a column of their own, one row per platform or integration switched on (with only one, its row opens that source's goals directly).
- A source then opens its Goal list, and Totals its Total list. There you add, reorder, duplicate or delete rows; the picked one is edited in the main area, and a goal's Trigger list gets a column of its own beside the list.
- Widget preview, the panel against the window's right edge: the preview, the test buttons and the widget's own URL. The arrow at the top folds it to a slim rail. Drag its left edge to widen it, up to half the window; it keeps its width. Widget shows the widget in its position, cut from the canvas as your browser source draws it; On canvas, the whole canvas.
Goals
General settings
| Setting | Default | Detail |
|---|---|---|
| Display mode | Horizontal | Horizontal: full width, at the top, centre or bottom of each overlay (Overlay › Layout), the cards side by side in the bar. Vertical: the widget sits in one of the nine positions, cards one under the other. One setting for both modes. |
Goal settings
In three parts: Alignment, Titles and Progress bar.
| Setting | Default | Detail |
|---|---|---|
| Card alignment | Vertical (Vertical display) · Horizontal (Horizontal display) | The cards (each platform's, or the Totals card) under each other (Vertical) or side by side (Horizontal). Both modes; each display mode keeps its own choice. |
| Card title alignment | Vertical | Vertical: each card's title over its goals, a line under it. Horizontal: the title beside the goals, a vertical line between them. |
| Stack goals | on | Subathon mode: a goal's next steps smaller and faded behind the current one. Off: laid out by Goal alignment. |
| Goal alignment | Vertical (Vertical display) · Horizontal (Horizontal display) | Under each other (Vertical) or side by side (Horizontal): a card's goals; in Subathon mode, a goal's own goals, while Stack goals is off (hidden while it is on). Each mode and each display mode keeps its own choice. |
| Show totals title | on | Only while the mode's Totals is on: shows the Totals card's title, Totals title (default Goals). |
| Show platform titles | on | Only while Totals is off: shows each card's title, one field per platform and integration switched on (Twitch title, default Goals Twitch…). A card without a title has no line under it either. |
| Before each goal text | 🎯 | Subathon mode: shown before each subathon goal's Goal text. |
| Show progress bar | on | Each goal's progress bar, and a subathon goal's goals' bars. Off: the labels and counts only, for a more compact look. |
| Merge platforms | off | Only while the mode's Totals and Show progress bar are on. On: a total's bar in the Progress bar style's colour. Off: split into each platform's share, each in its colour. Only with two sources or more switched on (platforms and integrations). |
Event history settings
Who moved the goals, newest first. Each mode has its own settings, in two parts: Display settings and Title settings (while not merged).
| Setting | Default | Detail |
|---|---|---|
| Show event history | on | Shows the event history. |
| Merge with goals | on (Goals) · off (Subathon) | On: the names under each goal's bar, its contributor labels. Off: a list of its own beside the goals (and the subathon's timer), its room kept before the first event, so the widget doesn't move when it comes. |
| Contributor labels alignment | Vertical | While merged: under each other (Vertical) or side by side (Horizontal). |
| Contributor labels shown | 1 | While merged: from 1 to 5 names under each bar. |
| Event history position | Bottom (Vertical) · Right (Horizontal) | While not merged: the list's side of the goals (and the timer), Top, Right, Bottom or Left. Each display mode keeps its own choice. |
| Event history alignment | Left (Vertical) · Top (Horizontal) | While not merged: where the list sits along that side, worded like Timer alignment. |
| Events shown | 5 | While not merged: from 1 to 10 rows in the list, each the person and what they did (a subathon's with the time it added). |
| Show title | off | While not merged: a title over the list, Title (default Recent events). |
The goals of each platform
Under Platform goals, one row per platform (Twitch, YouTube, Kick); under Integration goals, one per integration switched on (none switched on: no Integration goals row). Each opens its Goal list — add as many as you want. Goals mode and Subathon mode each have their own lists. The switch on a goal's row shows or hides it: switched off, a goal is hidden from the overlay and its settings are greyed out, but it keeps counting, adding to its totals and sending its notifications.
| Field | Detail |
|---|---|
| Goal label | The name shown, e.g. Subs, typed at the top of the main area. |
| Title | A tagline, e.g. Face cam on!. |
| Twitch goal | Twitch only, beside Title: None: count my triggers, My follower goal, My subscription goal or My Bits goal. Twitch then sends the count and the target. |
| Auto renewal | Off by default. On: each time the goal is reached, the target goes up by Raise the target by, the field beside it. Hidden while the goal follows a Twitch goal (Twitch sets that target). |
| Count and target | The live count and the target — see below. A goal with a target of 0 shows its count without a bar. |
| Goal notification settings | Chat message (Send a chat message, its message and Post to) and Sound, once, when the count reaches the target. The message can use the variables of the trigger that reached it. Greyed out and not sent while the mode's Totals is on: the totals' notifications are sent instead. |
| Trigger list | The column beside the Goal list: the Streamer.Bot triggers that move the goal, each counting (its Goal increment) Add 1 or Add the value from a variable. Click one to change it. Hidden while the goal follows a Twitch creator goal. → Triggers and conditions |
A subathon goal has no target: it is its label, its own Goals and its triggers — see Subathon goals.
The default goals:
| Platform | Goal | Target | Counted triggers |
|---|---|---|---|
| Twitch | Follows | from Twitch | follows — follows your Twitch follower goal |
| Twitch | Subs | from Twitch | sub, resub, gift sub — follows your Twitch subscription goal |
| Twitch | Bits | from Twitch | cheers, by their bits — follows your Twitch bits goal |
| YouTube | Subscribers | 50 | new subscriber |
| YouTube | Members | 10 | new member, member milestone |
| YouTube | Super Chats | 100 | Super Chats, by their decimalAmount |
| Kick | Follows | 50 | follows |
| Kick | Subs | 10 | subscription, resubscription, gift subscription |
| Kick | Kicks | 1000 | Kicks gifted, by their gift.amount |
| Each integration | Support | 0 (count only) | its triggers that name a person, by their amount when there is one |
Count and target
Each goal shows Count and Target, read from Streamer.Bot every few seconds. Typing a value changes it live in your overlay; Reset sets the count back to 0 and the target and title back to the settings.
- Changing the count from the website needs the Stream UI - Backend action and a connection to Streamer.Bot.
- The target is also saved in your settings, so previews and new overlays start from it.
- A goal that follows a Twitch creator goal takes both values from each of Twitch's goal events. You can still correct them here (a target changed on Twitch, say) without waiting for the next event; the next one overwrites them.
When a goal is reached with Auto renewal on, the target goes up by Raise the target by until it is above the count.
Totals
With the switch on its row on (off by default), Totals replaces the platform cards with
one card of totals (its Totals title in Text, default Goals). Each mode has
its own switch and Total list, adding up that mode's goals. Totals need two sources
or more switched on (platforms and integrations): with one alone, the row is hidden and
the platform cards show. Each total:
| Field | Detail |
|---|---|
| Total label | e.g. Followers, typed at the top of the main area. |
| Title | e.g. Face cam on!. |
| Auto renewal | Off by default. On: each time the total is reached, the target goes up by Raise the target by, the field beside it. |
| Adds up | The goals this total counts, each keeping its own triggers and count. |
| Count and target | The count is the sum of its goals; Reset zeroes them all. |
| Goal notification settings | Chat message and Sound, once, when the total reaches its target. |
The bar is split by platform, each in its colour, unless Merge platforms is on. Default totals: Followers (Twitch
and Kick follows, YouTube subscribers; target 100), Subs (Twitch and Kick subs,
YouTube members; 50) and Bits (Twitch bits; 1000). Super Chats and Kicks are other
units, so they are in no total by default.
A subathon total has only Adds up, then its own Goals and Goal notification settings, like a subathon goal. Default: Subs (Twitch and Kick subs, YouTube members), with the same three goals as below. While a mode's Totals is on, only the totals send their notifications; its goals' are greyed out.
Subathon
A subathon shows its timer beside its own goals. While it runs, those goals count and add time; your Goals mode goals wait, keeping their counts. Each new subathon starts its goals and totals from 0.
Timer settings
In three parts: Time, Position and Status badges.
| Setting | Default | Detail |
|---|---|---|
| Starting time | 1 h | Time on the clock at the start. |
| Maximum time | 24 h | The clock never goes past this. |
| Timer position | Top (Vertical) · Left (Horizontal) | The timer's side of the goals, Top, Right, Bottom or Left. Each display mode keeps its own choice. |
| Timer alignment | Centre | Where the timer sits along that side, Top, Centre or Bottom beside the goals, Left, Centre or Right over or under them. |
| Running text | Subathon in progress | Shown while the timer runs. |
| Paused text | Subathon paused | Shown while it is paused. |
| Ended text | Subathon ended | Shown once the clock reaches 0. |
In a horizontal bar, the subathon is one row: the timer over its status and the goal cards side by side (the timer on the side Timer position gives), then the event history on the side Event history position gives, with a line between them.
Subathon goals
Subathon mode's Goal list works like Goals mode's, but a subathon goal has no target, raise or live count: each one is its Goal label, then:
| Field | Detail |
|---|---|
| Goals | The steps of its count: each one has a Value (the count to reach) and a Goal text (e.g. Face cam), side by side. The next 3 show under it, the next one in front. |
| Goal notification settings | Chat message (Send a chat message, its message and Post to) and Sound, each time the count reaches one of its goals. |
| Trigger list | The column beside the Goal list, as in Goals mode, each trigger also adding time — see Time added. |
A subathon goal with no goal left to reach doesn't show, but its triggers still add time.
Time added
Each trigger of a subathon goal's Trigger list has its Seconds added, set in its
trigger window, in its Subathon timer increment section under Goal
incrementation: For each 1 counted. A trigger adding 1 adds these
seconds each time; one counting a variable adds them per unit — 0.6 on a cheer counting
its bits is 60 s per 100 bits.
| Platform | Default subathon goals |
|---|---|
| Twitch | Subs: sub, resub, gift sub, 300 s each · Bits: cheers by their bits, 0.6 s per bit · Raids: 600 s each |
| YouTube | Members: new member, member milestone, 300 s each · Super Chats: by their decimalAmount, 12 s per unit |
| Kick | Subs: subscription, resubscription, gift subscription, 300 s each |
| Each integration | Support: its triggers that name a person, 30 s per unit of their amount (300 s each without one) |
The subs and members goals start with three example goals to change: 10 Face cam,
25 Viewers pick the next game, 50 Cosplay stream. The others have none, so
they only add time.
Driving the subathon
In Subathon mode, the Controls tab also drives the subathon:
- Controls, the column on the left, lists Start subathon, Pause subathon, Resume subathon and Stop subathon after Show and Hide, each with the names of its triggers. Pick one to see its triggers in Trigger list, beside it.
- Trigger list: the Streamer.Bot triggers that do it. Add trigger adds one,
conditions included → Triggers and conditions. A start
trigger uses the Starting time and Maximum time of Timer settings.
- Start subathon, Stop subathon — none by default.
- Pause subathon — default: Twitch Stream Offline.
- Resume subathon — default: Twitch Stream Online.
- The main area has the buttons Start subathon, Pause subathon, Resume subathon, Add 5 minutes and Stop subathon (they need Stream UI - Broadcast), also in the controls window. Adding time by trigger is the subathon goals' job (Time added). Under them, Subathon commands gives the lines for your own Streamer.Bot actions:
| Command | What it does |
|---|---|
subathonStart | Starts a subathon. startTime and maxTime (hours) are optional and override the settings. |
subathonPause | Pauses the clock. |
subathonResume | Resumes the clock. |
subathonStop | Ends the subathon and goes back to the goals. |
subathonAddTime | Adds time to the clock, or removes it with a negative value. seconds is required; username and trigger fill the history list. |
CPH.WebsocketBroadcastJson("{\"event\":\"subathonStart\",\"startTime\":2,\"maxTime\":24}");
CPH.WebsocketBroadcastJson("{\"event\":\"subathonAddTime\",\"seconds\":600,\"username\":\"Mod\",\"trigger\":\"Bonus\"}");
When the clock reaches 0, the subathon shows its Ended text until subathonStop.
Show and hide
In both modes, the Controls tab shows and hides the widget in every overlay:
- Show and Hide, in the Controls column, each with its Trigger list (none by default).
- A Show / Hide button in the main area, also in the controls window: one button, Hide while shown and Show while hidden, with the Show / hide transition, read live: Goals & Subathon: Shown or Hidden.
Hidden, the goals keep counting and a running subathon keeps its clock and adds time. Once
the widget has left, its room goes to the other widgets: its bar closes, whatever its
height, or its position closes up. It is kept in Streamer.Bot as
streamUi.off.goals.display (1 hidden), through Stream UI - Backend: a hide
survives a reload, and your own actions can show or hide the widget by setting that
persisted global variable.
Without the action pack
- Without Stream UI - Backend, the overlay still counts and runs the subathon, but nothing is saved: progress is lost when the browser source restarts, and the count cannot be changed from the website. Show / Hide is disabled.
- Without Stream UI - Broadcast, the subathon buttons are disabled. Commands sent from your own actions still work.
Style
Each platform's goal card (its title, texts, line and bars) can have its own look: pick it in Style for, beside the Global styles / Custom switch. The timer, the event history and the totals' card are styled for the whole widget.
The Style tab lists the elements of the mode picked in three columns: the part of the widget (Container, Timer in Subathon mode, Goals, Event history), then the kind of element (Backgrounds, Text, Bars and lines), then the elements themselves, from the top of the part to its bottom. Show / hide transition is under Container; a part with nothing to style is left out. See Appearance.
| Part | Backgrounds | Text | Bars and lines |
|---|---|---|---|
| Container | Container | Separators | |
| Timer | Timer background · Status badge: running · Status badge: paused · Status badge: ended | Subathon timer · Status text | |
| Goals | Goals container · Goal card | Card title · Goal and count · Goal title · Contributor labels · Subathon goal value* · Subathon goal text* | Line under the title · Progress bar |
| Event history | Event history background · Event | Event history title · Username · Event type · Time added* |
* Subathon mode only. Separators are listed while the widget is a horizontal bar.
The event history's elements are listed while it shows: Contributor labels while it is merged with the goals, Event history background, Event, Username and Event type while it is a list of its own (Time added in Subathon mode), Event history title while it shows its title (the overlay's Subtitles style).
- Container — holds the Goals container; with the subathon's Timer background or the Event history background, they sit side by side, each on the side its position gives, 14 px apart (Gap between elements). Its own box is clear by default. While the widget is a horizontal bar it is the band: the overlay's Widgets background colour by default (as the goal cards are outside a bar), with a shadow, and its Height under Size (In the overlay picked in the Overlay builder). Inside the bar the goal cards are see-through by default, so it is the one background.
- Goal card — each card, full width, on the overlay's Widgets background, in both modes. Its Direction is the Card title alignment setting's; with Horizontal, its Align content and Gap between elements too.
- Progress bar — each bar in its card's platform colour; its colour is a merged total's (Merge platforms). Listed while Show progress bar is on.
- Card title and Line under the title — listed while a card shows a title.
- Goals container — the platform cards or the totals' card, 14 px apart, clear by default; its Direction is the Card alignment setting's (under each other, side by side in a bar, by default). Takes the room the timer and the event history leave.
- Timer background — the timer and its status badge, on the overlay's Widgets background, set along its side by Timer alignment.
- Event history background — the event history's list, on the overlay's Widgets background, 260 px wide (Size) so the goals keep their room. Each Event is a row in it.
- Separators — in a bar only: Between the timer, the goals and the event history. The overlay's Separators style, like the Line under the title.
- Subathon timer — the overlay's Numbers style; Status text its Subtitles, in each status badge's colour.
- Username and Time added — the overlay's Secondary text, the name in mauve and the time in green.
Default position
A top bar, 140 px high at 1080p. With Display mode on Vertical: position Top left, 380 px wide at 1080p, size 100 %.
Streamer.Bot events it listens to
The triggers of every goal of both modes, for the platforms on and the integrations
switched on; Twitch.GoalBegin, Twitch.GoalProgress and Twitch.GoalEnd
when a goal follows a Twitch creator goal; the Show, Hide, Start subathon,
Pause subathon, Resume subathon and Stop subathon triggers you picked; Misc.GlobalVariableUpdated
and Misc.GlobalVariableCreated for the widget shown or hidden elsewhere; and
General.Custom for the subathon commands.