React / Next.js

Embed Provoon in React or Next.js

Yes. Provoon works in React and Next.js by rendering a normal iframe pointed at your published embed URL. There’s no required npm package. Publish your Wall of Love, proof avatars, or logo slider, copy the src from Get Embed, drop an iframe into your component with width 100% and border none, then deploy. App Router and Pages Router both work.

How do I embed Provoon in React or Next.js?

1. 1

   Publish and copy your embed URL

   In Provoon, Publish the Wall of Love, proof avatars, or logo slider. Open Get Embed and copy the iframe src (or the full tag).

2. 2

   Add an iframe in JSX

   Create a small component that returns an iframe with src set to your embed URL, width="100%", the height from Get Embed, and style={{ border: "none" }}.

3. 3

   Keep title and loading attributes

   Add a title for accessibility (e.g. “Customer testimonials”). loading="lazy" is fine below the fold; skip aggressive sandbox flags that block scripts.

4. 4

   Mount it on a marketing page

   Import the component on a landing, pricing, or product page. In Next.js App Router, a Server Component can render a static iframe; Client Components work too.

5. 5

   Optional: read the URL from env

   If you swap walls per environment, store the embed src in an env var and pass it as a prop — still the same Get Embed URL after Publish.

6. 6

   Deploy and verify

   Deploy to Vercel, Netlify, or your host. Open the live route and confirm the frame loads. Embed routes already allow framing from your site.

Example embed code

Sample JSX only — not your live wall. After Publish, copy the real iframe (or src) from Get Embed and use that instead of the sample.

<iframe
  src="https://embed.your-domain.com/your-wall-id"
  width="100%"
  height={720}
  style={{ border: 0 }}
  title="Wall of Love"
/>

This is sample markup only. Copy your real iframe from Get Embed after you publish.

FAQ