Skip to content
Kudobox

Product Hunt → React or Next.js

Add Product Hunt reviews to a React or Next.js site

Bring your Product Hunt reviews into Kudobox with the link to each one, approve them, and paste two lines into a React or Next.js site. A review on Product Hunt works for you on Product Hunt; on your own pages it works where visitors decide, and every card links back to the original.

In three steps

  1. Bring the Product Hunt reviews across

    A review or a comment on your launch, with its link. Paste the words and that link into Kudobox with the source set to “Product Hunt”. Or select the review on Product Hunt and press the Save to Kudobox bookmark, from your dashboard's tools: the source is chosen for you and the page's address comes with it. A spreadsheet of them uploads in one go, its columns read by their names.

  2. Read, then approve

    Each one is read for risk exactly like a testimonial written to you — a promised result, a figure, somebody's private detail — and waits in Pending until you approve it. The words themselves are never edited.

  3. Paste two lines into React or Next.js

    A div and a script appended once, in an effect. The widget shows only what you approved, and only what may be shown on a website, and each card says “Originally posted on Product Hunt” with the link to the original.

Where the two lines go in React or Next.js

Paste these two lines
<script src="https://getkudobox.com/widget/YOUR-SLUG.js" async></script>
<div id="kudobox-wall"></div>

Your slug is in your dashboard, with the tag ready to copy.

  1. Render <div id="kudobox-wall" /> where the testimonials belong.
  2. In a useEffect that runs once, create a script element with the widget's src and append it to the container.
  3. Remove it in the effect's cleanup so a fast refresh does not append it twice.
  4. In Next.js you can use next/script with strategy="afterInteractive" instead, which does the same thing.

The React or Next.js guide on its own

About Product Hunt reviews

The Product Hunt import guide on its own

Layouts that suit Product Hunt reviews

Product Hunt reviews are read for what they say, so these three lead with the words rather than a score.

WallThe whole set, in cards, as many columns as fit.CarouselA row you push along, with arrows.Pull quoteThe words alone, set large, centred.

All 23, each running live on its own page

What will not happen to them

  • The words will not be edited. Not tidied, not shortened, not improved — by you, by us, or by a model.
  • The source will not be dropped: every card says it was originally posted on Product Hunt, with the link where you gave one.
  • Nothing will be fetched from Product Hunt for you — you are the one who decides each may be republished.
  • Nothing is public until you approve it, and one the reading flagged tells you why before you decide.

Product Hunt reviews on other builders

FramerThe Embed component, set to HTML.WebflowAn Embed element, sized as you like.CarrdAn Embed element, on the plans that allow code.A hand-written pagePaste the two lines where they belong.NotionNotion cannot run a script. Link the wall instead.GhostAn HTML card in the post or page.SubstackNo scripts in a newsletter. Use a testimonial image.

Other reviews on React or Next.js

Every source, on every builder it belongs on

Put your Product Hunt reviews on a React or Next.js site

Free for up to 15 testimonials, with all 23 layouts and the hosted wall included.

Start collecting