Building a Twitch Badge For My Site

May 18, 2020

On my stream, I wanted to play around with building out some tools that help me connect better with my readers and viewers.

Check out the stream below!

First task on the list was an indicator on this site that would tell you if was currently online. Eventually, this will extend to other tools - but first things first.

Here are the steps I had to follow in order to build my Twitch badge:

  1. Create an endpoint that would tell me if I was online
  2. Generate a badge that said
  3. Display the badge on my site


When creating an endpoint that would tell me if I was online, I wanted to start with a solid base. Turns out there is already an amazing open source library called TwitchLib which helps facilitate the connection to the Twitch APIs.


There is a great set of APIs available, and the exact method call I wanted was in the examples:


var user = await _api.V5.Users.GetUserByNameAsync(channelName);
var isOnline = await _api.V5.Streams.BroadcasterOnlineAsync(user.Matches.First().Id);

Turns out, I had to take an additional step of getting my channel

instead of just using my channel name. If anyone knows another way of doing this that's easier/faster/better, please let me know.

Azure Functions

With my new ability to get channel status at the blink of an eye, I needed a way to query this whenever some came to my site.

Serverless was the answer.

I wrote a simple Azure Function for polling Twitch to see if I was online.

public static async Task<IActionResult> Run(
    [HttpTrigger(AuthorizationLevel.Function, "get", Route = null)] HttpRequest req)
    var clientId = Environment.GetEnvironmentVariable("twitch:clientId");
    var accessToken = Environment.GetEnvironmentVariable("twitch:accessToken");

    var twitch = new Twitch(clientId, accessToken);

    string name = req.Query["channelName"];

    if (string.IsNullOrEmpty(name)) return new BadRequestObjectResult("Channel name was missing.");

    var isOnline = await twitch.IsChannelOnlineAsync(name);

    /* other code */

This method would let me call a HTTP endpoint, like
and it would return a response!

Note: The

await twitch.IsChannelOnlineAsync(name)
is a wrapper around the TwitchLib code I wrote above. Sorry if that was misleading!

SignalR Mastery: Become a Pro in Real-Time Web Development

Join the thousands of developers who have already taken their first steps into building real-time web applications with SignalR.

The best SignalR Course I've ever watched ever. explaining all the details you need to know and even more about SignalR technology.
Exactly what I am looking for. Really appreciate the real world scenario. Thank you.
The author of the course really shows he knows what he is talking about. Very awesome!

With my new Azure Function deployed, I need to set up to show if it said online or offline.

My buddy, Mike Buckbee, had an amazing idea - why not make it look like build badges used on various GitHub pages. Another buddy, Calvin Allen, pointed out I could use to build the badge automatically.

To that extent, I could give my Azure Functions endpoint and it would build the badge for me.

My updated Azure Function to return the JSON necessary for to build a badge.

public class ShieldBadge
    public int SchemaVersion { get; private set; } = 1;

    /// <summary>
    /// Left Text
    /// </summary>
    public string Label { get; set; }

    /// <summary>
    /// Right Text
    /// </summary>
    public string Message { get; set; }

    /// <summary>
    /// Right Color
    /// </summary>
    public string Color { get; set; }

    /// <summary>
    /// Left Color
    /// </summary>
    public string LabelColor { get; set; }

    /// <summary>
    /// Style
    /// Options: flat, plastic, flat-square, for-the-badge, social 
    /// </summary>
    public string Style { get; set; }

var badge = new ShieldBadge
    Label = "",
    LabelColor = "lightgrey",
    Style = "flat",
    Message = isOnline ? "LIVE" : "OFFLINE",
    Color = isOnline ? "#2f855a" : "red"

Adding it to my site

This was the easiest step. On my site, I added an image tag pointing to the following URL.

alt="Am I streaming?"

Doing this will add the awesome little badge you see at the top:

Am I streaming?

Wrap up!

This was a fun little project that took me about 2 hours to figure out, start to finish. Full source code is available at

Thanks for following along, and follow me on Twitch to see when I go live!