Swipe File: Product Hunt Badge Embed Codes & Widget Script
last updated: Apr 24, 2026
You have a launch to manage, and you need that "Featured on Product Hunt" badge on your site immediately. You don't have time to wrestle with heavy scripts or third-party tools. Here are the raw, lightweight HTML snippets for the Featured Badge and Upvote Counter to copy-paste directly into your code.
TL;DR
The official Product Hunt badge is a dynamic SVG image wrapped in an anchor link. It updates your upvote count in real-time without requiring heavy JavaScript or external scripts.
Key Takeaways:
How to use this swipe file: Replace the capitalized placeholders in the code below with your specific launch details.
Key Takeaways:
- Benchmark: Place the badge above the fold for the first 24 hours to maximize click-throughs. Hero sections typically drive the highest engagement.
- Rule: Use the featured.svg endpoint for the standard badge; it auto-updates with your upvote count.
- Warning: Avoid third-party JS widgets if possible; they can slow down your site. Stick to the official SVG to avoid rendering blocking.
How to use this swipe file: Replace the capitalized placeholders in the code below with your specific launch details.
Glossary
- Post ID: The unique numeric identifier for your launch (e.g., 123456). This is not your URL slug. You need this number for the embed code to work.
- Slug: The text part of your Product Hunt URL (e.g., my-cool-product). Used for the link destination.
- Embed Theme: The visual style of the badge (light, dark, or neutral). This should match your website's CSS.
- Featured Badge: The standard badge showing "Featured on Product Hunt" + Upvote Count. Refer to our featured criteria guide to understand how to earn it.
How to Embed the Badge
Replace YOUR_POST_ID (numeric) and YOUR_POST_SLUG (text) in the snippets below.
1. The Standard "Featured" Badge (Dynamic Upvote Count)
Best for: Hero sections, Footers, and Launch Day banners.
Light Mode (White Background):
<a href="https://www.producthunt.com/posts/YOUR_POST_SLUG?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-YOUR_POST_SLUG" target="_blank">
<img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=YOUR_POST_ID&theme=light" alt="Your Product Name - Your Tagline | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" />
</a>
Dark Mode (Dark Background):
<a href="https://www.producthunt.com/posts/YOUR_POST_SLUG?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-YOUR_POST_SLUG" target="_blank">
<img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=YOUR_POST_ID&theme=dark" alt="Your Product Name - Your Tagline | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" />
</a>
2. The "Top Post" Badge
Best for: Social proof after you have secured a Top 1–5 spot.
<a href="https://www.producthunt.com/posts/YOUR_POST_SLUG?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-YOUR_POST_SLUG" target="_blank">
<img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=YOUR_POST_ID&theme=light&period=daily" alt="Your Product Name - Your Tagline | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" />
</a>
3. Finding Your Post ID
If you don't know your numeric Post ID, these codes won't work.
1. The Standard "Featured" Badge (Dynamic Upvote Count)
Best for: Hero sections, Footers, and Launch Day banners.
Light Mode (White Background):
<a href="https://www.producthunt.com/posts/YOUR_POST_SLUG?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-YOUR_POST_SLUG" target="_blank">
<img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=YOUR_POST_ID&theme=light" alt="Your Product Name - Your Tagline | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" />
</a>
Dark Mode (Dark Background):
<a href="https://www.producthunt.com/posts/YOUR_POST_SLUG?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-YOUR_POST_SLUG" target="_blank">
<img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=YOUR_POST_ID&theme=dark" alt="Your Product Name - Your Tagline | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" />
</a>
2. The "Top Post" Badge
Best for: Social proof after you have secured a Top 1–5 spot.
<a href="https://www.producthunt.com/posts/YOUR_POST_SLUG?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-YOUR_POST_SLUG" target="_blank">
<img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=YOUR_POST_ID&theme=light&period=daily" alt="Your Product Name - Your Tagline | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" />
</a>
3. Finding Your Post ID
If you don't know your numeric Post ID, these codes won't work.
- Go to your Product Hunt launch page.
- Click the "Embed" button (often found under the share menu or by inspecting the URL in your dashboard).
- Look for the code snippet provided by Product Hunt. Inside it, find post_id=XXXXXX. That number is your ID.
Benchmarks
Why bother adding the badge? It's about trust transfer.
The Math:
Conversion Impact:
General data suggests that trust badges (like "As Seen On" or "Featured") can increase on-page conversion rates by 20–30%. While the PH badge is specific to tech, the psychological effect of social proof remains consistent.
The Math:
- Scenario: You have 1,000 unique visitors on Launch Day.
- CTR (Above Fold): If the badge is in the Hero, expect a 2–5% Click-Through Rate. That is 20–50 visitors clicking through to Product Hunt to support you.
- CTR (Footer): If buried in the footer, CTR drops to 0.1–0.5%. That is only 1–5 clicks.
Conversion Impact:
General data suggests that trust badges (like "As Seen On" or "Featured") can increase on-page conversion rates by 20–30%. While the PH badge is specific to tech, the psychological effect of social proof remains consistent.
SVG vs JS Widgets
ou have two choices for embedding: the raw SVG (provided above) or a JavaScript widget.
Risks
- Speed Kills: Adding third-party scripts to your header can destroy your Core Web Vitals. This is why we use the SVG image method—it avoids executing code on the client side.
- API Downtime: If Product Hunt's API flickers, the image might fail to load. Always add an alt tag (included in our snippets) so screen readers and SEO crawlers still know what it is.
- Vanity Trap: A badge proves you launched; it does not prove you have product-market fit. Don't confuse upvotes with revenue.
Will a shiny badge actually get you to $10k MRR?
No. It won't.
Mastering the embed code is a necessary step for launch day optics, but it is not the whole picture. A badge is passive social proof; it does not drive traffic on its own. You can have perfect execution on the embed, but if your launch strategy is weak, your probability of hitting significant revenue remains near 0%.
The badge signals you exist. It doesn't sell your product. Use the code, but focus on the offer. Fix your foundation before you launch.
Mastering the embed code is a necessary step for launch day optics, but it is not the whole picture. A badge is passive social proof; it does not drive traffic on its own. You can have perfect execution on the embed, but if your launch strategy is weak, your probability of hitting significant revenue remains near 0%.
The badge signals you exist. It doesn't sell your product. Use the code, but focus on the offer. Fix your foundation before you launch.
FAQ
- You:Where should I put the badge on Launch Day?Guide:Place it immediately visible in your Hero section (above the fold). Users visiting from social media need to see the "Upvote" prompt instantly. After launch day, move it to the Footer.
- You:Does the upvote count update automatically?Guide:Yes. Because the image source is api.producthunt.com, the SVG image is generated on the fly. You do not need any JavaScript to update the number; the image refreshes itself on page load.
- You:Can I use a custom design for the badge?Guide:Technically yes, you can download the SVG and edit it, but you lose the dynamic upvote counter. It is recommended to use the official hosted image to maintain trust and show real-time momentum. Please refer to the Product Hunt Brand Guidelines to ensure you don't violate their trademark terms.
No-BS guides