A command-driven counter (deaths, w/d/l, etc.) that can be displayed on an overlay

Nightbot Custom APIs
1

Greetings,

I’ve built these commands, together with its accompanying overlay, to address a particular need of mine: often during my streams, I make a pun so groan-inducing that the viewers’ usual reaction is “God damn, Saico” :joy: - thus it deserved a special counter, a la deaths and w/d/l rates.
The problem is, although Streamlabs - my tool of choice - allows you to easily manipulate and display numeric variables via its Cloudbot, it provides no means of exporting them to an external resource such as a screen overlay.

Enter CountAPI, which is free, very simple to use and was built specifically to handle such automated counting scenarios. As it only speaks JSON, Nightbot’s JavaScript-fu capabilities are the perfect pairing.
First, you need to explicitly create a key with reset enabled - you can use the browser for this step, Nightbot isn’t required:
https://api.countapi.xyz/create?namespace=<namespace>&enable_reset=1
Replace <namespace> with whatever value you fancy. Now check the output - more importantly, write down the value under "key":
{"namespace":"<snip>","key":"<snip>","value":0}

Now it’s time for Nightbot to join the fray - you might want to customize the command names and messages to your liking:
!addcom -cd=5 !incrcount Counter updated $(eval const count = $(urlfetch json https://api.countapi.xyz/hit/<namespace>/<key>); count.value) times.
!addcom -ul=mod !zerocount Counter reset to $(eval const count = $(urlfetch json https://api.countapi.xyz/set/<namespace>/<key>?value=0); count.value).

And done! Next step is creating an overlay that polls https://api.countapi.xyz/get/<namespace>/<key> and updates the count accordingly - I’ll post a sample HTML later today.

P.S.: so, while writing down this post I found out there are other similar recipes which make use of the Quote API promoted on this forum. However, I still prefer mine for its smaller footprint and ease of setup (no need for secret keys!)

2 Likes
2

As promised here’s a very straightforward sample for an overlay:

<html>
  <head>
    <style type="text/css">
        @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@900&display=swap');
        body {
            font-size: 48px;
            font-family: "Raleway";
            color: #FFFFFF;
            filter: drop-shadow(0px 1px 0px rgba(0,0,0,0.1));
        }
    </style>
    <script lang="javascript">
        const namespace = 'insert value here';
        const key = 'insert value here';
        const url = `https://api.countapi.xyz/get/${namespace}/${key}`;
        function poll() {
            let xhr = new XMLHttpRequest();
            xhr.open('GET', url);
            xhr.responseType = 'json';
            xhr.onload = () => {
                let el = document.getElementById('count');
                el.textContent = xhr.response.value;
                poll();
            };
            xhr.send();
        }
        poll();
    </script>
  </head>
  <body>
    Count: <span id="count"></span>
  </body>
</html>