How to Add Testimonials to Your Webflow Site (3 Methods)

Webflow is a powerful platform for building beautiful, responsive websites without writing code. But when it comes to displaying testimonials — especially video testimonials — Webflow's native tools have limitations that many users struggle with.

The good news is that there are multiple effective ways to add testimonials to your Webflow site, each with different strengths depending on your needs. This guide walks through three proven methods, from Webflow's built-in CMS to embed codes to third-party widget integrations, with step-by-step instructions for each.

Method 1: Webflow's Native CMS Collection

Webflow's CMS lets you create a collection of testimonials and display them dynamically throughout your site. This is the most "Webflow-native" approach and gives you full design control.

Setting Up the CMS Collection

Step 1: Create a new CMS Collection

In your Webflow dashboard, navigate to the CMS panel (the database icon on the left sidebar) and click "Create New Collection." Name it "Testimonials" or "Customer Reviews."

Step 2: Define your fields

Add the following fields to your collection:

Step 3: Add your testimonial data

Enter your testimonials into the collection. For each entry, fill in all the fields. Upload high-quality photos — they make a massive difference in credibility.

Designing the Display

Step 4: Create a Collection List

On the page where you want testimonials to appear, add a Collection List element and connect it to your Testimonials collection.

Step 5: Design the testimonial card

Within the Collection List, design your testimonial card layout. A strong layout typically includes:

• Customer photo (set as a circular image, 48-64px)
• Testimonial text (limit with text truncation if needed)
• Customer name and title in a flex row below the text
• Star rating displayed as icons
• Optional: company logo in the corner

Step 6: Style responsively

Configure your grid layout:

• Desktop: 2-3 columns
• Tablet: 2 columns
• Mobile: 1 column with full-width cards

Set appropriate spacing, font sizes, and padding for each breakpoint.

Filtering and Sorting

Use Webflow's Collection List settings to:

• Filter by "Featured" toggle to show only your best testimonials in hero sections
• Filter by Category for industry-specific landing pages
• Sort by date to keep fresh testimonials at the top
• Limit the count to show only 3-6 on a homepage section with a "See all" link to a full testimonials page

Pros of the CMS Approach

• Full design control — every pixel is customizable
• No external dependencies
• Fast loading (no third-party scripts)
• SEO-friendly (content is in the page HTML)
• Works with Webflow's interactions and animations

Cons of the CMS Approach

• Manual data entry for each testimonial
• No built-in collection form (customers cannot submit directly)
• Limited dynamic features (no live filtering without custom code)
• Video testimonials require additional setup
• Maintaining and updating requires Webflow CMS access

Method 2: Embed Code Integration

The embedding approach uses custom HTML/JavaScript to add testimonials from external sources. This is the most flexible method and the best choice if you are using a dedicated testimonial management platform.

Step-by-Step Implementation

Step 1: Get your embed code

From your testimonial platform, generate an embed code. This is typically a snippet of HTML and JavaScript that renders a testimonial widget on your page. Most testimonial tools provide a single-line embed code that looks something like:

<script src="https://your-testimonial-platform.com/widget.js"
  data-widget-id="your-widget-id">
</script>

Or a combination of a container div and a script tag.

Step 2: Add an Embed element in Webflow

In the Webflow Designer, navigate to the page and section where you want testimonials to appear. From the Elements panel, drag an "Embed" element (under Components) into position.

Step 3: Paste your code

Double-click the Embed element to open the code editor. Paste your embed code and click "Save & Close."

Step 4: Preview and adjust

Use Webflow's preview mode to see how the embed renders. Note that some embeds may not render in the Webflow Designer and will only appear on the published site or in preview mode.

Step 5: Handle responsive behavior

If the embedded widget does not automatically adapt to different screen sizes, wrap the Embed element in a div and set appropriate max-width values for each breakpoint. Common responsive settings:

• Desktop: max-width: 1200px; margin: 0 auto;
• Tablet: max-width: 100%; padding: 0 16px;
• Mobile: max-width: 100%; padding: 0 12px;

Embedding Video Testimonials

For video testimonials specifically, the embed approach shines. Most video testimonial platforms provide embed codes that include:

• Optimized video player
• Custom thumbnails
• Responsive sizing
• Lazy loading for performance
• Play tracking and analytics

If you are self-hosting videos, you can embed them using an iframe pointing to YouTube, Vimeo, or your video hosting service. However, a dedicated testimonial platform will give you better design integration and analytics.

Pros of the Embed Approach

• Easy to implement (copy-paste)
• Automatically syncs with your testimonial platform
• Often includes advanced features (filtering, carousel, animations)
• No manual data entry — manage testimonials in one place
• Video testimonials work out of the box

Cons of the Embed Approach

• Depends on a third-party service
• Limited design customization (you are constrained by the widget's styling)
• Potential performance impact (external scripts and resources)
• May not match your Webflow design perfectly without CSS overrides

Customizing Embed Appearance

Most embed widgets can be styled to match your Webflow design. Common customization options:

• CSS overrides: Add a Style element with custom CSS targeting the widget's classes. Be aware that widget providers may change class names in updates.
• Widget configuration: Many platforms offer styling options within their dashboard (colors, fonts, layout) before generating the embed code.
• Container styling: Use Webflow's native styling on the wrapper div around the embed to control spacing, background, and alignment.

Method 3: Third-Party Webflow Apps and Integrations

Webflow's Apps Marketplace includes integrations specifically designed for testimonials and social proof. These sit between the full control of CMS and the simplicity of embeds.

How App Integrations Work

Webflow Apps connect to your Webflow site through the Webflow API. Some add custom elements to your Designer, others generate embed codes, and some modify your site's code directly during the build process.

Step 1: Browse the Webflow Apps Marketplace

In your Webflow project settings, navigate to the Apps section. Search for "testimonials," "reviews," or "social proof."

Step 2: Install and configure

Follow the app's setup instructions. This typically involves:

• Authorizing the app to access your Webflow project
• Configuring collection settings
• Connecting any external review sources (Google, G2, Trustpilot)
• Setting display preferences

Step 3: Place the element

Depending on the app, you will either:

• Use a new custom element in the Webflow Designer
• Add an embed code generated by the app
• Use a CMS collection that the app automatically populates

Popular Integration Features

Good Webflow testimonial integrations typically offer:

• Multi-source aggregation: Pull reviews from Google, G2, Trustpilot, and custom collections into one display
• Automated collection: Import new reviews automatically
• Pre-built templates: Carousel, grid, wall, and list layouts
• Rating summaries: Aggregate star ratings from all sources
• Rich snippets: Structured data for SEO

Pros of the App Approach

• Balance of control and convenience
• Often includes collection and management features
• May aggregate reviews from multiple platforms
• Regular updates and support from the app developer

Cons of the App Approach

• Monthly cost on top of your Webflow plan
• Potential compatibility issues with Webflow updates
• Limited compared to fully custom CMS designs
• Adds dependency on another vendor

Choosing the Right Method

Here is a decision framework:

Choose CMS if:

• You have fewer than 50 testimonials
• Full design control is a priority
• You want the fastest possible page loads
• You are comfortable with manual data management
• You do not need video testimonials or have a simple video setup

Choose Embed Code if:

• You already use a testimonial management platform
• You need video testimonials with a professional player
• You want automated collection and management
• You have testimonials across multiple properties (not just Webflow)
• Quick setup is more important than pixel-perfect design control

Choose App Integration if:

• You want to aggregate reviews from multiple external platforms
• You need automated importing of new reviews
• You want pre-built, tested display templates
• You value ongoing support and updates

Performance Considerations

Regardless of which method you choose, performance matters. Slow-loading testimonials can hurt your Core Web Vitals scores and user experience.

For CMS Collections

• Optimize all customer photos before uploading (compress to under 50KB each)
• Use Webflow's lazy loading for images
• Limit the number of testimonials loaded initially (use "Load More" for larger collections)

For Embed Codes

• Place embed scripts at the bottom of the page or use defer loading
• Check that the external script is served from a CDN
• Monitor the widget's impact on page load using PageSpeed Insights

For App Integrations

• Review the app's performance impact in Webflow's site audit tools
• Disable any features you are not using
• Test page speed with and without the integration to measure impact

Displaying Testimonials Effectively Across Your Webflow Site

Regardless of which technical method you choose, where and how you display testimonials matters enormously. Consider placing them strategically throughout your site rather than only on a single page.

For a comprehensive look at placement strategy, see our guide on where to display testimonials across different page types. And if you want to create a dedicated testimonial showcase page, our wall of love design guide covers layout, filtering, and conversion optimization in detail.

Key Placement Recommendations for Webflow Sites

• Homepage: A carousel or featured row of 3-4 testimonials near the middle of the page, after your value proposition and before the CTA
• Pricing page: Testimonials that specifically mention value, ROI, or comparison to alternatives
• About page: Testimonials that speak to your team, culture, or customer service
• Service/product pages: Testimonials relevant to that specific offering
• Blog sidebar: A rotating testimonial widget that provides persistent social proof
• Footer: A compact testimonial strip that appears on every page

SEO Considerations

Testimonials can boost your SEO when implemented correctly:

• CMS content is indexable by default in Webflow, making it the most SEO-friendly option
• Embed content may or may not be indexable depending on how the widget renders (client-side JavaScript rendering is less SEO-friendly)
• Structured data: Add Review and AggregateRating schema markup to help search engines understand and potentially display your ratings in search results
• Rich snippets: Properly structured review data can appear as star ratings in Google search results, significantly increasing click-through rates

To add structured data in Webflow, use the Custom Code section in your project settings or add it via an Embed element on specific pages.

Final Thoughts

Adding testimonials to your Webflow site does not have to be complicated. Start with the method that matches your current needs and technical comfort level. If you have a small collection and want full design control, use Webflow's CMS. If you need video testimonials or automated management, use an embed code from a dedicated platform. If you want to aggregate reviews from multiple sources, explore Webflow's app marketplace.

The most important thing is to actually display your testimonials prominently and strategically. A beautifully designed Webflow site without social proof is leaving conversions on the table. Get your testimonials on the page, position them where they will have the most impact, and then iterate on the design based on how visitors engage with them.