3 ways to add testimonials to a Framer site in 2026

Framer is the go-to site builder for indie makers, SaaS founders, and design-first teams who want a polished landing page without writing HTML.

It handles animations, responsive layouts, and component logic in a way that feels designed for product launches rather than blog sites. What it doesn’t have is a native testimonial component.

There’s no drag-and-drop quote card, no social proof block, no built-in way to pull in Google reviews or video testimonials.

Adding testimonials to a Framer site means picking the right approach for what you have and how often it changes.

This guide covers three real methods, the Framer-specific gotchas around iframes and publishing, and where to place testimonials so they convert.

Also check: 42 testimonial statistics that prove social proof drives conversions in 2026

What you need before you start

Before adding testimonials to your Framer site, gather these:

• Editor or Owner access to the Framer project
• The testimonials themselves, whether existing on Google Business Profile, Facebook, G2, Trustpilot, or collected directly from customers
• The pages you want testimonials on (homepage hero, pricing page, /testimonials, signup page)
• The right Framer plan: any plan works for Method 1 (manual build) and Method 3 (embed). Method 2 (CMS) requires a paid Framer plan with CMS support.
• 10-15 minutes for setup, plus 5 minutes per additional page

Know what you want before you pick. A founder portfolio with 4 hand-picked quotes needs Method 1. A SaaS landing page with testimonials arriving weekly from Google and G2 needs Method 3.

The 3 ways to add testimonials to Framer

There are three real paths. The right one depends on whether you want full design control inside Framer’s canvas, dynamic data via Framer CMS, or a widget that imports from Google, G2, Facebook, and Trustpilot automatically.

Method 1 keeps everything inside the Framer canvas. Method 2 uses Framer CMS to manage testimonials as data. Method 3 outsources collection and display to a widget tool that auto-imports reviews from Google, G2, and Facebook.

Skip the iframe headaches with one clean embed

WiserReview's Framer-friendly snippet auto-resizes inside the Embed layer so testimonials never get cut off. No code component, no IframeResizer setup. Free plan with 100 imports/month.

Start Free →

Method 1: Build testimonial cards manually in the Framer canvas

Framer’s canvas gives you full layout control. You can build a testimonial section from scratch using Frames, Stack layouts, Text layers, and Image components. No code, no apps, just the design tools you already use.

Best for: Static testimonials that won’t change weekly. Founder portfolios. SaaS landing pages with 4-6 hand-picked quotes. Sites where every pixel of the design matters and you don’t want an iframe.

Step-by-step:

1. Open your project in the Framer editor.
2. Open the page where testimonials should appear.
3. Press R (or click the Insert button) to add a Frame for the testimonial section.
4. Inside the section Frame, add a Stack layout (horizontal for a 2-3 column grid, vertical for a single column).
5. Add a child Frame for the first testimonial card.
6. Inside the card, add a Text element for the quote (press T).
7. Add a second, smaller Text element for the customer name and role.
8. Optionally add an Image element for the customer photo.
9. Style the card: padding, border-radius, background, shadow, typography.
10. Right-click the card and select Create Component. Name it “TestimonialCard.”
11. Drag the component 3-5 more times for additional testimonials. Override the text on each instance.
12. Set responsive variants for tablet and mobile breakpoints in the right panel.
13. Publish.

What you give up:

• Manual updates. Every new testimonial means opening the editor and editing the component.
• No syncing from Google, Facebook, or G2. Each quote is entered by hand.
• No schema markup for SERP star ratings without custom code in Site Settings.
• No native video player. You’d embed a YouTube or Vimeo iframe inside each card.
• Reusing testimonials across pages means dragging the component to each page individually.

Method 1 fits when the testimonials are curated, and the design needs full control. The component pattern keeps updates manageable.

Method 2: Use Framer CMS for a dynamic testimonial feed

Framer CMS lets you store testimonials as structured data and display them through a Collection List on any page. You build the card once, every testimonial in the Collection renders automatically, and adding a new one updates every page that displays the Collection.

Best for: Sites with 5-30 testimonials. Teams where non-designers need to add testimonials without touching the design. Pages where you want filtered displays (pricing page = enterprise quotes, homepage = featured only).

Step-by-step:

1. In Framer, open the CMS tab in the left sidebar.
2. Click New Collection and name it “Testimonials.”
3. Hover over the new Collection, click the three dots, and select Edit Fields.
4. Add fields: Name (Plain Text), Role (Plain Text), Quote (Formatted Text), Photo (Image), Featured (Toggle), Rating (Number).
5. Save fields, then click Add Item and fill in 3-5 testimonials to start.
6. Open the page where testimonials should appear.
7. From the Insert menu, drag a CMS > Collection List onto the canvas.
8. In the right panel, set the data source to Testimonials.
9. Build the card design inside the Collection Item Frame: Quote text, Name + Role, Photo, Star Rating.
10. Bind each layer to its CMS field via the right panel.
11. Add filter rules (Featured Toggle is true for the homepage, Rating >= 4 for product pages).
12. Set sort order (date descending or by Featured field).
13. Test responsive breakpoints.
14. Publish.

What you give up:

• Requires a paid Framer plan with CMS support.
• No syncing from Google, Facebook, or G2. Testimonials still entered manually into the Collection.
• Schema markup needs custom JSON-LD in Site Settings.
• No native video field type. Use a File field with .mp4 extension enabled, or a Link field pointing to YouTube or Vimeo, and parse it into a video player inside the card.

Method 2 fits when testimonials change often and a non-designer needs to manage them. The dynamic system pays back setup time within weeks.

Method 3: Embed testimonials with WiserReview

WiserReview handles testimonial collection, moderation, and display. You connect Google Business Profile, Facebook, Trustpilot, or G2, then paste an embed snippet into Framer’s Embed layer.

Best for: SaaS sites with testimonials scattered across Google, G2, Trustpilot, and Facebook. Brands that want video testimonials with native players. Any Framer site that needs schema markup for star ratings in Google search results without writing custom code.

Sign up for a WiserReview account. The free plan covers 100 testimonial imports per month.

Import your existing testimonials. If you don’t have testimonials yet, start collecting them via WiserReview’s email, SMS, WhatsApp, and QR code automations. Video testimonials work the same way.

Go to the Widgets section and pick a layout that fits the page: carousel for narrow sections, Wall of Love for full-width hero blocks, single hero quote for above-the-fold, video carousel for product demos.

For this example we chose the carousel video. Customize colors and fonts to match your Framer brand, then click Install.

You’ll see JavaScript, iframe, and URL options for embedding the widget on your site.

Here’s how the Wall of Love looks on the MyMunche site:

And a testimonial auto slider example from Driveriteny:

How to paste the widget into Framer:

1. Copy the JavaScript embed code from WiserReview.
2. Open your Framer project and go to the page where testimonials should appear.
3. From the Insert menu, drag the Embed layer onto the canvas where the widget should appear.
4. With the Embed layer selected, open the right-hand properties panel.
5. Paste the WiserReview snippet into the HTML field.
6. Size the Embed frame: width 100% of the container, height 400-600px to start. The widget will resize itself.
7. Publish to your staging URL (.framer.website) or custom domain.

For a sitewide widget (the same testimonial slider in the footer across every page), use Site Settings > Custom Code > End of <body> to inject the script globally, then reference the rendered element on individual pages.

What you get with this method:

• Video testimonials with native players
• Schema markup so star ratings appear in Google search results
• AI-moderated testimonials to filter spam automatically
• Multi-source imports (Google, Facebook, G2, Capterra, Trustpilot, Amazon)
• Email, SMS, WhatsApp, and QR code testimonial request automation
• Tag filtering so each page shows relevant testimonials (pricing page = enterprise quotes, product page = product-specific quotes)
• One widget config syncs across every Framer page automatically

Based on four years of working with over 1,100 brands, this is the method most SaaS sites end up on once testimonials arrive from multiple sources.

Framer Embed layer vs Site Settings

Framer doesn’t have an HTML-block-anywhere pattern like WordPress. There are two main injection points for testimonials.

Embed layer: The drag-and-drop way to paste HTML on a specific spot of a page. Renders the pasted code inside an iframe. Easiest for testing and works for most widgets. Best first choice for placing a widget on one page or a few specific pages.

Site Settings > Custom Code: Global script injection at the start or end of <head> or <body>. Use for tracking pixels, sitewide CSS overrides, and shared widget configs. Not the place to render widget HTML directly.

The iframe-in-iframe gotcha (and how to fix it)

Most Framer testimonial issues come from this: Framer’s Embed layer renders pasted HTML inside an iframe. WiserReview’s widget script also renders its content inside an iframe. The result is an iframe inside an iframe.

What goes wrong: the outer iframe doesn’t know the inner widget’s height, so it shows a fixed-height window that cuts off testimonials or shows blank space below them.

Two fixes:

1. Use WiserReview’s URL embed option instead of the JavaScript snippet. Paste the widget URL directly into the Embed layer with width set to 100% and a minimum height (e.g. 600px). Framer handles the iframe wrapping cleanly, and the widget auto-sizes.
2. Set a fixed height on the Embed layer (e.g., 800px) that comfortably fits your widget’s typical rendered height. Works for simple widgets but means you’ll need to adjust if you add more testimonials later.

Option 1 is the fastest fix for most Framer sites.

Where to place testimonials on a Framer site

Placement matters more than which method you pick. Testimonials in the wrong spot don’t convert.

• Hero section, just below the headline: One standout testimonial directly below the H1 and primary CTA. Establishes credibility within the first 3 seconds.
• After the feature or benefits block: 2-3 testimonials that validate the specific claims you just made. Each one ties to a feature.
• Pricing page beside each tier: Filtered testimonials specific to that plan. Enterprise quotes next to Enterprise tier, startup quotes next to Pro tier.
• Signup or demo request page: 2-3 testimonials directly above the form. Reduces form abandonment.
• Dedicated /testimonials page: Full library on one URL. Ranks for branded queries (“yourbrand reviews”) and gives you one link for social bios and email signatures.
• Footer: A single rotating quote or logo strip across every page. Works as ambient social proof without taking up vertical space.

For deeper guidance, see our complete guide to adding testimonials to any website.

Get SERP star ratings without writing JSON-LD in Site Settings

WiserReview's widget outputs Review and AggregateRating schema automatically. Yellow stars in Google search appear without touching Framer's Custom Code panel. Free plan with 100 imports/month.

Start Free →

Common mistakes to avoid

• Generic praise on a design-forward site: Framer sites attract design-conscious visitors. A vague “great product” quote looks low effort against the rest of the page. Lead with specific outcomes (“shipped our SaaS in 9 days”) tied to concrete claims.
• Ignoring the iframe-in-iframe issue: The most common Framer testimonial bug. Use WiserReview’s URL embed option or set an explicit minimum height on the Embed layer.
• Skipping responsive breakpoints: Framer makes desktop layouts easy. Mobile is where most landing page traffic lives. Test the testimonial section on mobile and tablet breakpoints before publishing.
• Building cards without Components: Manual cards as standalone Frames look fine until you need to update typography across 6 testimonials. Always wrap cards in a Component so style changes propagate.
• Forgetting schema markup: Star ratings in Google search results require JSON-LD schema. Method 3 outputs it automatically; Methods 1 and 2 need custom JSON-LD in Site Settings > Custom Code. Without schema, the yellow stars in SERP snippets won’t appear.

Final thoughts

Framer’s design-first approach changes the testimonial workflow. There’s no plug-and-play testimonial block, so you pick from manual canvas cards (Method 1), Framer CMS (Method 2), or an embed widget (Method 3) based on how often testimonials change and where they come from.

Method 1 fits founder-curated quotes on a single landing page. Method 2 fits teams managing 5-30 testimonials with editor-friendly updates. Method 3 fits SaaS sites with testimonials scattered across Google, G2, and Facebook, plus schema markup for organic search.

Whichever method you pick, mind the iframe-in-iframe gotcha, place testimonials near the decision points, and test mobile before going live.

For more widget options, see our complete review widget guide for 2026