Referral Card — Invite & Earn HTML CSS JS Snippet

Referral programmes are among the most cost-effective growth channels, and the referral card is where users grab their link and watch their rewards build. A good one does three things: makes the referral link trivially copyable, shows clear progress toward a reward milestone, and celebrates when the reward unlocks. This snippet implements all three in plain HTML, CSS, and vanilla JavaScript: a copy-with-feedback referral link, an avatar progress row, an animated progress bar toward a goal, and a reward-unlocked state.

Frictionless link copy

The referral URL sits in a dashed "ticket" field with a Copy button. copyLink uses the modern navigator.clipboard.writeText API (prefixing https:// so the copied link is complete) and confirms with "Copied ✓" in green for 1.6 seconds before resetting. Removing every bit of friction from grabbing the link directly affects how many people share — so the copy interaction is the most important part of the card.

Avatar milestone progress

Progress toward the reward is shown two ways. A row of avatar slots — filled gradient circles for friends who joined, dashed "+" placeholders for the remaining — gives a tangible, human sense of "3 of 5". Below it, a progress bar fills proportionally. The bar uses transform: scaleX from a left origin with a transition: transform, so it animates smoothly and, being a transform, exports cleanly to utility frameworks (which animate transforms but not raw width).

Reward goal and unlock

The status line shows "3 of 5 friends joined" and the reward chip teases "$50 bonus at 5". The demo "Send an invite" button increments the count: each invite fills the next avatar with a spring pop, advances the bar, and updates the status. On reaching the goal, render switches the card to a complete state — the bar turns green, the chip becomes "$50 unlocked 🎉", and the button locks to "Reward unlocked ✓". That payoff moment is what makes the mechanic rewarding.

Driven by simple state

Everything derives from two values, invited and GOAL, through render and renderAvatars, so wiring it to real data is just seeding invited from your backend and replacing the demo button with the actual share/send flow. The card's premium dark styling with a radial glow gives the reward the elevated feel referral programmes rely on.

Pair this with a social share bar for sharing the link across networks, a loyalty points widget for the rewards balance, or a copy button pattern elsewhere.