Skip to main content

How to embed your Wall of Love in Framer

Add a Testimonial Wall of Love to any Framer site using a custom code component.

Written by Damon Chen

Live demo →

Note: Framer requires a custom code component to embed iframes correctly. This takes about 5 minutes to set up and only needs to be done once.

Instruction

Step 1: Create the WallOfLove component in Framer

  1. 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.

  2. Replace all the default code with the following:

jsx

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" }} /> )}

3. Save the component. It will appear in your Assets panel under Components.


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 provided, find the src URL inside the <iframe> tag — it looks like this:

    • https://embed-v2.testimonial.to/w/your-space-name?theme=light&card=base

  6. Copy that URL only — not the full code block.

    1. Sample code

      1. <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>

Step 3: Add the component to your page

  1. Go to the Framer page where you want to display your Wall of Love.

  2. In the Assets panel, find the WallOfLove component and drag it onto the page.

  3. In the component settings on the right, paste your copied embed URL into the src field.

  4. Adjust the width to 100% if needed.

  5. Click Publish → Update.

Your Wall of Love will now appear on your live Framer site.

Need help? Use the live chat at testimonial.to.

Next steps:

Did this answer your question?