Skip to content

🎧 Setting Up Your Spotify Developer Account for AlertForge

To enable the Spotify widget in your AlertForge overlay, you'll need to create a Spotify Developer App and configure it with the correct redirect URI. Follow these steps:

✅ Step 1: Go to Spotify Developer Dashboard

Visit: https://developer.spotify.com/dashboard

Log in with your Spotify account.

✅ Step 2: Create a New App

Click "Create an App" and fill out the required fields:

  • App name:
    AlertForge Spotify Widget (or anything you like)

  • App description:
    Used to display now-playing track info in AlertForge stream overlay.

  • Website:
    This is optional, but you can enter https://alertforge.app

  • Redirect URIs:
    Add the following URI:
    https://alertforge.app/overlays/api/spotify-callback.php Then click the Add button.

  • Which API/SDKs are you planning to use?
    ✅ Web API

  • Accept the terms and click Save.

✅ Step 3: Get Your Client ID

After saving, open the app from your dashboard. Copy:

  • Client ID

You’ll need these to authorize the Spotify widget in your AlertForge overlay.

  1. Go to your AlertForge overlay page.
  2. Paste your Client ID in the "Your Spotify Client ID" field.
  3. Click Connect to Spotify and authorize the app.

⚙️ Widget Configuration Options

You can customize the Spotify widget using the following settings in the template editor:

Key Type Description
spotifyClientId text Your Spotify app's Client ID
alertDuration number How long the overlay should stay on screen (seconds)
artistColor color Color of the artist name text
songColor color Color of the song name text
barBgGradientStart color Left color for the progress bar background
barBgGradientEnd color Right color for the progress bar background
trigger text Chat trigger command (e.g. !song)
announceInChat checkbox Whether to send a chat message on song change
useBotAccount checkbox Whether to use your Bot account (not broadcaster)
announceService dropdown Platform to send the message (e.g., Twitch)
songMessageTemplate text Message format. Supports: {track}, {artist}, {spotify_url}

📺 Adding the Overlay to OBS (Browser Source Setup)

Recommended: Set your OBS browser source to 1920x1080 for best compatibility, even if your stream is a different resolution.

Steps: 1. In OBS, add a new Browser Source. 2. Set the URL to your AlertForge overlay. 3. Set the width to 1920 and height to 1080. 4. Click OK to add it.

Why 1920x1080?
The overlay is designed at this resolution, which ensures proper scaling and positioning of all elements. If your stream resolution is different (like 1280x720, 1600x900, etc.), you can resize or scale the browser source directly in your OBS scene to fit as needed—OBS will handle the scaling smoothly.

Pro Tip: Lock the aspect ratio when scaling to avoid stretching or warping the overlay!

🔐 VERY IMPORTANT – Chat Messages Require Authenticated Sockets

In order to send messages to chat from the overlay (such as song announcements), the overlay must be connected to an authenticated Streamer.bot socket.

To do this:

  1. Go to the ⚙️ Settings page in AlertForge.
  2. Enter the correct host, port, and password for your local Streamer.bot socket server.
  3. In your Streamer.bot desktop app, go to:
  4. WebSocket Server → Enable
  5. Set Password and make sure it's the same in both places.

If the socket isn't authenticated, chat messages won't send.

🔍 Troubleshooting

If you run into any issues, make sure:

  • The redirect URI in Spotify Developer exactly matches: https://alertforge.app/overlays/api/spotify-callback.php

Need help? Ping in Discord!