> ## Documentation Index
>
> Fetch the complete documentation index at: https://testimonial.to/guide/llms.txt
> Use this file to discover all available pages before exploring further.

# How to embed your Wall of Love in Framer

> Embed a Wall of Love in Framer with a custom code component.

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](https://versatile-questions-815896.framer.app/).

---

## Create the WallOfLove component

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

[Watch on Loom](https://www.loom.com/share/2d43203bb2864ce483d35140c8036911)

1.  Save the component. It appears in your **Assets** panel under **Components**.
    
    ![](https://apuqtiwclzoqhluvxsdm.supabase.co/storage/v1/object/public/help-center/80/80ec38f95d9c57a2e4429050a11da5b7.png)
    

---

## Get your embed URL

Open the 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**) and skip to step 6. To create a new embed, click **Create Wall of Love**.
    
    ![](https://apuqtiwclzoqhluvxsdm.supabase.co/storage/v1/object/public/help-center/60/60ed2b050dfa1864176850703adf6bb3.png)
    
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 snippet, find the `src` URL inside the `<iframe>` tag. It looks like:
    
    ```
    https://embed-v2.testimonial.to/w/your-space-name?theme=light&card=base
    ```
    
6.  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

1.  Open the Framer page where you want the 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.  Set the width to 100% if needed.
    
    ![](https://apuqtiwclzoqhluvxsdm.supabase.co/storage/v1/object/public/help-center/68/682e84318ac8b5fcf1ca3bc5427659c0.png)
    
5.  Click **Publish** → **Update**.
    
    ![](https://apuqtiwclzoqhluvxsdm.supabase.co/storage/v1/object/public/help-center/12/12d5ea97065b40659253d85fe28d7882.png)
    

The Wall of Love appears on your live Framer site.

---

Related: [Customize your Wall of Love](https://help.testimonial.to/en/articles/6223089-customize-wall-of-love) · [Embed a Wall of Love](https://help.testimonial.to/en/articles/6223121-embed-a-wall-of-love)

Need help? Message us in the chat widget.