QR Scan Card

A desktop-only card with a QR code visitors scan with their phone, to grab your app or follow you, with smart OS detection.

Copied 0 times.

Scan to get the app

📱

Store picked from the visitor's OS automatically.

Members only

This design needs a membership.
Today's price: $1/month, locked forever once you join.

Get it for $1/month Log in

Build a QR scan card for my website. Match my existing design system and tech stack.

STRUCTURE
- A rounded card with a short heading on top and a QR code below it, on a contrasting background so it stands out from the page.
- The heading reads "Scan to get the app". The QR encodes the app download link (store page).
- Place the card inline as a page section, always visible where it sits in the layout.

BEHAVIOR
- DESKTOP ONLY. Render the card only on viewports 768px and wider. On smaller screens a QR code is useless (the visitor cannot scan their own screen), so on mobile replace the whole card with a simple tappable button that opens the same destination directly.
- APP MODE ONLY (skip if the QR leads to social): detect the visitor's OS from the user agent. macOS visitors get the Apple App Store QR and link; Windows, Linux and ChromeOS visitors get the Google Play QR and link. When detection is inconclusive, fall back to the two-tab chooser below. SOCIAL MODE: point the QR at the chosen social profile instead.
- For the floating and popup placements, wait 10 seconds after page load before the card may appear (0 = immediately). The inline section ignores this delay.

QUALITY AND HONESTY
- The QR code must be REAL, generated from the actual destination URLs I give you (small client-side QR library or build-time generation). NEVER ship a decorative fake QR image; forbid this in a code comment.
- Render the QR at 160px minimum with a proper quiet zone and high contrast so cheap phone cameras scan it on the first try.
- Floating and popup placements need a visible close button, and a dismissal is remembered for the session (sessionStorage) so the card never nags.
- No tracking beyond your normal analytics; the QR encodes the destination URL only, no fingerprinting parameters.

QUESTIONS
- Before you build, find or ask for: the exact destination URLs the QR encodes (App Store link, Google Play link, or the social profile URL, depending on the mode above). Check my project and site first; whatever you cannot find there, ask me for. Never invent these or ship placeholders.
- If anything else about my brand or content is unclear, ask me before inventing.

Members only

What it does

The QR scan card bridges two screens. Someone browsing on their computer points their phone at the code and lands straight in your app store or on your social profile. No typing, no emailing yourself a link, just a scan.

Desktop-only by design, because nobody can scan their own phone screen; phone visitors get a plain tappable button instead.
The code is always real, generated from your actual links; decorative fake QRs are banned.
App mode guesses the visitor's phone from their computer: Mac means App Store, everything else Google Play.
Your AI asks for your real links before building anything.

How it works

1Pick what the QR leads to, your app or one of your social profiles.
2Choose where and when it shows: a page section, a floating corner card, or an exit popup, with a delay up to 60 seconds.
3Copy the prompt, the card's build sheet for your AI, into whichever AI you use.
4Hand over your real store or profile links when your AI asks; it won't build the card around a placeholder.
5Scan the finished code with your own phone; even a cheap camera should catch it on the first try.
6Shrink to a phone-size window to confirm the card swaps itself for a plain tappable button.

What you can customize

What it leads to: app mode sends scanners to the right store; social mode points at your profile with the network's icon in the middle.
App store handling: auto-detect guesses the store from the visitor's computer; let them choose shows two little store tabs above the code.
Social network: X, Instagram, TikTok, YouTube, or Discord, whichever profile you most want new followers on.
When and where: inline is always visible; the floating card and exit popup wait out your chosen delay and remember being closed for the visit.
Delay: 0 shows it immediately; up to 60 seconds saves it for people who settle in.
Colors and heading adapt to your site automatically, because your AI builds the card right inside your own design.