Handleiding: NowPlaying Spotify Widget

Deze handleiding helpt je stap voor stap bij het opzetten van de Spotify-widget voor jouw livestream of video-overlay.

🔧 1. Maak een Spotify App

  1. Ga naar developer.spotify.com/dashboard
  2. Log in met je Spotify-account en klik op "Create an App"
  3. Geef je app een naam (bijv. NowPlaying Widget) en beschrijving
  4. Voeg deze Redirect URI toe:
    https://now-playing.top/spotify-widget/configure/
  5. Klik op Save
  6. Kopieer je Client ID en Client Secret

🔗 2. Genereer je widget-URL

Ga naar de configurator en volg de stappen:

➕ Configureer

Je krijgt daarna unieke URL's zoals deze:
OBS: https://now-playing.top/spotify-widget/widget.php?client_id=...&client_secret=...&refresh_token=...
Non-hidden (TikTok Live Studio): https://now-playing.top/spotify-widget/widget-heide.php?client_id=...&client_secret=...&refresh_token=...
Kopieer de juiste URL; die heb je zo nodig in OBS of TikTok Live Studio.

🖥️ 3. Voeg toe aan OBS

  1. Open OBS
  2. Klik op het + icoon in het bronnen-overzicht en kies “Browser”
  3. Geef het een naam, zoals Spotify NowPlaying
  4. Vink aan: “Local file” uitvinken (het is een externe URL)
  5. Plak de gegenereerde URL in het URL-veld
  6. Stel een breedte in van bijv. 600 en hoogte van 150 pixels
  7. Klik op OK en positioneer het op je scherm

Thema preview

Song title
Artist name
0:42
3:21
@import "/spotify-widget/css/blue/blue.css";
@import "/spotify-widget/css/blue/blue-non_hidden.css";

🎨 Custom CSS builder

Met de Custom CSS builder kun je de stijl van je widget aanpassen. Kies kleuren, thema's en meer om het uniek te maken voor jouw stream.

Open de CSS

❓ Veelgestelde vragen