# Announce when my channel is live on my website in an html element, using .js

**URL:** <https://discuss.dev.twitch.com/t/announce-when-my-channel-is-live-on-my-website-in-an-html-element-using-js/22648>\
**Category:** API\
**Created:** [September 27, 2019, 8:13pm UTC](https://discuss.dev.twitch.com/t/announce-when-my-channel-is-live-on-my-website-in-an-html-element-using-js/22648 "2019-09-27T20:13:49Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![calexil](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/calexil/32/7114_2.png) [@calexil](https://discuss.dev.twitch.com/u/calexil)\
**Post date:** [September 27, 2019, 8:13pm UTC](https://discuss.dev.twitch.com/t/announce-when-my-channel-is-live-on-my-website-in-an-html-element-using-js/22648/1 "2019-09-27T20:13:49Z")

</div>

Hey there dev peeps, I’m trying to have a little html element in my websites header:  
[https://calexil.com](https://calexil.com)

_top grey bar_

That runs a little chunk of js to find out whether or not I’m streaming, the game, and how many people are watching.

I used to have a version of it functioning fine in api v3 that looked like this:  
///  
(function() {

var user\_name, api\_key, twitch\_widget;

user\_name = “calexil”;  
api\_key = “5j0r5b7qb7kro03fvka3o8kbq262wwm”;  
twitch\_widget = $("#twitch-widget");

twitch\_widget.attr(“href”,“[https://twitch.tv/](https://twitch.tv/)” + user\_name);

$.getJSON(‘[https://api.twitch.tv/kraken/streams/](https://api.twitch.tv/kraken/streams/)’ + user\_name + ‘?client\_id=’ + api\_key + ‘&callback=?’, function(data) {   
if (data.stream) {  
twitch\_widget.html(" Calexil is Live! Playing: " + data.stream.game + “Viewers: " + data.stream.viewers + “”);  
} else {  
twitch\_widget.html(” Twitch Stream Status: Offline");  
}  
});

})();  
///  
But it no longer works. I read a few threads about doing this and the only one that had success so far used cron timers, endponts/json, php, and a whole buncha unnecessary steps from what I can tell.

My current attempt at porting over the old code is as follows:

///  
(function() {

var user\_name, api\_key, twitch\_widget;

user\_login = “calexil”;  
api\_key = “THIS IS AN API KEY I GENERATED FROM THE DEV DASH”;  
twitch\_widget = $("#twitch-widget");

twitch\_widget.attr(“href”,“[https://twitch.tv/](https://twitch.tv/)” + user\_login);

$.getJSON(‘[https://api.twitch.tv/helix/streams?client\_id=](https://api.twitch.tv/helix/streams?client_id=)’ +api\_key + ‘?user\_login=’ + user\_login + ‘&callback=?’, function(data) {   
if (data.stream) {  
twitch\_widget.html(" Calexil is Live! Playing: " + data.stream.game + “Viewers: " + data.stream.viewers + “”);  
} else {  
twitch\_widget.html(” Twitch Stream Status: Offline");  
}  
});

})();  
///  
This throws a 401 error currently, any help would be appreciated. sorry for the formatting

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [September 27, 2019, 9:02pm UTC](https://discuss.dev.twitch.com/t/announce-when-my-channel-is-live-on-my-website-in-an-html-element-using-js/22648/2 "2019-09-27T21:02:58Z")

</div>

Helix expects your clientId to be sent as a header not as a query string argument. Additionally you have two ? In your query string causing the first part to be negated

Please refer to the documentionation for more help

> **[Reference](https://dev.twitch.tv/docs/api/reference/#get-streams)**
>
> Twitch Developer tools and services to integrate Twitch into your development or create interactive experience on twitch.tv.

---

<div class="post-metadata">

**Author:** ![system](https://d2opxh93rbxzdn.cloudfront.net/original/2X/0/05909729875cce3b53e59d5561c4d23bb14948fc.png) [@system](https://discuss.dev.twitch.com/u/system)\
**Post date:** [October 27, 2019, 9:03pm UTC](https://discuss.dev.twitch.com/t/announce-when-my-channel-is-live-on-my-website-in-an-html-element-using-js/22648/3 "2019-10-27T21:03:01Z")

</div>

Closed on October 27, 2019, 9:03pm UTC

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.