Two lines

Testimonials on React or Next.js

A div and a script appended once, in an effect.

Paste these two lines

<script src="https://hazelsong.com/widget/YOUR-SLUG.js?template=wall" async></script>
<div id="hazelsong-wall"></div>

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

Where they go

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

Choosing the layout

The tag above draws a wall. Adding ?template= to the src changes it to any of the 23 — a marquee, a rating badge, a single pull quote — without touching your page again.

WallThe whole set, in cards, as many columns as fit.MasonryCards packed by height, no gaps left behind.Even gridCards of equal height, in strict rows.ListOne after another, full width, no boxes.CompactSmall cards, tight gaps, many at once.CarouselA row you push along, with arrows.

All 23, each running live on its own page

What you already have

Each guide below is one of those places and React or Next.js together: how they come across, and where they go.

Somewhere else

WordPressA Custom HTML block, anywhere in the page.ElementorThe HTML widget, dragged where you want it.ShopifyA Custom Liquid section on the page or the product template.WebflowAn Embed element, sized as you like.SquarespaceA Code block, on the plans that allow custom code.WixThe "Embed HTML" element.

Every builder

Collect one, and put it on React or Next.js

A form link, a customer who writes for a minute, and two lines on your page.

Start collecting