How to Add Video Testimonials to Webflow & Wix (2025 Guide)

Video testimonials are powerful conversion tools for any website—especially on no-code platforms like Webflow and Wix. They build trust, showcase real customer experiences, and can significantly increase conversion rates without requiring technical expertise.

This guide will show you exactly how to add video testimonials to your Webflow or Wix website, with step-by-step instructions for both platforms. For WordPress integration, see our WordPress video testimonials guide, or check out our general guide on adding video testimonials to any website.

Why Video Testimonials Work on Webflow & Wix

Both Webflow and Wix are designed for beautiful, high-converting websites. Video testimonials enhance that experience:

Key Benefits:

• No Coding Required: Simple embed process for both platforms
• Professional Appearance: Matches your site's design automatically
• Mobile Optimized: Works perfectly on all devices
• Fast Loading: Asynchronous loading doesn't slow your site
• SEO Friendly: Structured data and video markup improve rankings
• Conversion Focused: Proven to increase trust and sales

Webflow Integration Guide

Webflow's flexible platform makes it easy to add video testimonials anywhere on your site.

Method 1: Using the Embed Element (Recommended)

This is the easiest and most flexible method for Webflow.

Step-by-Step Instructions:

1. Create Your Widget

First, log in to your VouchWall dashboard and create a new widget:

• Choose your widget type (Wall, Carousel, Single, Badge, or Floating)
• Select which testimonials to display
• Customize colors, fonts, and layout
• Generate your embed code

2. Add Embed Element in Webflow

In Webflow Designer:

• Open the page where you want testimonials
• Press A or click the + icon to add elements
• Search for "Embed" and drag it to your desired location
• Click the Embed element to open the settings

3. Paste Your Embed Code

Copy this code from your VouchWall dashboard:

<div data-vouchwall-wall="YOUR_WIDGET_ID"></div>
<script src="https://vouchwall.com/embed.js"></script>

Paste it into the Embed element's custom code field.

4. Style the Container

You can add a custom class to the Embed element to style the container:

<div class="testimonials-section">
  <div data-vouchwall-wall="YOUR_WIDGET_ID"></div>
  <script src="https://vouchwall.com/embed.js"></script>
</div>

<style>
.testimonials-section {
  padding: 60px 0;
  background: #f9fafb;
}
</style>

5. Publish Your Site

Click "Publish" in the top-right corner. Your video testimonials will now appear on your live site.

Method 2: Site-Wide Script (For Multiple Widgets)

If you're adding testimonials to multiple pages, add the VouchWall script site-wide.

In Project Settings:

1. Click the gear icon (Project Settings)
2. Navigate to the Custom Code tab
3. Add this to the Footer Code section:

<script src="https://vouchwall.com/embed.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    VouchWall.autoInit();
  });
</script>

4. Save and close Project Settings

On Each Page:

Add a simple Embed element with just the widget container:

<div data-vouchwall-wall="YOUR_WIDGET_ID"></div>

The script will automatically initialize all widgets when the page loads.

Webflow CMS Integration

For CMS Template Pages:

Video testimonials work great on CMS collection pages (blog posts, portfolio items, products).

1. Add to Collection Template

Open your CMS template page and add an Embed element where you want testimonials.

2. Use Dynamic Widget IDs (Optional)

If you want different testimonials for different collection items, you can store widget IDs in CMS fields:

<!-- Create a plain text field called "testimonial-widget-id" in your collection -->
<div data-vouchwall-wall="{{testimonial-widget-id}}"></div>
<script src="https://vouchwall.com/embed.js"></script>

Wix Integration Guide

Wix makes it incredibly simple to add video testimonials with drag-and-drop tools.

Method 1: Using HTML Iframe Element

This method works perfectly with Wix Editor and Wix Studio.

Step-by-Step Instructions:

1. Create Your Widget

In your VouchWall dashboard:

• Create and customize your widget
• Copy the embed code

2. Add HTML iFrame in Wix

In Wix Editor:

• Click Add (+) button on the left sidebar
• Select Embed Code → HTML iframe
• Drag the iframe element to your desired location on the page

3. Add Your Code

Click on the iframe element, then click Enter Code:

<div data-vouchwall-wall="YOUR_WIDGET_ID"></div>
<script src="https://vouchwall.com/embed.js"></script>

4. Adjust Size

• Resize the iframe element by dragging its corners
• Set appropriate height based on your widget type:
  • Wall widget: 800-1200px height
  • Carousel widget: 400-600px height
  • Single widget: 300-500px height

5. Publish Your Site

Click Publish in the top-right corner.

Method 2: Using Custom Code (Wix Studio)

For Wix Studio users, you can add code directly to page sections.

1. Add Custom Element

In Wix Studio:

• Add a Custom Element section
• Paste your VouchWall embed code

2. Configure Settings

<div data-vouchwall-wall="YOUR_WIDGET_ID"></div>
<script src="https://vouchwall.com/embed.js"></script>

3. Style the Section

Use Wix Studio's styling tools to:

• Add padding and margins
• Set background colors
• Configure responsive behavior

Wix Multi-Page Setup

For Site-Wide Integration:

If you want testimonials on multiple pages, you can add the VouchWall script to your site's tracking code:

1. Add Tracking Code

In Wix Dashboard:

• Go to Settings → Custom Code
• Click + Add Custom Code
• Set to load in Body - End
• Add this code:

<script src="https://vouchwall.com/embed.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    VouchWall.autoInit();
  });
</script>

2. Add Widget Containers

On each page, use HTML iframe with just:

<div data-vouchwall-wall="YOUR_WIDGET_ID"></div>

Customization Options for Both Platforms

Widget Types

Choose the best widget type for your use case:

Design Customization

Both platforms support custom styling through the VouchWall CSS API. For comprehensive design guidance, see our testimonial widget design best practices:

/* Add to Webflow or Wix custom CSS */
.vouchwall-widget {
  --vw-primary-color: #007bff;
  --vw-background-color: #ffffff;
  --vw-text-color: #333333;
  --vw-border-radius: 12px;
  --vw-font-family: inherit;
}

.vouchwall-video-card {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.vouchwall-video-card:hover {
  transform: translateY(-4px);
}

Best Placement Strategies

For detailed placement strategies across all page types, see our comprehensive guide on where to display video testimonials.

Webflow Placement Recommendations

Homepage:

• Hero section: Use Carousel widget
• Below fold: Use Wall widget with 6-9 testimonials
• Above footer: Use Badge widget for social proof reminder

Product/Service Pages:

• After product description: Single widget
• Features section: Carousel widget
• Pricing section: Wall widget for social validation

Landing Pages:

• Above CTA: Single widget (most relevant testimonial)
• Mid-page: Carousel widget
• Bottom: Full Wall widget

Wix Placement Recommendations

Homepage:

• Header strip: Badge widget for immediate trust
• About section: Wall widget with team/client videos
• Footer area: Carousel widget

Product Pages:

• Product gallery area: Single widget
• Below "Add to Cart": Carousel widget
• Reviews section: Wall widget

Contact/Quote Pages:

• Above form: Wall widget to build confidence
• Sidebar: Badge widget
• Thank you page: Single widget

Performance Optimization

For Webflow:

• Add loading="lazy" attribute to embed elements below the fold
• Use Webflow's built-in image optimization for any testimonial thumbnails
• Test interactions to ensure widgets don't interfere

For Wix:

• Adjust iframe heights to prevent layout shifts
• Use Wix's performance panel to monitor impact
• Enable Wix's built-in lazy loading for better speed

Mobile Responsiveness

VouchWall widgets are fully responsive and automatically adapt to mobile screens.

Webflow Mobile Optimization:

• Use Webflow's responsive breakpoints to adjust widget width
• Stack testimonials vertically on mobile (default behavior)
• Adjust padding/spacing for mobile views
• Test with Webflow's device preview

Wix Mobile Optimization:

• Wix automatically handles mobile layouts
• Adjust iframe container width for mobile
• Use Wix mobile editor to fine-tune spacing
• Test with Wix mobile preview

SEO Benefits

Video testimonials improve SEO on both platforms:

Structured Data: VouchWall automatically adds schema markup:

{
  "@context": "https://schema.org",
  "@type": "Review",
  "reviewRating": {
    "@type": "Rating",
    "ratingValue": "5"
  },
  "author": {
    "@type": "Person",
    "name": "Customer Name"
  }
}

SEO Best Practices:

• Add descriptive headings above testimonial sections ("What Our Customers Say")
• Include relevant keywords in surrounding text
• Use video transcripts when available
• Add alt text to thumbnail images

Troubleshooting Common Issues

Webflow Issues

Widget Not Appearing:

• Check that embed code is complete
• Verify script tag is included
• Check browser console for errors
• Ensure widget ID is correct

Styling Issues:

• Add !important to custom CSS if needed
• Check that Webflow styles aren't conflicting
• Use browser inspector to debug

Interactions Conflicts:

• Ensure VouchWall script loads before interactions trigger
• Use Webflow's interaction timing controls
• Test thoroughly in preview mode

Wix Issues

iframe Height Problems:

• Manually adjust iframe height
• Use browser inspector to find ideal height
• Add extra 20-30px padding for safety

Mobile Display Issues:

• Use Wix mobile editor
• Adjust container width for mobile
• Test on real devices, not just preview

Loading Speed:

• Move widget lower on page if possible
• Reduce number of testimonials displayed
• Enable lazy loading in Wix settings

Frequently Asked Questions

Q: Do I need a Webflow/Wix account AND a VouchWall account?

Yes. You'll use VouchWall to collect and manage testimonials, then embed them on your Webflow or Wix site.

Q: Can I use the same widget on both platforms?

Absolutely! Create one widget in VouchWall and use the same embed code on any website.

Q: Will this slow down my Webflow/Wix site?

No. VouchWall widgets load asynchronously and are optimized for performance. Most sites see no measurable impact on page speed.

Q: Can I collect testimonials directly through Webflow/Wix?

Not directly. Use VouchWall's collection forms to gather testimonials, then display them on your Webflow or Wix site using the embed code.

Q: Is it mobile-friendly?

Yes! VouchWall widgets are fully responsive and work perfectly on all devices.

Q: Can I customize the design?

Yes. You can customize colors, fonts, layout, and more through the VouchWall dashboard. Both platforms also support custom CSS for advanced styling.

Q: How many testimonials should I display?

For best performance and engagement:

• Homepage: 6-9 testimonials (Wall widget)
• Product pages: 1-3 testimonials (Single or Carousel)
• Dedicated testimonial page: 12-20 testimonials

Next Steps

Conclusion

Adding video testimonials to your Webflow or Wix website is straightforward with VouchWall's embed integration. Both platforms offer excellent support for video content, and the no-code approach makes it accessible to everyone—regardless of technical skill.

The key is to:

1. Choose the right widget type for each page
2. Place testimonials strategically for maximum impact
3. Optimize for mobile and performance
4. Test and iterate based on results

Start with 3-5 strong video testimonials, add them to your highest-traffic pages, and watch your conversion rates improve.

---

Related Guides

Continue learning about video testimonials and no-code integrations:

• How to Add Video Testimonials to Any Website - Universal guide for adding video testimonials to any platform
• Video Testimonials on WordPress - Complete WordPress integration guide with plugins and embed methods
• Where to Display Video Testimonials on Your Website - Strategic placement guide for maximum conversion impact
• Testimonial Widget Design Best Practices - Design principles for creating high-converting testimonial widgets
• Ultimate Guide to Video Testimonials - Complete resource covering collection, editing, and optimization
• Video Testimonial Collection Guide - Learn how to collect high-quality testimonials remotely