Spotify "Now Playing"

Spotify Now Playing Widget – Setup Guide

Display your current Spotify track with real-time updates on your website. Shows song title, artist, album artwork, and play status - perfect for personal sites and portfolios.

What You Need

• A free Spotify Developer account

• A Glitch account (for hosting your API)

• Your Framer site or project

Step 1: Create a Spotify Developer App

1. Go to https://developer.spotify.com/dashboard

2. Log in and click "Create an App"

3. Name it anything (e.g. Now Playing Widget)

4. Add the following Redirect URI:

5. Click Save

Step 2: Generate Your Refresh Token

1. Visit this tool:

2. Paste in your:

3. Click "Get Token" and authorize your account

4. Copy the refresh_token that appears

Keep this token private. It allows access to your playback status.

Step 3: Set Up a Free API with Glitch

1. Go to https://glitch.com/ and click "New Project" → "Hello Express"

2. Rename the default index.js file to server.js

3. Open the .env file and paste:

4. In the Glitch terminal, run:

5. Replace all contents of server.js with the code below:

1. Click "Show" → "In a New Window"

2. Copy the live URL (e.g. https://your-project-name.glitch.me/now-playing)

Step 4: Plug Into Framer

1. Drag the Spotify Widget into your Framer project

2. In the right-hand panel, paste your full API URL into the API Endpoint field:

3. Preview your site – it should now show:

Extra Features (Optional)

• Add vinyl rotation when playing === true

• Add click-through to Spotify track link

• Show last played song when nothing is currently playing

Let me know if you'd like these included in future versions!