A follow counter

A counter is a number that goes up with each event and is drawn again. This one adds follows from three platforms and starts from a value chosen in “Configure” with Widget.parameters.

manifest.json

{
  "events": ["Twitch.Follow", "Kick.Follow", "Youtube.NewSubscriber"],
  "strings": {
    "es": { "followers": "Follows: {total}" },
    "en": { "followers": "Follows: {total}" }
  },
  "menu": {
    "sections": [
      {
        "id": "counter",
        "title": { "es": "Contador", "en": "Counter" },
        "fields": [
          {
            "type": "number",
            "id": "start",
            "param": "start",
            "label": { "es": "Empezar en", "en": "Start at" },
            "default": 0,
            "min": 0,
            "max": 1000000,
            "step": 1
          }
        ]
      }
    ]
  }
}

index.html

<div id="total"></div>

style.css

html,
body {
  margin: 0;
  background: transparent;
}

#total {
  padding: 24px;
  font: 700 64px system-ui, sans-serif;
  color: #ffffff;
}

script.js

const total = document.querySelector("#total");
let followers = Widget.parameters.int("start", 0);

function render() {
  Widget.dom.text(total, Widget.t("followers", { total: followers }));
}

function add() {
  followers += 1;
  render();
}

Widget.on("Twitch.Follow", add);
Widget.on("Kick.Follow", add);
Widget.on("Youtube.NewSubscriber", add);

render();

How it works

• Each platform has its own event, but with the same fields, so one function serves all three.
• It is drawn once at start (render() at the end) so the number shows even if nothing has arrived yet.
• The counter counts from when the widget connects: if OBS reloads it, it goes back to the starting value. To keep it, store the total outside the widget (for example in a Streamer.bot variable) and set it as the starting value in “Configure”.

Variations

• Count subs too: add Twitch.Sub, Twitch.ReSub, etc. to events and to a second counter. The Counter template does it with a parameter that chooses what to count.
• A banner on each increase: combine this recipe with the queued alert.