Small Twitch Widget

I created this small widget for my blog using Twitch's new API: Helix. It shows up when I am live and disappears when I am offline. I included an always on version on this page so you can see it.


The Helix API gives powerful tools in the hand of a developer to create programs around Twitch's content.

To use Helix you have to register an app. There you will get a Client-ID (that is the public identification of you application) and a secret key (that you should never disclose). With these two information you can use the API.

My Widget

As I use WordPress for this blog I had to use PHP's cURL library. I simply set up and initialize a connection to the API, send HTTP headers with secret and client ID and get the data from Twitch in JSON form.

To check if I am live I use the API's Get Streams functionality. I prefered the older API's get stream by user name method, but this one is capable to get data by user ID too.

This is a little wasteful but this is how it works: if it sends back data you have a live stream. If not: it is offline. As you can see in the code below I check for this, then embed my player.

The Code

As this was a little and fast project I just mixed HTML, PHP and JavaScript. The JS is there to make a close button for the widget. I put the CSS in here too so you can use it, in the live version I used my WordPress theme's custom CSS field for this.

Three things you want to change: In the 3rd line you want to put the user id you want to check (you can get an user's id by using the get user functionality. I just get mine programmatically and pasted it in the code). The 5th and 6th line you put your secret and you client ID. On line 22 in the iframe you put the embeded channel's name (the user name).

The $streamdata variable has all the info you get from Twitch. You can use any of these to pimp your widget. I used the title to write the stream's title under the player.