Embed a Wall of Love in Framer with a custom code component. Framer needs this once so iframes resize correctly. It takes about 5 minutes.
A live demo is available here.
Create the WallOfLove component
In the Framer editor, click the Framer logo in the top-left, then go to Component → Create From Code. Click + to create a new component and name it
WallOfLove.Replace the default code with:
import * as React from "react"
import IframeResizer from "iframe-resizer-react"
export default function WallOfLove({}) {
return (
<IframeResizer
log={false}
src="https://embed-v2.testimonial.to/w/testimonial"
style={{ width: "400px", minWidth: "100%", border: "none" }}
/>
)
}
Save the component. It appears in your Assets panel under Components.
Get your embed URL
Open the Space and click Embed widgets in the sidebar.
Select the Wall of Love tab if it is not already active.
If you already have a Wall of Love embed, click the clipboard icon on its card (Copy embed code) and skip to step 6. To create a new embed, click Create Wall of Love.
Choose a layout: Masonry - animated, Masonry - fixed, or Carousel slider. Customize theme, colors, and other settings, then click Save & Continue.
On the Your Wall of Love is Ready! screen, review the preview and click Copy code.
In the snippet, find the
srcURL inside the<iframe>tag. It looks like:https://embed-v2.testimonial.to/w/your-space-name?theme=light&card=base
Copy that URL only — not the full code block. Sample code:
<script type="text/javascript" src="https://testimonial.to/js/iframeResizer.min.js"></script>
<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>
<script type="text/javascript">iFrameResize({log: false, checkOrigin: false}, '#testimonialto-4b61c4e7-1afb-4681-85c1-2a15a93015a0');</script>
Add the component to your page
Open the Framer page where you want the Wall of Love.
In the Assets panel, find the
WallOfLovecomponent and drag it onto the page.In the component settings on the right, paste your copied embed URL into the src field.
Set the width to 100% if needed.
Click Publish → Update.
The Wall of Love appears on your live Framer site.
Related: Customize your Wall of Love · Embed a Wall of Love
Need help? Message us in the chat widget.