ProofWall field notes

Add Testimonials to React: Free Widget

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

Render the container with React and load the small embed script after it mounts.

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

1. Add a div with data-proofwall to your component JSX.
2. In useEffect, append a script with the ProofWall embed URL and async=true.
3. Remove the script on cleanup; when the wall container changes, mount a fresh container before loading again.

Your embed snippet

Replace YOURSLUG with the slug shown in your dashboard.

import { useEffect } from 'react';

export function Testimonials() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://proofwall.wouldairecommend.workers.dev/embed.js';
    script.async = true;
    document.body.append(script);
    return () => script.remove();
  }, []);
  return <div data-proofwall="YOURSLUG" />;
}

Watch out for

The widget attaches a Shadow DOM to the div. Avoid letting React render children inside it. In Strict Mode, effects may run twice; the widget skips containers with an existing shadow root.

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