Hello there guys, first of all I would like to start for thanking you for taking some of your time for me and helping me out if you can.
So I’m new to coding and I would like to add multiple twitch channel statuses to my website.
Basically if someone is online it says “ONLINE” if some of them is offline it says “OFFLINE”.
I found this on codepen: https://codepen.io/sraines/pen/gXVBON and I’m trying to get it to work but I didn’t find success yet.
This example is very out of date
You require the use of an oAuth token to call helix with.
Which (generally speaking) will require a backend server in order to make the helix call whilst protecting your secrets.
A front end would call a backend and the backend then generates or uses and existing token to lookup streams.
You would generally use an “App Acces Token” AKA “Client Credentials” for server to server requests Getting Tokens: OAuth | Twitch Developers
A “pure” front end example, like what you linked, only works if you ask the user to login vai Implict Auth in order to make calls to Twitch.
But this generally you don’t want to do, since users don’t want to have to login to use your site first.
So I have to start by making a js on my server with the following?:
“POST https://id.twitch.tv/oauth2/token
?client_id=
&client_secret=
&grant_type=client_credentials
&scope=” ?
Yup
Server js being node yeah?
Don’t need any scopes for this, as generally speaking server to server token can’t have scopes as for Twitch scopes apply to user tokens
And there is not other ways to do it right? Because I saw other things on the internet as well with “kraken” like this:
"
(function() {
var user_name, api_key, twitch_widget;
user_name = "name";
api_key = "api key here";
twitch_widget = $("#nametv_twitch-widget");
twitch_widget.attr("href","https://twitch.tv/" + user_name);
$.getJSON('https://api.twitch.tv/kraken/streams/' + user_name + '?client_id=' + api_key + '&callback=?', function(data) {
if (data.stream) {
twitch_widget.html("<span class='online'></span> " + data.stream.viewers);
} else {
twitch_widget.html(" OFFLINE");
}
});
})();
"
kraken is deprecated for removal in february.
But that would work still the kraken version till February? Because that would be fine for me for now.
I wouldn’t advise making something that will break for sure soon.
You are better off utilising helix and eventsub.
Since with eventsub you don’t even need to make helix calls.
Twitch will call you when a channel goes live/offline.
Alright, but I’m working local and the website only contains front-end atm.
So I think it would be fine for me the kraken version for now.
But I’m not sure how to get it done.
Can someone help me out? 
The code you already have should work fine for kraken. That you posted
However most people have moved over to helix so support for kraken will be less.
Bumping yoru own topic doesn’t helper either.
What are you not sure about.
Again wouldn’t recommend it
Twitch API’s have moved to needing auth, so you either need a user token or a backend.
As I answered in my original reply
So when you say
What do you actually want help with since you didn’t ask a clear question
It just keep saying “offline” when the person is online.
Debug and check for error messages.
See what the actual response is.
So I’m trying with the https://wind-bow.glitch.me/twitch-api/ to call for the JSON, because with https://api.twitch.tv/kraken/streams/ it doesn’t even says Offline. But I don’t know why is it saying Offline when the person is online on twitch.
Your code doesn’t work because you’re adding &callback=? to the end of it for some reason, which isn’t a valid param and the question mark at the end is malforming the querystring.
Additionally, you’re not sending the v5 header so the endpoint defaults to v3 which doesn’t exist any more and has long since been deprecated (just as v5 will be in the near future as it’s already marked as deprecated, which is why is why you’ve been encouraged to use Helix).
If you logged the body of the response you would have seen error messages indicating all of this
And how could I fix this for now with the v5 header? Because it would be fine for me for now and I will figure out the helix later when the kraken is discontinued in February.
I’m pretty new to this, and I don’t know that much 
With what?