GetPureProof

How to add video testimonials to Webflow (Designer, CMS, or any page)

By , Founder5 min read
Back to blog

How to add video testimonials to Webflow (Designer, CMS, or any page)

Step-by-step across the Embed element, site-wide custom code, and CMS collection pages. Plus the publishing and script-stripping gotchas that trip up most teams.

Webflow handles embedded HTML differently from WordPress or Shopify. There's no block editor dropping Custom HTML wherever you want — there's the Embed element in the Designer, custom code fields in Page Settings, custom code fields in Site Settings for global placement, and CMS-connected embeds for testimonial widgets that need to appear on every item in a collection.

And there's a catch most tutorials skip: the Embed element is a paid feature on some Webflow plans, and custom code in Site Settings is locked behind the hosting plan tier. Knowing which route to take depends partly on where you want the widget and partly on what your Webflow plan allows.

This guide covers how to add a GetPureProof video testimonial widget to Webflow across the four scenarios that cover most sites: the Embed element for one-off placements, CMS collection pages for dynamic per-item widgets, site-wide custom code for global placements like footers, and the publishing workflow (which is where most problems show up). Plus the Webflow-specific troubleshooting for when the widget works in the Designer preview but not on the live site.

Prerequisites: a Webflow site you can edit, appropriate access permissions (Designer access for most of this, Admin for site-wide code), and an account with at least one widget created.

Step 1 — Create your widget

Before you touch Webflow, create the widget in your dashboard:

  1. Log into your dashboard.
  2. Open the Space with the testimonials you want to embed.
  3. Click Widgets in the sidebar.
  4. Click New Widget and choose your layout — Wall of Love, Carousel, Single Spotlight, Floating Pop, or Avatars.
  5. Select the testimonials you want, pick a theme (light, dark, or transparent — transparent blends well with most Webflow designs), and save.

Each widget has a unique ID. You can create multiple widgets from the same Space — one for the home page, a different one for a case study template, a third for a blog post layout — and each gets its own embed snippet.

Step 2 — Copy your embed code

From the widget list, click Code on the widget you just created:

<div class="pureproof-widget" data-widget-id="your-unique-widget-id" data-mode="inline"></div>
<script src="https://app.getpureproof.com/embed.js" async></script>

Two lines. A container div and the async script. No dependencies, no framework bundle, no configuration.

Copy both. You'll paste them into Webflow next.

Step 3 — Add the widget to your Webflow site

Pick the method that matches where you want the widget.

Using the Embed element in the Designer

This is the standard workflow for most placements — a testimonials section on your home page, a widget inside a case study page, social proof in a specific landing page section.

  1. Open your site in the Webflow Designer.
  2. Navigate to the page where you want the testimonials.
  3. From the Add panel (the plus icon in the left sidebar), drag an Embed element onto the canvas at the position you want the widget.
  4. The HTML editor opens automatically. Paste your embed code.
  5. Click Save & Close.
  6. Click Publish in the top-right corner of the Designer to publish to staging (.webflow.io) or your custom domain.

One thing worth flagging: the Embed element is included on paid plans but may be limited or unavailable on free Starter sites. If you can't find the Embed element in the Add panel, check your plan — you'll likely need to upgrade to Basic or higher.

Using Page Settings custom code (header/footer of one page)

For a widget that needs to appear on a specific page but outside the visual layout — for example, a floating pop-up testimonial that should show on the pricing page only:

  1. In the Designer, click the Pages panel (paper icon).
  2. Hover over the page and click the gear icon to open Page Settings.
  3. Scroll to the Custom Code section.
  4. Paste your embed code in either the Inside <head> tag or Before </body> tag section — for the widget to render as part of the page body, use Before </body>.
  5. Save and publish.

Page Settings custom code is available on Webflow's CMS and Business plans. If you don't see the Custom Code section, your plan doesn't include it.

Using Site Settings custom code (global placement)

For a widget that should appear site-wide — a testimonials bar in the footer of every page, a floating pop on every page — use Site Settings:

  1. Go to Site Settings from the Webflow dashboard or from the Designer's project menu.
  2. Click the Custom Code tab.
  3. Paste your embed code in Footer Code (renders before </body> site-wide).
  4. Click Save Changes.
  5. Return to the Designer and click Publish to deploy.

Site Settings custom code is locked behind the site's hosting plan — typically CMS plan and up. Without hosting (or on Starter), you won't have access to this section.

Using CMS collection pages (dynamic widgets per item)

If you run a case study collection, a customer story collection, or any CMS template where each item should show a different set of testimonials, you have two approaches:

Approach A — one widget, all collection items. Add an Embed element to the CMS template with a single hardcoded embed code. Every collection item displays the same testimonials. Simple, fast, works on any plan with Embed support.

Approach B — different widgets per collection item. Add a CMS field called something like testimonial_widget_id of type Plain Text to your collection. In the CMS template, drop an Embed element, paste the embed snippet, and replace the hardcoded widget ID with a dynamic field reference. In Webflow's Embed editor, click + Add Field and select the testimonial_widget_id field. Now each collection item can render its own widget by entering the widget ID in the CMS.

Approach B is powerful if you're running case studies where each deserves testimonials from that specific customer or segment. For most sites, approach A is enough.

The publishing gotcha that trips up most teams

Webflow has a quirk that catches most first-time embedders: the Designer preview does not execute embedded scripts. When you paste your embed code into an Embed element and click the preview button in the Designer, you'll see an empty container with the label "Embed" — the widget won't render. That's not a bug. It's Webflow deliberately not executing external scripts inside the Designer.

To actually see the widget, you have to publish. Two publishing targets:

  • Staging (publishes to yourproject.webflow.io) — free on every plan, good for testing.
  • Production (publishes to your custom domain) — requires hosting.

Publish to staging first. Open the staging URL in a new tab. Verify the widget renders. Only then publish to production. This saves you from debugging a problem on your live domain when it's actually a Webflow-specific preview limitation.

Troubleshooting

Four failure modes cover most problems.

1. Widget renders on staging but not on custom domain.

Usually a DNS or CDN cache issue. After publishing, wait two to three minutes for Webflow's CDN to propagate. Hard-refresh your browser (Ctrl+Shift+R or Cmd+Shift+R). If it still doesn't render, check whether your site has an aggressive Cloudflare layer in front of Webflow's hosting — sometimes double-layered CDNs cache old HTML. Purge both.

2. Embed element shows in Designer but the widget doesn't appear after publishing.

First, confirm the Embed element is actually on the page and not hidden behind a conditional visibility setting. Webflow lets you hide elements at specific breakpoints or based on CMS conditions — a hidden embed renders no widget. Second, view page source on the published site and search for pureproof. If the script tag is missing from the rendered HTML, the Embed element was saved with empty content or Webflow stripped the script — rare, but worth checking.

3. Widget renders in the wrong position.

Webflow's Embed elements are inline-block by default. If the widget is squished, centered oddly, or overflowing its container, check the parent element's flexbox or grid settings in the Designer. Wrap the Embed in a div with width set to 100% and padding as needed. The widget itself is responsive; the container around it in Webflow can still constrain or distort it.

4. Content Security Policy error in the browser console.

Rare on standard Webflow sites, but if you've added a custom CSP via Site Settings custom code, the embed script's domain needs to be on the allowlist. Add app.getpureproof.com to your script-src directive. Open DevTools console and look for CSP violation messages to confirm.

Webflow-specific performance notes

The widget is already optimized — async script, iframe isolation, lazy thumbnails, click-to-load video. Webflow doesn't need special configuration.

Two Webflow-specific considerations:

  • Don't duplicate the <script> tag across multiple Embed elements on the same page. If you add the widget in three sections of the same page, you only need the container div three times — the script tag only needs to appear once on the page. Duplicated script tags won't break rendering (the loader has a guard against double initialization), but they add unnecessary requests. Either put the script in Page Settings Footer Code once, or include it in only the first Embed element.
  • Lottie animations and other heavy Webflow interactions on the same page. If your page already runs Lottie animations, scroll-triggered interactions, or a hero video, main-thread contention matters. The testimonial widget's iframe isolation means it won't compete with those, but the overall page budget is still finite. On complex Webflow pages, watch your Core Web Vitals after adding widgets.

For the diagnostic side of how testimonial widgets affect performance, testimonial widgets and Core Web Vitals covers what to audit.

Bottom line

Adding video testimonials to Webflow is a three-step operation: create the widget, copy the snippet, drop it into the right Webflow surface.

Four surfaces depending on placement: Embed element in the Designer for specific layout positions, Page Settings custom code for per-page head or footer injection, Site Settings custom code for truly global placement, CMS collection templates for dynamic per-item widgets.

The gotcha that eats the most time isn't any of those — it's forgetting that the Designer preview doesn't execute embedded scripts. Publish to staging. Check on staging. Then push to production. Ninety-five percent of the "the widget doesn't work" posts in Webflow communities are this.

If you're running on other platforms too, the same workflow with platform-specific steps is covered in adding video testimonials to WordPress and adding video testimonials to Shopify.

Add video testimonials to Webflow in under ten minutes

Two lines of embed code. Works with the Embed element, Page Settings, Site Settings, or CMS collection templates. No app to install. No performance hit.

Start free — no credit card