Stream Counter

Shows one or more counters on screen: a death counter, wins and losses, hugs given… Each counter goes up and down with the Streamer.Bot triggers you pick — a command, a channel point reward, a hotkey — goes back to 0 with its reset triggers, and can be shown and hidden the same way. You can also change it by hand on the widget's page, in the controls window, or from your own Streamer.Bot actions.

Platforms: Twitch, YouTube, Kick, and the integrations switched on in Connection

Action pack: needed — Stream UI - Backend creates the counters in Streamer.Bot, counts and resets them. See Who needs what.

How it works

• Each counter lives in Streamer.Bot, as a persisted global variable named streamUi.counter.<name> — streamUi.counter.Deaths for a counter named Deaths. It holds a plain number, kept across restarts of Streamer.Bot and reloads of the browser source.
• Created as soon as you name it. A moment after you stop typing a name, the counter is created in Streamer.Bot at 0. Renaming it moves the count — and whether it is hidden — to the new name's variables and deletes the old ones. Deleting a counter deletes its variables too, unless another counter still has the same name.
• Counted by the overlay that runs the actions. When one of a counter's Count up triggers fires, that overlay adds to it — 1, or a value from the event (bits, an amount…); a Count down trigger takes away the same way. A Reset trigger sets it back to 0. Other overlays and single-widget URLs never write, so nothing is counted twice. → Which overlay runs the actions
• Shown or hidden. Show triggers and Hide triggers — or the Show / Hide button of the controls — show and hide one counter. Whether it is hidden lives in Streamer.Bot too, as the persisted global streamUi.counterHidden.<name>: 1 hidden, 0 shown. So it survives reloads, and your own actions can set it.
• Whoever changes it, the overlay follows. The widget's page, your own actions, the overlay that runs the actions: as soon as the variable changes in Streamer.Bot, every overlay shows the new count.

The page

The widget's page works like a small app:

• Settings, Style and Controls, the tabs over the editor, switch what it shows.
• Counter list, the column on the left: your counters, each with its live count under its name. Click one to edit it. Drag a row by its handle to reorder; its switch shows or hides the counter on stream; its menu duplicates or deletes it. Add counter adds one.
• The main area: the picked counter's settings, or its buttons on the Controls tab.
• 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.

Each column and the preview fold away with the arrow beside their title. The preview stays folded until you unfold it; the columns open unfolded each time you come to the page.

How to set it up

Settings

Counter list

Your counters, Deaths by default. Under each name, its live count; a counter without a name reads No name yet and is not shown. Its switch shows or hides it on every overlay (the same as its Show / Hide controls). Duplicate adds a new counter with the same triggers, starting at 0; Delete deletes its variables from Streamer.Bot too. Whether the counters sit side by side or one under the other is on the Style tab (the Container's Direction).

Counter settings

The picked counter, in the main area:

Its triggers are on the Controls tab → Controls.

Style

Each element follows the overlay style until you change one of its fields. On the Style tab, the Styles column takes the place of the counter list (styles apply to every counter): pick an element there to style it in the main area, the preview beside it. See Appearance.

Default position

Position Top right, automatic width, size 100 %. All of that is changed on the Overlay builder's Layout tab.

Streamer.Bot events it listens to

Controls

On the Controls tab, with a counter picked:

• Controls, a column beside the counter list, holds Count up, Count down, Reset, Show and Hide, each with the names of its triggers. Pick one to see its triggers in Trigger list.
• Trigger list: the Streamer.Bot triggers that do it. Add trigger adds one, conditions included → Triggers and conditions. Count up and Count down triggers each have their What it adds / What it takes away.
• The main area has the counter's tile, reading Deaths: 3, with its buttons. The controls window has one tile per named counter:

They write straight to Streamer.Bot, so every overlay follows at once. They need Streamer.Bot connected and the Backend action.