Spotify-Overlay

This project is covered on YouTube, check it out (changed in configuration since then though)!

Choose the width and height of the browser source to your liking.
Higher = Slower moving text
Wider = more text displayed at once

Setup

1. Head over to and login with a Twitch account (does not matter which)
2. When you are signed in, head to the dashboard and click "connect account", connect your Spotify account
3. When your account is connected click "edit" on the connected Spotify account
4. Click "Copy account secret"
5. In OBS, use the link https://yazaar.github.io/Spotify-Overlay?token=your_copied_token in your browser source
6. Remove all default CSS styling settings in the OBS browser source to prevent changes to the overlay. Then done!

Optional configurations

https://yazaar.github.io/Spotify-Overlay?token=your_copied_token&textScale=0.75&imgSize=75&roundBox=10&roundImg=10

Scale down the text - textScale

Make the text smaller by &textScale=0.75 (makes the text 0.75x the original size)

Change the size of the image - imgSize

Make the text smaller by &imgSize=50 (makes the image take 50% of the full height)

Change the border radius of the box - roundBox

Make the background box have round corners by &roundBox=10 (gives it a 10 pixel radius)

Change the border radius of the image - roundImg

Make the image have round corners by &round>Img=10 (gives it a 10 pixel radius)