Twitch Widget
Shows live status for a list of Twitch channels — profile picture, live/offline badge, stream title, game, and viewer count. Channels are sorted by viewer count (or live-first) and a "Show More" button collapses long lists.
Requirements
A free Twitch developer app is required to get API credentials. No subscription or Twitch affiliate status needed.
- Go to dev.twitch.tv/console and log in
- Click Register Your Application
- Give it any name (e.g.
Homepage Dashboard) - Set the OAuth Redirect URL to
http://localhost(it isn't used) - Set the Category to Application Integration (or any category)
- Click Create, then open the app and click New Secret
- Copy your Client ID and Client Secret into the widget settings
Configuration
| Key | Type | Default | Description |
|---|---|---|---|
clientId | string | — | Twitch app Client ID |
clientSecret | string | — | Twitch app Client Secret |
channels | string[] | [] | Channel logins to track (from the URL: twitch.tv/login) |
sortBy | 'viewers' | 'live' | 'viewers' | Sort order — viewer count descending, or live-first alphabetical |
collapseAfter | number | 5 | Show a "Show More" button after this many channels |
refreshInterval | number | 60000 | Refresh interval in milliseconds |
hideHeader | boolean | false | Hide the widget title bar |
defaultCollapsed | boolean | false | Start collapsed |
How it works
The server exchanges your Client ID and Secret for an app access token via the Twitch Helix API. The token is cached in memory and automatically refreshed before it expires (app tokens last ~60 days). Calls to /helix/users and /helix/streams are batched — all channels are fetched in a single request each.
Channels not returned by /helix/users (e.g. a misspelled login) are silently ignored. Channels returned by /helix/users but absent from /helix/streams are shown as offline — Twitch only includes live streams in the streams response.
Notes
- Channel logins are case-insensitive (use the login from the URL, not the display name)
- The widget refreshes every 60 seconds by default; lower values will increase API usage
- Client credentials are stored in your widget config and sent to the server — use HTTPS in production