Een simpele testimonialwidget voor Next.js (geen npm-package, één iframe)
Je bouwt je portfolio of een klantsite in Next.js en je wilt er echte reviews op. Je kunt een tabel voor testimonials, een adminscherm en een moderatieflow bouwen, of je plaatst één iframe. Deze gids laat de tweede optie zien met SimplerFeedback: het kale HTML-snippet, een klein App Router-component, de strookvariant voor een homepage, en wat een iframe eerlijk gezegd niet kan.
Het idee: je reviews staan op een muur van jou, je site toont hem in een kader
Met SimplerFeedback worden reviews verzameld via je formulieren en gepubliceerd op je muur, een openbare pagina op simplerfeedback.com/wall/your-slug. Die pagina is de bron van waarheid: je keurt een review goed, hij verschijnt op de muur, en elke site die de muur insluit, toont hem ook.
Je Next.js-site slaat niets op. Hij toont de muur in een iframe. De muur is statische HTML die vanaf een CDN wordt geserveerd, dus er is geen API-key om geheim te houden, geen npm-package om te installeren en geen build om opnieuw te draaien als er een nieuwe review binnenkomt. Publiceer een review in de app en de embed is meteen bijgewerkt.
Het kale HTML-snippet
Open in de app Mijn muur, dan Delen, en kopieer de insluitcode. Het zijn twee regels: de iframe en een optioneel script dat de hoogte regelt.
<iframe
src="https://simplerfeedback.com/wall/your-slug?embed=wall"
title="Your name"
style="width:100%;height:900px;border:0"
loading="lazy"
></iframe>
<script src="https://simplerfeedback.com/embed.js" async></script>De hoogte van 900px is alleen een terugvaloptie. embed.js luistert naar een bericht dat de muur stuurt met de echte hoogte van de inhoud (sf-embed-height) en past de hoogte van de iframe daarop aan, zodat de muur nooit een interne scrollbalk of een lege ruimte toont. Zonder het script houdt de iframe gewoon de hoogte uit zijn style-attribuut. Eén script-tag is genoeg voor alle muur-iframes op de pagina.
Een Next.js App Router-component
Kale HTML in JSX plakken werkt, maar een klein component houdt de slug in één prop en laadt het script één keer. next/script met strategy="lazyOnload" laadt embed.js als de browser niets te doen heeft en ontdubbelt het, dus als je het component twee keer op een pagina rendert, komt het script er niet twee keer in (het script beschermt zichzelf ook).
// components/TestimonialWall.tsx
'use client';
import Script from 'next/script';
type Props = {
slug: string;
title: string;
variant?: 'wall' | 'strip';
featured?: boolean; // strip only, Premium
};
export function TestimonialWall({ slug, title, variant = 'wall', featured = false }: Props) {
const params = new URLSearchParams({ embed: variant });
if (variant === 'strip' && featured) params.set('featured', '1');
const src = `https://simplerfeedback.com/wall/${encodeURIComponent(slug)}?${params}`;
return (
<>
<iframe
src={src}
title={title}
loading="lazy"
style={{ width: '100%', height: variant === 'strip' ? 320 : 900, border: 0 }}
/>
<Script src="https://simplerfeedback.com/embed.js" strategy="lazyOnload" />
</>
);
}Twee attributen zijn belangrijk. title geeft de iframe een toegankelijke naam, die schermlezers voorlezen; gebruik iets betekenisvols zoals “Klantreviews”, niet “iframe”. loading="lazy" betekent dat een muur onder de vouw pas wordt opgehaald als de bezoeker in de buurt scrolt, dus hij kost niets bij de eerste weergave.
De strook voor een homepage, en alleen vastgezette reviews
Een volledige muur past op een /testimonials-pagina. Op een homepage wil je meestal een korte band met bewijs onder de hero. Gebruik ?embed=strip: een horizontale strook reviews, standaard 320px hoog. Met Premium voeg je featured=1 toe aan de strook om alleen de reviews te tonen die je hebt vastgezet (maximaal drie), zodat de homepage altijd opent met je beste.
// app/page.tsx — a strip of pinned reviews under the hero
import { TestimonialWall } from '@/components/TestimonialWall';
export default function Home() {
return (
<main>
{/* ...hero... */}
<TestimonialWall slug="your-slug" title="What clients say" variant="strip" featured />
</main>
);
}
// app/testimonials/page.tsx — the full wall
// <TestimonialWall slug="your-slug" title="Client reviews" />Styling en lay-out
Behandel de iframe als een afbeelding: hij vult de breedte van zijn container en embed.js regelt de hoogte. Zet hem in de wrapper die je lay-out al gebruikt (een container met max-breedte, een gridcel) en hij past zich aan.
- Breedte: 100% van de parent. Begrens de parent, niet de iframe.
- Hoogte: ingesteld door embed.js op basis van de inhoud; de inline hoogte is alleen de terugvaloptie.
- Kleuren en donkere of lichte modus komen uit de muurstijl, niet uit je site. Je CSS kan niet in een cross-origin iframe komen, en dat moet je ook niet proberen.
- Kies een muurstijl die bij de pagina past (Terminal past bij een developerportfolio), of gebruik Bouw je eigen stijl met Premium om achtergrond-, accent- en tekstkleur op je merk af te stemmen.
De beperkingen, eerlijk gezegd
Het is een iframe, met alles wat daarbij hoort. De reviews worden niet server-side in je DOM gerenderd, dus zoekmachines rekenen de reviewtekst niet toe aan je pagina; die tekst wordt geïndexeerd op de URL van de muur, waar je ook direct naar kunt linken. Er is geen React-componentpackage en geen openbare API om reviews als JSON op te halen: het component hierboven mag je kopiëren, en de iframe is de integratie.
Voor de meeste portfolio’s en klantsites is dat de juiste afweging: twee minuten om toe te voegen, niets te onderhouden, en reviews die vanzelf actueel blijven.