# Embed a widget on Framer

Add your widget to a Framer page with an Embed component, then publish your site to see your testimonials on the live page.

Framer shows a ReTestimonial widget through its **Embed** component, which takes HTML and scripts. You copy the widget's code once, paste it into the component's **HTML** tab and publish your site.

1. **Copy your widget's embed code**

   In the widget builder, click **Get code**. Click **Publish and copy code**, or **Copy code** if the widget is already published. If you haven't made a widget yet, start with [Embed a widget on any website](/help/display/embed-a-widget-on-any-website).

   ![The Embed code dialog for a published widget, showing the snippet to copy](https://assets.retestimonial.com/app-statics/help/shots/widgets-embed-code-copy.170de072.webp)

2. **Add an Embed component**

   Open your project in Framer and go to the page where the widget belongs. Open the **Insert** menu, search for **Embed** and drag the Embed component onto the canvas where you want the widget to appear.

3. **Paste the code into the HTML tab**

   Select the Embed and switch to its **HTML** tab. Paste the code there without changing it. Include all of it, down to the closing `</script>` tag.

4. **Publish and check it**

   Framer runs scripts only in the browser, not in the editor, so the widget doesn't appear on the canvas. Click **Publish** in the top-right corner of the Framer editor, then open your published site in a browser to check the widget. Your site shows the widget only once it's published in ReTestimonial too.

## Good to know

- **Set the width in Framer.** The widget takes the width of its Embed, so size the Embed on the canvas to control how wide the widget is.
- **Change the widget's design in ReTestimonial.** The widget draws itself in its own isolated area, so your Framer styles don't restyle it. Once the widget is published, the changes you make in the builder reach your Framer site with the same code. The exception is switching to a floating style: **Get code** then gives you new code to replace the old.
- **Add floating widgets as custom code.** **Floating Proof** widgets, the **Floating Proof Tab** badge and the Video type's **Floating CTA** style attach to the browser window, not to the spot where you paste the code. To show one on every page, add its code to your site's custom code instead of an Embed: in Framer, open **Project Settings**, select the **Custom Code** tab, click **Add Script** (or the **+** icon), paste the code, place it at the end of the `<body>` tag, and publish. Framer's guide [How to add custom code](https://www.framer.com/help/articles/how-to-add-custom-code/) explains its other options, such as running the code on some pages only.
- **Several widgets can share a page.** Give each one its own Embed component.
- **Keep Script selected.** If the **Get code** dialog offers **Script** and **Iframe / Embed URL**, keep **Script**, the default. It works in the Embed's **HTML** tab, and some styles only work with it. See [Script or iframe](/help/display/embed-a-widget-on-any-website#script-or-iframe).
- **A Wall of Love works the same way.** Click **Embed code…** on its card, choose **Framer**, click **Copy** and follow these steps. See [Embed a Wall of Love on your website](/help/display/embed-a-wall-of-love).

If the widget still doesn't appear on your published site, see [Widget not showing](/help/troubleshooting/widget-not-showing).

## Next steps

- [Embed a widget on any website](/help/display/embed-a-widget-on-any-website)
- [Embed a widget on Webflow](/help/display/embed-on-webflow)
- [Customize a widget](/help/display/customize-a-widget)