How to Add Testimonials to Framer

Framer is the go-to site builder for indie makers and SaaS founders who want a polished, design-forward landing page without writing HTML from scratch. It handles animations, responsive layouts, and component logic in a way that feels designed for product launches rather than blog sites.

What it does not have is a native testimonial component. There is no drag-and-drop quote card, no social proof block, no built-in way to pull in X replies or customer reviews. Adding testimonials to a Framer site means choosing your own approach — and the right one depends on what kind of testimonials you have and how often you need to update them. For a platform-agnostic overview, the complete guide to adding testimonials to your website covers the strategic layer before you get into the platform mechanics.

This guide covers three methods: building testimonial cards manually in the Framer canvas, using Framer CMS for a dynamic testimonial feed, and embedding an external carousel via the HTML component. Each method has a specific scenario where it is the right call.

Method 1 — Build Testimonial Cards Manually on the Canvas

Framer's canvas gives you full layout control. You can build a testimonial section from scratch using stacks, text layers, and image components — no code required.

How to build a basic testimonial card

1. Press R (or click the Insert button) to add a Frame
2. Inside it, add a Text element for the quote (T shortcut)
3. Add a second smaller Text element for the name and title
4. Optionally add an Image element for the person's photo
5. Set the Frame to use a vertical Stack layout (in the Layout panel on the right)
6. Add spacing, padding, and a background color or border radius to style the card
7. Group the card (⌘G) and duplicate it for additional testimonials
8. Place the duplicated cards inside a horizontal Stack to create a row layout

Creating a scroll carousel

Framer does not have a built-in carousel component for testimonials, but you can simulate one:

1. Create a horizontal Stack with all your testimonial cards inside
2. Set the Stack's overflow to Clip in the layout settings
3. Add a Scroll component wrapping the Stack (Insert → Scroll)
4. Set Scroll direction to Horizontal
5. Publish and the section becomes a swipeable row on mobile and desktop

For auto-play animation, you need Framer's motion capabilities. Right-click the stack, add an Animation trigger, and set it to scroll or loop. This works but requires some experimentation with the motion settings.

When this works

Building manually on the canvas is the right call when:

• You have 3 to 6 testimonials that change infrequently
• The quotes come from direct customer messages, email, or Slack (not social media)
• You want complete control over typography, spacing, and visual design
• Your Framer site is a personal portfolio or a single-product landing page

When this breaks down

Everything is static. To add a new testimonial or change an existing one, you open Framer, make the edit in the canvas, and republish. For a simple 5-quote section, this is manageable. For a founder who wants to add fresh social proof after every launch, it is a time sink.

You lose social proof context. If you copy a tweet into a static text card, visitors have no way to verify it. There is no link to the original post, no real username or profile photo, no timestamp. Static testimonials are claims. Public social media posts are proof. For a direct comparison, video vs text testimonials explores another dimension of this credibility question.

No automation. If you run a campaign and get 40 replies on X praising your product, you would need to manually paste each one into Framer. That is not a workflow — it is a chore.

Method 2 — Use Framer CMS for Dynamic Testimonials

Framer has a built-in CMS that lets you define content collections and bind them to components on the canvas. This is the right approach if you want to manage testimonials as content rather than design elements.

Setting up a Testimonials collection

1. In Framer, go to CMS in the left sidebar
2. Click New Collection and name it "Testimonials"
3. Add the following fields:
   • Quote (Text)
   • Name (Text)
   • Title (Text — for role/company)
   • Photo (Image)
   • Featured (Toggle — to control which ones show on specific pages)
4. Add your testimonials as CMS items

Binding to the canvas

1. Add a CMS Collection component to your canvas (Insert → CMS)
2. Connect it to your Testimonials collection
3. Inside the CMS item template, design one testimonial card
4. Bind each field to the corresponding CMS field (click the text element → connect to CMS field)
5. Set a grid or horizontal layout for the collection
6. Filter by the Featured toggle if needed

When this works

Framer CMS is the right approach when:

• You want to update testimonials without opening the canvas designer
• You have a marketing collaborator who can manage CMS content without design access
• You want different testimonial sets on different pages (using CMS filters)
• You are building a testimonials page or archive with many entries

When this breaks down

CMS items are still manually entered. Framer CMS does not connect to X, LinkedIn, or any social platform. You type in the quote, the name, and upload a photo. If the original testimonial was a tweet, you are transcribing it — and losing the verification link that makes social proof credible. If you are still building up your testimonial library, how to ask for a testimonial covers the collection side of the problem.

Photo sourcing is manual. You need to download each person's profile photo, upload it to Framer CMS, and keep it updated. If they change their profile picture, your CMS is stale.

Still no carousel with CMS. Framer's CMS Collection renders as a grid by default. Making it scroll horizontally as a carousel requires the same Scroll component workaround from Method 1.

Method 3 — Embed a Live Testimonial Carousel via the HTML Component

Framer has an HTML component (sometimes labeled "Embed") that accepts raw HTML including iframe tags. This lets you embed a self-contained testimonial carousel from an external service — fully styled, responsive, and live.

How it works with LaunchWall

LaunchWall generates an iframe embed from real X reply threads. You paste a post URL, select the replies you want to display, and get a single <iframe> tag to paste anywhere that accepts HTML.

The carousel handles its own styling, scroll behavior, and responsiveness. You do not manage anything in Framer. When you want to update which testimonials appear, you change them in LaunchWall — no Framer republish needed.

Step-by-step: adding the embed to Framer

1. In LaunchWall: Paste the URL of your X post, fetch replies, select the ones you want, and copy the iframe embed code
2. In Framer: Press I (Insert) and search for HTML — select the HTML component
3. Paste your iframe code into the HTML field
4. Resize the HTML component to your desired width (typically 100% of the section width)
5. Set the height to match the carousel height (LaunchWall carousels are fixed height by default)
6. Preview in the published view to see the rendered carousel

What the embed looks like

Each card in the carousel shows:

• The actual X profile photo (pulled live from the original post)
• The real username and display name
• The tweet text
• A link back to the original post on X

Visitors who want to verify a testimonial can click through directly. This is categorically different from a static quote in a designed card.

Making it responsive in Framer

1. Place the HTML component inside a Frame set to Fill width
2. In the HTML component's size settings, set width to Fill container
3. The embed will expand and contract with the parent container across breakpoints
4. On Framer's mobile breakpoint, the carousel becomes single-column and scrollable

When this works

The HTML embed is the best approach when:

• Your best testimonials are public X replies from a launch post, announcement, or campaign
• You want to get something live quickly — LaunchWall to Framer takes about 20 minutes total
• You want testimonials to link back to the original post (verifiable)
• You plan to update which testimonials are shown over time without reopening Framer
• You want a carousel that handles mobile scroll automatically

When this is not the right fit

If your testimonials are from private conversations — DMs, emails, support tickets — that were never posted publicly, you cannot use LaunchWall. The tool only works with public X posts and their replies. For private testimonials, Method 1 or Method 2 is the right choice.

The HTML Component vs. Code Components in Framer

Framer has two ways to add custom code: the HTML component (insert HTML directly) and Code components (write React JSX files).

For an iframe embed, the HTML component is the right choice. It does not require any React knowledge, it accepts a plain <iframe> tag, and it renders exactly as expected on the published site.

Code components are for more complex needs — custom interactive components, third-party library integrations, or dynamic logic that needs state. An iframe embed does not need any of that.

Framer-Specific Tips

Preview vs. Published view

Framer's canvas preview does not render HTML components. You will see a gray placeholder where the carousel will be. To see the actual embedded testimonials, use Framer's Preview mode (the eye icon, or ⌘P) or view the published URL.

This is expected behavior — it is not a bug with your embed code.

Overflow clipping

If your HTML component appears clipped at the top or bottom, the parent Frame may have Clip Content enabled. Select the parent Frame, go to the Layout panel, and turn off Clip Content.

Layering and z-index

If you have Framer animations or overlapping elements near your testimonials section, the iframe may appear behind other layers. Select the HTML component and use the Layer panel to bring it forward, or adjust the z-index in the HTML component's style settings.

Page transitions

Framer's page transition animations sometimes briefly hide iframe embeds during the animation cycle. If testimonials appear blank after navigation, this is a Framer animation timing issue. Reducing the page transition duration or switching to a simpler transition type (fade vs. slide) typically resolves it.

Custom domains and HTTPS

Framer serves all published sites over HTTPS. LaunchWall embeds also serve over HTTPS. There are no mixed-content warnings or security blocks to deal with.

Which Method Should You Use?

You have a few static quotes from customers and want full design control: Build it manually on the canvas (Method 1). Fast to set up, zero dependencies, and you get complete styling control.

You want to update testimonials frequently without a developer: Use Framer CMS (Method 2). Non-technical team members can add and remove testimonials from the CMS panel without touching the canvas.

Your best social proof is public X replies and you want it live quickly: Use the HTML embed (Method 3). It is the fastest path from "I have good replies" to "they are on my Framer site," and it preserves the credibility of real social media posts.

You want both static quotes and X replies: Combine methods. Use Framer CMS for text testimonials collected via email or form, and an embedded carousel for the X reply thread from your last launch post. Many Framer landing pages use both — the static quotes near the hero, the X carousel near the pricing section.

The Conversion Case for Verified Testimonials

A text card on a Framer canvas that says "This product changed how we work — Jane, Head of Growth" is a claim. A real X reply with a profile photo, a username, a timestamp, and a clickable link to the original post is evidence.

The difference matters for conversion. Visitors do not read testimonials — they scan for signals that the testimonials are real. Profile photos help. Real usernames help. A link to the original post that opens X and shows the actual reply is the strongest signal of all. For inspiration on what a high-converting testimonial page looks like in practice, those examples illustrate how the best SaaS landing pages use this kind of verified social proof.

That is the practical reason to use the embed approach over the canvas approach: not just because it is faster, but because the social proof it produces is structurally more credible.

LaunchWall is built for the founder who launched on X, got genuine replies, and wants them on their Framer landing page today. The $1 trial takes 15 minutes to set up.

Start a 7-day trial for $1 →