How to Add Reviews to Framer: The Canvas Is Not the Site

Almost every Framer question about embeds is really the same question, asked in frustration: why is the box empty? You insert an Embed component, paste the code, and the canvas shows a blank rectangle. So you check the code, paste it again, try a different component, and get the same blank rectangle. Nothing is wrong. The Framer canvas is a design surface and it does not execute embedded code. Hit preview and the widget is there. That one fact accounts for most of the time people lose on this, and once it is out of the way, adding reviews to Framer is about two minutes of work plus a breakpoint check.

Why the Widget Is Blank on the Canvas

Because the canvas is not the site. Framer's editing surface renders your layout, not arbitrary third-party code, so anything inside an Embed component sits there as an empty box with the component's outline around it.

The moment you preview, or publish, the embed is part of a real page and the widget renders normally. Webflow's Designer behaves the same way, and it catches Framer users harder because Framer's canvas is otherwise so faithful to the finished result that an empty box reads as a genuine failure.

The habit that saves the frustration: after pasting an embed, preview immediately rather than continuing to design around a blank box. You confirm it works in five seconds and then lay out around a known quantity.

Where the Embed Component Lives

In the insert menu, alongside the other components. Drop it onto the page where the reviews should appear, select it, and paste the widget markup into its HTML field in the properties panel.

Give it a size before you preview. An Embed component with no dimensions collapses, which looks identical to a broken embed and sends people back to checking the code again. Set a width and a height first, preview, then adjust.

The component takes raw HTML, which is why a one-line review widget goes in without a plugin, a package or a build step. There is no marketplace step here and nothing to keep updated when Framer ships a release.

Framer Keeps Your Layouts Separate

Framer's breakpoints, Desktop, Tablet and Phone by default, are genuinely separate layouts rather than one layout with responsive rules applied to it. Position and size are set per breakpoint, and that includes your embed.

So an embed that fits beautifully on desktop can be clipped, stretched or overlapping on phone, because you never sized it there. This is the second most common Framer embed problem after the blank canvas, and it usually surfaces after launch when somebody opens the site on their phone.

Check each breakpoint before publishing, and prefer a layout that tolerates the difference. A single-column list or a compact badge survives a narrow phone column; a three-column grid of review cards needs both a different size and often a different widget style there.

If the review section matters, design the phone layout first and let desktop follow. Most traffic to a small business site is phone traffic, and desktop is the easier of the two to make work afterwards.

When a Code Component Is the Better Route

When the reviews need to be more than a fixed block. Framer supports React code components, so if the widget must take props from the page, read a value from the Framer CMS, or coordinate with something else on screen, a code component is the honest answer.

For a self-contained review section it is not. A code component is code you now own: a file to keep working across Framer updates, and something the next person on the project has to understand. The Embed component does the same job with nothing to maintain.

The one genuinely good case is a CMS-driven site where each entry needs its own widget. If you are building a directory of locations in the Framer CMS and every location has its own review profile, a code component reading that profile from a CMS field beats hand-pasting an embed per entry.

How Do You Build the Widget?

Paste your Google, Trustpilot or Facebook profile URL, preview your real reviews and rating, then pick from over 100 layout styles across slider, marquee, grid, list, masonry and badge families. Colours and fonts adjust, which matters more on Framer than most platforms because Framer sites tend to be tightly designed and an off-palette embed stands out immediately.

The rating comes from the profile's own aggregate rather than from the cards on screen, so the number on the site matches the number a visitor finds if they check it.

The output is one line of HTML. It goes into the Embed component here, and the identical line works in a WordPress Custom HTML block, a Squarespace Code block, a Wix HTML iframe element, a Shopify theme section or a Webflow Embed element if the project ever moves. Free plan, unlimited widget views.

Where Should the Reviews Go on a Framer Page?

Framer sites are usually one long scroll with a single conversion point, so the reviews belong immediately before it. If the page ends in a booking link or a contact form, the section above that form is the most valuable space on the site and social proof earns it.

Resist putting the wall in the hero. Framer heroes are usually the most designed part of the page and an embed there fights the composition. A compact rating badge under the headline does the same job for a fraction of the visual weight.

And keep one review section per page. On a long-scroll site the temptation is to repeat proof between every block, which turns the strongest thing on the page into background texture.