Un widget di testimonianze semplice per Next.js (nessun pacchetto npm, un solo iframe)

L’idea: le tue recensioni vivono su una bacheca tua, il tuo sito la incornicia e basta

Con SimplerFeedback, le recensioni vengono raccolte tramite i tuoi moduli e pubblicate sulla tua bacheca, una pagina pubblica all’indirizzo simplerfeedback.com/wall/your-slug. Quella pagina è la fonte di verità: approvi una recensione, compare sulla bacheca, e ogni sito che incorpora la bacheca la mostra a sua volta.

Il tuo sito Next.js non memorizza nulla. Incornicia la bacheca in un iframe. La bacheca è HTML statico servito da una CDN, quindi non c’è nessuna chiave API da tenere segreta, nessun pacchetto npm da installare e nessuna build da rilanciare quando arriva una nuova recensione. Pubblichi una recensione nell’app e l’incorporamento è già aggiornato.

Lo snippet HTML puro

Nell’app, apri La mia bacheca, poi Condividi, e copia il codice da incorporare. Sono due righe: l’iframe e uno script facoltativo che lo dimensiona.

<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>

L’altezza di 900px è solo un valore di riserva. embed.js ascolta un messaggio che la bacheca invia con l’altezza reale del suo contenuto (sf-embed-height) e imposta l’altezza dell’iframe di conseguenza, così la bacheca non mostra mai una barra di scorrimento interna né uno spazio vuoto. Senza lo script, l’iframe mantiene semplicemente l’altezza indicata nel suo attributo style. Un solo tag script basta per tutti gli iframe di bacheca della pagina.

Un componente per Next.js App Router

Incollare HTML puro nel JSX funziona, ma un piccolo componente tiene lo slug in una sola prop e carica lo script una volta sola. next/script con strategy="lazyOnload" carica embed.js quando il browser è inattivo e lo deduplica, quindi renderizzare il componente due volte in una pagina non aggiunge lo script due volte (e lo script si protegge anche da solo).

// 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" />
    </>
  );
}

Due attributi contano. title dà all’iframe un nome accessibile, che gli screen reader leggono ad alta voce; usa qualcosa di significativo come “Recensioni dei clienti”, non “iframe”. loading="lazy" fa sì che una bacheca sotto la piega venga caricata solo quando il visitatore ci si avvicina scorrendo, quindi non costa nulla al primo caricamento.

La striscia per una home page, e solo le recensioni fissate

Una bacheca completa è perfetta per una pagina /testimonials. In una home page di solito vuoi una breve fascia di prove sotto l’hero. Usa ?embed=strip: una striscia orizzontale di recensioni, alta 320px di default. Con Premium, aggiungi featured=1 alla striscia per mostrare solo le recensioni che hai fissato (fino a tre), così la home page si apre sempre con le migliori.

// 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" />

Stile e layout

Tratta l’iframe come un’immagine: occupa tutta la larghezza del suo contenitore ed embed.js si occupa dell’altezza. Mettilo nel wrapper che usa il tuo layout (un contenitore con larghezza massima, una cella di griglia) e si adatta.

• Larghezza: 100% del genitore. Limita il genitore, non l’iframe.
• Altezza: la imposta embed.js in base al contenuto; l’altezza inline è solo il valore di riserva.
• I colori e la modalità chiara o scura dipendono dallo stile della bacheca, non dal tuo sito. Il tuo CSS non può entrare in un iframe di un’altra origine, e non dovresti provarci.
• Scegli uno stile di bacheca adatto alla pagina (Terminal sta bene in un portfolio da sviluppatore), oppure usa Crea il tuo con Premium per adattare sfondo, colore d’accento e colore del testo al tuo brand.

I limiti, onestamente

È un iframe, con tutto ciò che comporta. Le recensioni non vengono renderizzate lato server nel tuo DOM, quindi i motori di ricerca non attribuiscono il testo delle recensioni alla tua pagina; quel testo viene indicizzato sull’URL della bacheca, a cui puoi anche linkare direttamente. Non esiste un pacchetto di componenti React né un’API pubblica per ottenere le recensioni in JSON: il componente qui sopra è tuo da copiare, e l’iframe è l’integrazione.

Per la maggior parte dei portfolio e dei siti dei clienti è il compromesso giusto: due minuti per aggiungerlo, niente da mantenere e recensioni che restano aggiornate da sole.