Spotify Now Playing — Widget Setup

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.

Client ID

Found under Settings in your Spotify app dashboard

Client Secret

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.

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 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

Then add it to SLOBS

➕

In SLOBS, click Add Source → Browser 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.