webdevpuneet.com

Related Snippets

147 in Cards category
1–6 of 60

WOW.js Staggered Testimonial Wall

WOW.js Scroll Reveal Cards

Popmotion Swipe-Dismiss Stack

Popmotion Drag Inertia Card

AutoAnimate Filter Grid

CountUp.js Stat Cards

Referral Card — Invite & Earn HTML CSS JS Snippet

Referral Card · Cards · Plain HTML, CSS & JS · Live preview

CategoryCards
TagsClipboard APICSS Animation

Copy & paste

Source Code

<div class="rf-card" id="rfCard">
  <div class="rf-glow"></div>
  <div class="rf-gift">🎁</div>
  <h2 class="rf-title">Give $10, get $10</h2>
  <p class="rf-sub">Invite friends — you both get $10 in credit when they sign up.</p>

  <div class="rf-link">
    <span class="rf-url" id="rfUrl">webdevpuneet.com/?ref=ALEX42</span>
    <button class="rf-copy" id="rfCopy" onclick="copyLink()">Copy</button>
  </div>

  <div class="rf-progress">
    <div class="rf-avatars" id="rfAvatars"></div>
    <div class="rf-track"><div class="rf-fill" id="rfFill"></div></div>
    <div class="rf-status"><span id="rfStatus">3 of 5 friends joined</span><span class="rf-reward" id="rfReward">$50 bonus at 5</span></div>
  </div>

  <button class="rf-invite" id="rfInvite" onclick="sendInvite()">Send an invite</button>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Copy-with-feedback link
copyLink uses navigator.clipboard.writeText (with an https:// prefix) and confirms "Copied ✓" for 1.6s — frictionless sharing.
Avatar milestone row
Filled gradient avatars vs dashed placeholders give a human "3 of 5" sense of progress alongside the bar.
Transform-based progress bar
The bar fills via scaleX from a left origin with a transform transition — smooth and export-safe across frameworks.
Spring avatar pop
Each new invite fills the next avatar with a cubic-bezier scale pop, rewarding the action.
Reward milestone chip
A chip teases the next reward ("$50 bonus at 5") so users always see the goal.
Unlocked complete state
Hitting the goal turns the bar green, updates the chip to "unlocked 🎉", and locks the button.
State-driven render
invited and GOAL drive render/renderAvatars, so seeding real data is a couple of assignments.
Premium styling
A gradient card with a radial glow and dashed ticket link gives the reward an elevated, shareable look.

About this UI Snippet

Referral Card — Copyable Link, Avatar Milestone Progress & Reward Unlock

Screenshot of the Referral Card snippet rendered live

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.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA "Give $10, get $10" referral card appears with a copyable link, an avatar row (3 filled, 2 empty), a progress bar, and an invite button.
  2. 2
    Copy the linkClick Copy — the referral URL is copied to the clipboard and the button confirms "Copied ✓" in green.
  3. 3
    Send an inviteClick "Send an invite" — the next avatar fills with a spring pop, the bar advances, and the status updates to "4 of 5".
  4. 4
    Reach the goalInvite the fifth friend — the bar turns green, the chip reads "$50 unlocked 🎉", and the button locks to "Reward unlocked ✓".
  5. 5
    Read the milestoneThe reward chip always shows the next milestone so users know what they are working toward.
  6. 6
    Wire real dataSeed invited from your backend and replace the demo button with your real share/send flow; the card recomputes.

Real-world uses

Common Use Cases

Referral / invite programmes
The core use — share a link and track invites toward a reward. Pair with a social share bar for multi-network sharing.
Credit and rewards systems
"Give $10, get $10" credit flows; show the resulting balance with a loyalty points widget.
Waitlist and viral loops
Move up the waitlist by inviting friends — the avatar milestone maps to "invite N to skip the line".
Affiliate and creator programs
Give creators a code and show conversions toward a payout tier.
In-app growth nudges
An invite card in a dashboard or settings page next to a profile completion meter.
Event and community invites
Invite friends to an event or community with progress toward a perk or unlock.

Got questions?

Frequently Asked Questions

Generate a unique code per user server-side (tie it to their account) and render it into the URL. Track signups by reading the ?ref= param on registration and crediting the referrer. Seed invited from the count of successful referrals, and award the reward server-side when the goal is reached — never trust the client for the actual payout.

On mobile, use the Web Share API: a "Share" button that calls navigator.share({ title, url }) opens the OS share sheet (Messages, WhatsApp, email). Fall back to the copy button and a social share bar of intent links on desktop. Sharing directly converts better than copy-then-paste.

transform: scaleX runs on the compositor for smoothness and, importantly for this site's exports, Tailwind's transition utility animates transforms but not raw width — so a width-based bar would snap in the React + Tailwind build. Scaling from a left origin gives the same visual fill while staying export-safe.

Make the copy and invite controls real <button>s (they are) so they are keyboard-operable, and announce the copy success and progress changes via an aria-live="polite" region. Give the progress bar role="progressbar" with aria-valuenow/aria-valuemax, and ensure the reward state is conveyed in text, not colour alone.

In React, hold invited (and the link) in useState, derive the bar scale and avatars from it, and manage the "Copied" flag with a setTimeout. In Vue, use refs and a computed for progress with v-for avatars. In Angular, track state on the component and bind [style.transform]. The scaleX bar and pop keyframe port unchanged.