Adding Product Hunt Badge on the Website

A complete guide on how to add the Product Hunt badge on the website.

Adding a Product Hunt badge on the website lets visitors (especially, other makers like yourself) know that you have launched on the Product Hunt. As soon as you post a product, these badges become available to embed.

Also, the PH badges act as a form of social proof and it lets visitors know that other people are already trusting your product.

If you’re wondering what other benefits it brings, here you go:

Benefits of adding the Product Hunt badge

  • On the launch day, the badge directs the website visitors to the launch page and gets you some valuable upvotes and comments
  • The badge also helps you gain testimonials from the real users
  • Creates social proof and makes people trust your product

Even after the launch day, people can see the badge and come to upvote & comment on the product page. And, that might help you become the #1 of the week or month – you never know.

Related: Download the Product Hunt upvoters list

How to add the Product Hunt badge to your website

Currently, Product Hunt offers 3 kinds of badges:

  1. Featured badge
  2. Top post daily badge
  3. Leave a review badge
Product Hunt Badges
Badges that we received for the Personal Websites launch

📢 All the Product Hunt badges are available in light as well as dark mode.

Not to mention, the “Top post daily” badge appears only if your product ended up being in the top 5 of the day. The other two are available from the start.

As soon as the product goes live, you will the embed button at multiple places on the Product Hunt launch page.

Step 1 – Get the embed code

Now, there can be multiple ways to get the embed code. Here are some:

  • You can click the downward arrow next to the title of your product then click on the “Embed” button
Embedd arrow button
  • Or, the “Embed” button next to the social share buttons
Embed social button
  • Or, the “Embed a badge to your website” option above the hunter and makers section

📢 On the launch day, you can select the Featured Badge to embed and the Top Posts Daily badge after the launch day (if you get into the top 5).

Copy the embed code and save it in a text file for future reference.

Step 2 – Add the code to your website

Now, since you have the embed code, just add the code to your website.

Well, the process will be different for the different website types and where you want to embed it.

For example, if you have a WordPress site and you want to embed it in the footer, you can select a Custom HTML widget and simply paste the code. In fact, WordPress Gutenberg editor lets you add the badge anywhere on the page by using the Custom HTML widget.

But if you have a custom-coded website, you might need to ask your developer to do that (unless you’ve coded the website by yourself 😉).

There’s also an option to embed the whole preview of the post (obviously not to add on the landing page, LOL). You can embed it in a blog post. See the screenshot below:

How others are using the Product Hunt badge

Let’s have a look at how other makers are using the badge on their websites:

  • Superportfolio
  • CleanMock
  • GetPause
  • BlurWeb
  • Inlytics
  • Checklist Getalvis

📢 I have also seen a lot of websites adding a static image of the badge. Obviously, it doesn’t update automatically but loads quicker than the code. So it’s up to you how you want to add.

That’s it.

If you are having any difficulty in adding the badges, just let me know in the comments below.

Leave a Reply

Your email address will not be published. Required fields are marked *