Connect Spotify (Dev)

Continue with Facebook

Spotify Rewards

Connect Spotify and follow featured artists to earn LIF points.

Checking status…

Connect your Spotify account to start earning points.

Connect Spotify Reconnect

Featured Artists

Follow these artists on Spotify and then tap “Verify Follows” to earn points.

Loading artists…

Verify Your Follows

Make sure you’ve followed the featured artists in Spotify, then tap verify.

Verify Spotify Follows

Hello, World!

/* ========================================================= LIF SPOTIFY NAMESPACE — BULLETPROOF ISOLATION Everything inside #lif-spotify is isolated from your site. ========================================================= */ #lif-spotify * { box-sizing: border-box; font-family: inherit; margin: 0; padding: 0; } #lif-spotify { width: 100%; max-width: 680px; margin: 0 auto; padding: 32px 16px; background: transparent; } /* ---------- CARD BASE ---------- */ #lif-spotify .lif-card { background: #ffffff; border-radius: 16px; padding: 24px; margin-bottom: 24px; box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.08); border: 1px solid #e5e5e5; } /* ---------- HEADINGS ---------- */ #lif-spotify .lif-title { font-size: 1.4rem; font-weight: 700; color: #111; margin-bottom: 16px; } #lif-spotify .lif-subtitle { font-size: 1rem; color: #555; margin-bottom: 24px; line-height: 1.4; } /* ---------- ARTIST LIST ---------- */ #lif-spotify .lif-artist-list { display: flex; flex-direction: column; gap: 16px; } #lif-spotify .lif-artist-item { display: flex; align-items: center; gap: 14px; padding: 16px; background: #fafafa; border-radius: 12px; border: 1px solid #eee; } #lif-spotify .lif-artist-meta { flex: 1; } #lif-spotify .lif-artist-name { font-size: 1.1rem; font-weight: 600; color: #111; margin-bottom: 4px; } #lif-spotify .lif-artist-desc { font-size: 0.85rem; color: #666; line-height: 1.3; } /* ---------- BUTTONS ---------- */ #lif-spotify .lif-btn { display: inline-block; padding: 12px 20px; font-size: 0.95rem; font-weight: 600; border-radius: 10px; border: none; cursor: pointer; transition: opacity 0.2s ease; text-align: center; text-decoration: none; color: white; } #lif-spotify .lif-btn:disabled { opacity: 0.6; cursor: not-allowed; } #lif-spotify .lif-btn-primary { background: #1db954; /* Spotify green */ } #lif-spotify .lif-btn-secondary { background: #444; } /* ---------- STATES ---------- */ #lif-spotify .lif-connected { padding: 14px; background: #e8fced; border-left: 4px solid #1db954; border-radius: 8px; margin-bottom: 16px; color: #0d4521; font-weight: 600; } #lif-spotify .lif-error { padding: 14px; background: #fee; border-left: 4px solid #cc0000; border-radius: 8px; margin-bottom: 16px; color: #990000; font-weight: 600; } /* ---------- LOADER ---------- */ #lif-spotify .lif-loader { text-align: center; padding: 20px 0; color: #666; font-size: 0.9rem; }