Embed guides / React & Next.js
Embed Notion testimonials in React / Next.js
For developers: NotionProof is a single async script that renders into a shadow root, so it can't collide with your styles, Tailwind reset, or CSS-in-JS. Load it globally or mount it in a component.
NotionProof is $5/mo (or $50/yr) with a 3-day free trial and a 30-day money-back guarantee.
Step by step
- 1
Connect your Notion database to NotionProof
Sign in at notionproof.com with Notion (one click), pick the database that holds your testimonials — or duplicate our free template — and NotionProof auto-detects your columns (name, quote, photo, rating, video).
- 2
Copy your one-line embed code
Pick a layout (Wall, Carousel, or Floating), tweak colors if you like, and copy the snippet. It looks like this and it's the same for every platform — only where you paste it changes.
- 3
Option A — plain script tag
Drop the snippet into your HTML template (index.html for Vite/CRA, or app/layout.tsx with next/script). The widget renders where the script tag sits, so place it inside the section you want.
- 4
Option B — mount in a component
Create the script element in a useEffect so it renders inside a specific div: useEffect(() => { const s = document.createElement('script'); s.src = 'https://notionproof.com/embed.js'; s.dataset.id = 'YOUR_EMBED_ID'; s.async = true; ref.current.appendChild(s); return () => { ref.current?.replaceChildren(); }; }, []) — with a <div ref={ref} /> as the mount point.
The snippet (same on every platform)
<script src="https://notionproof.com/embed.js" data-id="YOUR_EMBED_ID" async></script>Tips for React & Next.js
- ✓In Next.js App Router, mark the mounting component 'use client' — the widget is a browser-only script.
- ✓Shadow-DOM isolation means your global CSS reset and Tailwind preflight won't touch the widget, and vice versa.
- ✓SSR note: the widget hydrates client-side; reserve space with a min-height to avoid layout shift.
React & Next.js + NotionProof FAQ
›Is there an npm package or React component?
Not needed — the embed is a single script tag you can mount with a 5-line useEffect (pattern above). No dependency to version-manage.
›Does it cause hydration errors in Next.js?
No. The script injects into a shadow root after mount and never touches server-rendered markup, so React hydration is unaffected.
This wall is rendered by the same embed.js you'll paste on your site.
One line of code, anywhere. Won't break your site's styles. Loads instantly with your page, and updates automatically when you edit testimonials in Notion.
One plan. All features. Zero risk.
3-day free trial, then a 30-day money-back guarantee. Your testimonials stay in your Notion either way.
Pro
Everything NotionProof does.
Switch to annual to save 2 months
Card required · Cancel anytime in the first 3 days, no charge
Founding member
Same product. Lower price, locked forever.
That's $2.42/month
- ★Price locked forever — it never goes up while you're subscribed
- ★Concierge setup: I'll personally get your widget live with you
- ★Notion CRM template for collecting testimonials
- ★Direct line to the founder — your feedback shapes the roadmap
Why so cheap? I'm trading the first 25 customers a 42% discount, forever, for honest feedback and a testimonial (if you think it's earned one).
Starts with the same 3-day trial · Cancel anytime
Every plan includes
- ✓Unlimited testimonials
- ✓Unlimited embeds
- ✓Three layouts: Wall, Carousel, Floating
- ✓Three theme presets + full color control
- ✓Show / hide rating, photo, company, date
- ✓Shadow-DOM isolation — never breaks your styles
- ✓Works on Webflow, WordPress, Carrd, Notion sites, Framer, plain HTML
- ✓Self-updating from your Notion database
- ✓Privacy-first: your data stays in Notion
30-day money-back guarantee
If NotionProof isn't worth it, email me within 30 days of your first charge and I'll refund 100% — no questions, no forms, no "retention specialist". And because your testimonials never leave Notion, you walk away with everything you came with.