ProofWall field notes

Add Testimonials to Next.js: Free Widget

Install a ProofWall wall on Next.js. Specific editor steps, the right embed snippet, and common publishing pitfalls.

Use next/script after hydration so the testimonial container already exists.

Before you paste

Create a wall, share the collection link, and approve your first testimonial. Copy the slug from the Embed tab. Instructions reflect editor patterns from 2025–2026; menus and plan support vary.

Installation steps

Render the data-proofwall div in your page component.
Import Script from next/script and use strategy="afterInteractive".
For client-side navigation to new walls, mount a fresh widget container and initialise the script on that route.

Your embed snippet

Replace YOURSLUG with the slug shown in your dashboard.

import Script from 'next/script';

<div data-proofwall="YOURSLUG" />
<Script src="https://proofwall.wouldairecommend.workers.dev/embed.js" strategy="afterInteractive" />

Watch out for

The embed fetches on the client. Your CSP needs the ProofWall origin in both script-src and connect-src. Avoid raw HTML injection and test route transitions.

Check before sharing

Open the published page at desktop width and at 360 pixels. Confirm that quotes are readable, links work, and an iframe has enough height. Check both light and dark themes. Never put your private account access link in an embed.

Next: widget options · another installation guide.

Questions, answered

Can I paste a script into Next.js?

Use an HTML-capable area. Preview the published page because editors can suppress scripts.

Why is my widget empty?

Approve a testimonial first. Replace YOURSLUG with your wall’s eight-character slug. Check browser network and content-security-policy errors, then try the hosted wall URL.