We are going to use iframe-resizer-react library. You can install it via npm command:

npm install --save iframe-resizer-react

After the library is installed, you can import the IframeResizer component:

import IframeResizer from 'iframe-resizer-react'

And you just need to write the component like below:

<IframeResizer src="https://embed.testimonial.to/w/testimonial" style={{ width: "1px", minWidth: "100%" }} />

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

You will find the Wall of Love URL in the embed code

notion image

In the embed code part, the second line is an <iframe>, something like this:

<iframe id="testimonialto-testimonial" src="https://embed.testimonial.to/w/testimonial?theme=light&card=base" frameborder="0" scrolling="no" width="100%"></iframe>

Only copy the string in the src parameter, in the sample case, you just need to copy

https://embed.testimonial.to/w/testimonial?theme=light&card=base

Then paste the URL in the IframeResizer component src prop.

That's it! 🥳

Did this answer your question?