🏆 Steam Achievement Widget 🏆

Live achievement popups for your Twitch stream · Personal Tracker Mode
🏆 Personal Tracker Mode
⚠️ Requirements for Personal Tracker Mode

This mode tracks YOUR personal achievements. To use it, you MUST have:
  • ✅ Steam Guard Mobile Authenticator (the phone app with 2FA enabled)
  • ✅ At least $5 spent on Steam (removes "limited account" status)
  • ✅ Your Steam profile set to PUBLIC
Without these, the Steam API will not work.
🔑 STEP-BY-STEP: GET YOUR STEAM API KEY
1
Go to Steam API Key page
Visit steamcommunity.com/dev/apikey and sign in with your Steam account
2
Enter "localhost" as the Domain Name
In the "Domain Name" field, type: localhost
✓ This tells Steam which website will use the key. "localhost" works perfectly for OBS widgets.
3
Agree to Terms & Register
Check "I agree to the Steam Web API Terms of Use" and click "Register"
4
Copy Your API Key
Your key will look like: F8C9A2B3D4E5F6G7H8I9J0K1L2M3N4O5P
⚠️ Save it somewhere safe — you won't be able to see it again!
5
Paste the key below
Come back here and paste your API key into the "Steam API Key" field
💡 Already have an API key? You can reuse it — no need to create a new one. Just paste your existing key below.
→ Click here to get your API key
→ Find your SteamID64 here (enter your profile URL or username)
Found in the Steam store URL: store.steampowered.com/app/730/Counter-Strike
🌐 PROFILE PRIVACY REQUIREMENT

Your Steam profile MUST be set to PUBLIC for the API to work.

How to make your profile public:
Steam → Click your username → Profile → Edit Profile → Privacy Settings
Set "My Profile" to PUBLIC and "Game Details" to PUBLIC

⚠️ If your profile is private, the widget will show an "Access Denied" error.
How often to check for new achievements
How often the widget cycles achievements
How long each popup stays on screen
📊 DISPLAY OPTIONS
Show achievement description text
When you earned it (Latest mode only)
Steam point value (if available)
🎨 WIDGET CUSTOMIZATION
Main brand color
Pulse effect strength
Widget transparency
Width on stream
How rounded the corners are
Slide in/out speed
🔒 COPY THIS URL INTO OBS BROWSER SOURCE
⚠️ This URL contains your API key and Steam ID. Keep it private — only paste it into OBS on your own computer.
📺 How to add to OBS Studio:

1. In OBS, click + under Sources
2. Select Browser and give it a name (e.g., "Steam Achievements")
3. In the properties window:
   • Paste the URL above into the URL field
   • Set Width: 420 (match your widget width choice)
   • Set Height: 280
   • Check "Refresh browser when scene becomes active"
4. Click OK and position the widget anywhere on your stream!
✅ Copied to clipboard!