Now Playing Widget

A Spotify overlay for your Twitch stream. Follow the steps below to get set up in a few minutes.

1Spotify App
2Connect
3Appearance
4Download
Step 1 of 4
Create a Spotify App

You need a free Spotify developer app to let this widget read your currently playing track. Takes about 2 minutes.

Why do I need this? Spotify requires apps to register before accessing your listening data. It's free and your data only goes between your browser and Spotify.
  • 1
    Go to developer.spotify.com/dashboard and log in with your Spotify account.
  • 2
    Click Create app. Give it any name (e.g. "Stream Widget").
  • 3
    In the Redirect URIs field, paste exactly:

    https://dexteritycs.github.io/Spotify-widget/
  • 4
    Tick the Web API checkbox, then click Save.
  • 5
    Open your app's Settings — you'll need the Client ID and Client Secret on the next step.
Open Spotify Dashboard ↗
Step 2 of 4
Connect Your Spotify

Paste in the credentials from your Spotify app, then click Connect to authorise the widget.

Where do I find these? On your Spotify app page, click Settings. Client ID is shown directly. For Client Secret, click View client secret.
Found under Settings in your Spotify app dashboard
Keep this private — it's like a password for your app
Step 3 of 4
Customise the Widget

Choose colours and style to match your stream.

Light
Dark
Midnight
Rose
Forest
Slate
Now Playing
Song Title
Artist Name
Card BackgroundWidget fill
Song TitlePrimary text
Artist NameSecondary text
AccentIndicator dot
Corner RadiusCard roundness
14px
Step 4 of 4
Download Your Overlay

We'll generate a personal overlay file with your Spotify login and colours baked in. Add it to SLOBS once — no re-login ever.

📦
spotify-overlay.html
Your personal overlay file — contains your login & colour settings
In SLOBS, click Add SourceBrowser Source.
📁
Choose Local File and select the spotify-overlay.html file you just downloaded.
📐
Set width to 340 and height to 110. Position it wherever you like.
Click Done. The widget will show your currently playing track automatically.
Tip — While streaming, open the Interact window in SLOBS and press ` (backtick) to change colours or log out without leaving your stream.
Nothing playing
Open Spotify to begin
Session expired — click to reconnect
Widget Controls
🎨
Change Colours
Log Out
Widget Colours
Presets
Light
Dark
Midnight
Rose
Forest
Slate
Preview
Now Playing
Song Title
Artist Name
Colors
Card BackgroundWidget fill
Song TitlePrimary text
Artist NameSecondary text
AccentIndicator dot
Shape
Corner RadiusRoundness
14px