ProofSwap launch badge
Copy a plain HTML snippet into your site footer or homepage. The badge links to your public listing on ProofSwap with rel="nofollow". Once we verify it, your ProofSwap link turns dofollow for as long as the badge stays on your site.
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 “Check now” on the same panel. We also re-check automatically: daily during launch week, weekly after.
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. New snippets use rel="nofollow" by default; you may qualify the link another way if your site policy calls for it. Older snippets still verify.
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="nofollow 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="nofollow 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="nofollow 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 the destination and badge marker or image.
- Keep the image src pointing at https://proofswap.me. Do not proxy, self-host, inline or rewrite the SVG. The generated link uses rel="nofollow noopener noreferrer"; you may qualify it with rel="sponsored" or rel="ugc" when appropriate. Qualified links verify, and older snippets without a rel value still verify.
- 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 homepage or site footer. Your launch does not wait for it.
- Keep it live: once verified your ProofSwap link is dofollow, and we re-check daily during launch week and weekly after.
FAQ
Can I qualify the badge link?
Yes. New snippets use rel="nofollow" by default, and you may use another qualifying value that fits your site, such as sponsored or ugc. Older snippets without a rel value still verify. Search engines decide how to treat links.
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 I need the badge to launch?
No. Free and paid launches go live and can be voted on without it. The badge is what earns the dofollow link: a verified badge turns your ProofSwap link dofollow, and paying for a queue skip never does.
What happens if I remove the badge later?
We keep re-checking, weekly once your launch week is over. If a verified badge disappears you get a warning email. If it stays missing, your link goes back to nofollow and the launch is hidden from the public board. Putting the badge back restores both.
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.