ProofSwap launch badge
Copy a plain HTML snippet into your site footer or launch page. The badge links to your public listing on ProofSwap. Free launchers must keep it live before and during launch week.
Install it in three steps
- 1
Get your snippet
Open your project on My Projects and scroll to Launch badge. The snippet there already has your slug in it. Pick a variant and a theme — or copy the AI agent prompt instead and hand it to Claude Code, Cursor or Copilot.
- 2
Paste it into your site
Footer, layout, or any element that renders on every page. It must be in the HTML your server sends on the first request.
- 3
Deploy, then verify
Ship the change to your live site, then press “Re-check now” on the same panel. We also re-check automatically once a day.
Variants
launching · light
launching · dark
launched · light
launched · dark
Top 3 winner badges (gold, silver, bronze) unlock after week close. Copy the exact variant from your project dashboard once it is available.
gold · light
gold · dark
silver · light
silver · dark
bronze · light
bronze · dark
The snippet
Links to /p/proofswap — your dashboard gives you the same thing with your own slug. The link is dofollow (no nofollow).
Auto light/dark (recommended)
The <picture> element swaps the badge on prefers-color-scheme, so each visitor sees the version matching their own system appearance — the same setting macOS “Auto” switches. No JavaScript involved.
In JSX/TSX (React, Next.js, Astro islands), rename srcset to srcSet — lowercase is a TypeScript build error. The rendered HTML is unchanged, so verification still passes.
<a href="https://proofswap.me/p/proofswap" data-proofswap-launch="proofswap" rel="noopener noreferrer" target="_blank">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://proofswap.me/badges/launch/launching-dark.svg" />
<img src="https://proofswap.me/badges/launch/launching-light.svg" alt="Launching on ProofSwap" width="200" height="44" />
</picture>
</a>Fixed theme
Use this if your site is always light or always dark. This is also the original snippet shape — if you already have it on your site, it still verifies and there is nothing to change.
<a href="https://proofswap.me/p/proofswap" data-proofswap-launch="proofswap" rel="noopener noreferrer" target="_blank"> <img src="https://proofswap.me/badges/launch/launching-light.svg" alt="Launching on ProofSwap" width="200" height="44" /> </a>
Prompt for your coding agent
Paste into Claude Code, Cursor, Copilot or any agent with access to your repo. It carries the snippet plus the rules that make verification pass.
Add the ProofSwap launch badge to my website.
Paste this snippet into the site footer (or another element that renders on every page):
<a href="https://proofswap.me/p/proofswap" data-proofswap-launch="proofswap" rel="noopener noreferrer" target="_blank">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://proofswap.me/badges/launch/launching-dark.svg" />
<img src="https://proofswap.me/badges/launch/launching-light.svg" alt="Launching on ProofSwap" width="200" height="44" />
</picture>
</a>
Requirements:
- JSX/TSX sites (Next.js, Remix, Vite+React, Astro with React): rename srcset to srcSet. Lowercase srcset is a TypeScript build error and will fail the build. Vue, Svelte, plain HTML and templating languages take the snippet unchanged.
- It must be in the HTML the server sends on the first request. Any server-rendered framework component is fine. Only badges injected purely client-side (useEffect, document.createElement, a widget loader) fail.
- Keep the data-proofswap-launch attribute and the <a href="https://proofswap.me/p/proofswap"> — verification reads both.
- Keep the image src pointing at https://proofswap.me. Do not proxy, self-host, inline or rewrite the SVG, and do not add rel="nofollow".
- Keep both <source> and <img>. That pair switches the badge between light and dark using the visitor's prefers-color-scheme.
- If the site sends a Content-Security-Policy header, add https://proofswap.me to img-src, or the badge renders broken for visitors even though it passes verification.
- You may wrap it in your own layout element and style the wrapper (margin, alignment). Do not change the width/height attributes.
- Next.js: plain <a>/<img> is correct — do not convert to next/link or next/image.
Verify before telling me it is done:
curl -s https://YOUR-SITE.com | grep proofswap
If that prints nothing, it is not in the server HTML and will not pass.
After deploying, I will verify it from my ProofSwap project page.Where to add it
- Join the free launch queue at /launches/submit.
- After approval, open your project on My Projects for the personalized snippet.
- Paste into your site footer or launch page before your launch week starts.
- Keep it live through launch week — we re-check periodically.
FAQ
Is the badge link dofollow?
Yes. The badge link to proofswap.me is a normal dofollow link (rel="noopener noreferrer" only). Your outbound project link on ProofSwap still follows the earned-dofollow rule — giving proof, never paid.
Does the badge adapt to light and dark mode?
Yes, if you pick the Auto theme. It emits a <picture> element with a prefers-color-scheme media query, so each visitor gets the light or dark badge that matches their own system appearance — the same setting macOS “Auto” switches. Fixed Light and Dark snippets are still available for sites that are always one or the other.
I already added the badge — do I need to re-copy it?
No. The original snippet keeps verifying exactly as before. Verification only looks for a link to your /p/slug listing containing a ProofSwap badge image, which both the old and the new snippets have. Re-copy only if you want the auto light/dark version.
Do paid queue skip launchers need the badge?
No. The €7 queue skip is optional for the badge. Free queue joiners agree to display it before launch week.
Which badge variant should I use?
Use “Launching on ProofSwap” before and during your week. Switch to “Launched on ProofSwap” afterward. A “Top 3” variant unlocks when you finish in the top three after week close.
Why did verification fail on my React/SPA site?
We fetch static HTML only — no headless browser. If the badge is added purely on the client after JavaScript runs, our checker will not see it. Add the snippet to HTML your server sends on first load.
My build fails with "srcset does not exist" — what do I do?
In JSX/TSX (React, Next.js, Remix, Vite+React, Astro with React), rename the auto snippet's srcset to srcSet — lowercase is a TypeScript error. Vue, Svelte, plain HTML and templating languages take it unchanged. The rendered HTML is identical either way, so verification is unaffected: the checker only reads the anchor's href and the /badges/launch/ image path.