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.
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.
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.
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.
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 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.
- 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.
If the widget still doesn't appear on your published site, see Widget not showing.
Next steps
Was this page helpful?