Skip to main content

How to embed your Wall of Love in a React

Add a Testimonial Wall of Love to any React application using the iframe-resizer-react package.

Written by Damon Chen

Instructions

Step 1: Install the package

bash

npm install iframe-resizer-react

Step 2: Get your embed URL from Testimonial

Open your Space and click Embed widgets in the sidebar.

  1. Select the Wall of Love tab if it is not already active.

  2. If you already have a Wall of Love embed, click the clipboard icon on its card (Copy embed code). Skip to step 6.

    • To create a new embed, click Create Wall of Love.

  3. Choose a layout: Masonry - animated, Masonry - fixed, or Carousel slider. Customize theme, colors, and other settings, then click Save & Continue.

  4. On the Your Wall of Love is Ready! screen, review the preview, and click Copy code.

  5. In the code snippet, find the src URL inside the <iframe> tag—copy only that URL.

<iframe id='testimonialto-4b61c4e7-1afb-4681-85c1-2a15a93015a0' src="https://embed-v2.testimonial.to/w/testimonial-collection?id=4b61c4e7-1afb-4681-85c1-2a15a93015a0" frameborder="0" scrolling="no" width="100%" ></iframe>

Step 3: Add the component to your app

jsx

import IframeResizer from 'iframe-resizer-react'  export default function WallOfLove() {   return (     <IframeResizer       log={false}       src="YOUR_EMBED_URL_HERE"       style={{ width: '1px', minWidth: '100%', border: 'none' }}     />   ) }

Replace YOUR_EMBED_URL_HERE with the src URL you copied from Testimonial.

Normally, you would set the width to 100% and have the height scale to fit the content. You only need to pass the Wall of Love URL to the src

​Need help? Use the live chat at testimonial.to or email [email protected].

Next steps:

Did this answer your question?