Framer installation
Put real customer testimonials on your Framer site
Framer’s Embed component takes raw HTML, which is all a StoryProof widget needs. Drag one onto the canvas, paste the code into its HTML tab and publish. Framer runs scripts only in the browser, so judge it on the live site.
“We put the review wall under our pricing table and prospects quote the reviews back to us on calls.”
Review from Google“StoryProof made collecting and showing real customer video reviews effortless for us.”
Review from Trustpilot“The widget looks native on our site. Nobody can tell it is embedded.”
Review from G2“Collecting video reviews used to be the hardest part. Now it takes one link.”
Review from Google“Set up in ten minutes, and support answered the one question I had straight away.”
Review from Product Hunt“We put the review wall under our pricing table and prospects quote the reviews back to us on calls.”
Review from Google“StoryProof made collecting and showing real customer video reviews effortless for us.”
Review from Trustpilot“The widget looks native on our site. Nobody can tell it is embedded.”
Review from G2“Collecting video reviews used to be the hardest part. Now it takes one link.”
Review from Google“Set up in ten minutes, and support answered the one question I had straight away.”
Review from Product Hunt“Set up in ten minutes, and support answered the one question I had straight away.”
Review from Product Hunt“Real faces and real voices sell far better than anything we could write ourselves.”
Review from Facebook“Shoppers send 30-second clips from their phones, and nothing goes live until I approve it.”
Review from Shopify“Setup took minutes and the reviews started coming in the same week.”
Review from Trustpilot“Our customers actually record. That never happened with our old review form.”
Review from G2“Set up in ten minutes, and support answered the one question I had straight away.”
Review from Product Hunt“Real faces and real voices sell far better than anything we could write ourselves.”
Review from Facebook“Shoppers send 30-second clips from their phones, and nothing goes live until I approve it.”
Review from Shopify“Setup took minutes and the reviews started coming in the same week.”
Review from Trustpilot“Our customers actually record. That never happened with our old review form.”
Review from G2
The problem, solved
Why Framer testimonial sections go stale, and how to keep one current
- Problem 1
Quotes typed into text layers
Every new review means opening the project, duplicating a card and republishing.
How StoryProof solves it
The widget pulls its testimonials from StoryProof on every page load, so approving a new one updates the Framer site with no republish.
- Problem 2
Template placeholders left in
Starter templates arrive with sample people. They are easy to forget, and visitors can tell.
How StoryProof solves it
Send your own customers one collection link for video, audio or text, then fill the embed with only the approved answers you pick.
- Problem 3
An embed that looks broken
The Embed component shows nothing in the editor, which leads many people to delete a perfectly good install.
How StoryProof solves it
The install is two lines of HTML in that Embed’s HTML tab. There is nothing else to configure, so an empty canvas just means it is time to open the published URL.
- Problem 4
Copies drift apart
The same quotes pasted on the homepage and a landing page get edited in one place and not the other.
How StoryProof solves it
Paste the same widget id on both pages. Each copy reads from one set of testimonials in StoryProof, so there is no second version to forget.
Code generator
HTML for the Framer Embed component
Type your widget id and copy the block. It goes into the HTML tab of one Embed component.
The HTML tab of an Embed component on the canvas
Insert menu › search “embed” › drag Embed onto the canvas › HTML tab
<div data-storyproof-widget="YOUR_WIDGET_ID"></div>
<script src="https://app.storyproof.io/embed.js" async></script>Publish, then open the published URL. Framer executes scripts in the browser only, never in the editor.
Assembled locally in your browser.
In StoryProof
Install it in Framer
Step 1 of 5
Pick a layout in StoryProof and copy the code
19 widget layouts, from walls and carousels to compact badges and avatar strips. Add the approved testimonials you want, then copy the embed code.
Step 2 of 5
Insert an Embed component
Open the Insert menu, search for embed, and drag the component into the stack or frame that should hold the testimonials.
Step 3 of 5
Paste into the HTML tab
Choose the HTML tab rather than URL, and paste both lines from the generator.
Step 4 of 5
Size it for each breakpoint
Set the width to fill its parent and give the component a generous fixed height on desktop, tablet and phone. Tall layouts such as walls need more room on the phone breakpoint, where columns stack.
Step 5 of 5
Publish and review
Publish to your framer.website address or your domain and scroll through it at each width.
Where it fits on a Framer site
Before you start
Limits worth knowing
Nothing renders on the canvas
Framer runs head and body scripts only in a browser. Preview on the published site, not in the editor.
Height is yours to set
If the component is shorter than the widget, the bottom is cut off. Give each breakpoint a height that fits the layout you chose.
No Framer plugin
There is no StoryProof plugin in Framer’s marketplace; the Embed component is the install.
Framer styles stop at the embed
Your Framer text and colour styles do not reach inside an Embed component. Check on the published site that the widget sits comfortably beside your own type.
FAQ
Questions people ask
Short answers to what usually comes up next.
Why is my Framer embed blank in the editor?
Framer does not run scripts in the editor. Publish and open the live site to see the widget.
Can I use the same widget on every page?
Yes. Copy the Embed component, or put it inside a component you reuse, and paste it on each page.
Does a Framer CMS collection page work?
An Embed placed in a CMS page template shows the same widget on every item. Each item would need its own widget id to show different testimonials.
Should I use an Embed component or site-wide custom code?
Use the Embed component. It puts the widget at a specific spot in your layout, while site-wide custom code adds to every page and gives you no say in where the testimonials appear.
What happens to the widget if I switch Framer templates?
The testimonials stay in StoryProof. Add an Embed component to the new layout, paste the same code and set its height again for each breakpoint.
Still have a question? Ask the StoryProof team or book a demo.
Swap template quotes for real ones
Collect testimonials from your customers and drop one embed into your Framer project.
Sources
- Embedding a Trustpilot widget in your site, Framer Help. Checked 2026-11-04.
- Custom Code, Framer Developers. Checked 2026-11-04.
Last updated 2026-11-04.