GetPureProof

How to add video testimonials to Framer (Embed, custom code, CMS)

By , Founder5 min read
Back to blog

How to add video testimonials to Framer (Embed, custom code, CMS)

Step-by-step across the Embed layer, custom code in Site Settings, and CMS collection pages. Plus the Framer-specific gotchas around publishing and the design-first workflow.

Framer is a design-first builder. That changes the embed workflow in ways that catch teams coming from WordPress or Shopify off guard. There's no HTML-block-anywhere pattern — there's the Embed layer for visual placements, the Custom Code fields in Site Settings for global injection, and CMS collections for dynamic per-item embedding. And there's one core Framer quirk: the canvas preview mode and the published site don't behave identically when it comes to third-party scripts, so "it worked in Framer" doesn't always mean "it works on production."

This guide covers how to add a GetPureProof video testimonial widget to Framer across the three scenarios that cover most sites: the Embed layer for specific in-design placements, Site Settings custom code for global placements like footers and floating widgets, and CMS templates for dynamic widgets that vary per collection item. Plus the Framer-specific troubleshooting and publishing notes.

Prerequisites: a Framer site you can edit, Editor or Owner access to the project, and an account with at least one widget already created.

Step 1 — Create your widget

Before you touch Framer, 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 to include, pick a theme (light, dark, or transparent — transparent usually blends best with Framer's custom designs), and save.

Each widget gets a unique ID. You can create multiple widgets from the same Space — one per use case on your Framer site — and each has 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>

A container div and an async script. Two lines, no dependencies, no configuration. Copy both — you'll paste them into Framer next.

Step 3 — Add the widget to your Framer site

Pick the method that fits where you want the widget.

Using the Embed layer in the canvas

This is the standard workflow for a testimonial widget that needs to sit inside your visual layout — a social-proof section on the home page, a widget below a pricing table, a wall of testimonials on a landing page.

  1. Open your project in the Framer editor.
  2. Navigate to the page where you want the testimonials.
  3. From the Insert menu (or the plus icon in the toolbar), find Embed and drag it onto the canvas.
  4. With the Embed layer selected, open the right-hand properties panel.
  5. In the HTML field, paste your embed code.
  6. Size the Embed frame to match the widget's expected dimensions. Width usually works at 100% of the container; height can start at a reasonable default (400–600px) — the embed will resize itself via iframe messaging once rendered.
  7. Click Publish in the top-right to push to your staging URL (.framer.website) or your custom domain.

One thing worth flagging: Framer's Embed layer renders an iframe around your HTML. Our testimonial widget also renders in an iframe. The result is a nested iframe — functionally fine, and performance-wise still acceptable because both are lightweight, but it means you may need to give the Framer Embed layer some vertical breathing room so its iframe doesn't clip the widget's iframe inside.

Using Site Settings custom code (global placement)

For widgets that should appear site-wide — floating pop-up testimonials visible on every page, a footer testimonial bar, global analytics-independent social proof — use custom code in Site Settings:

  1. From the Framer editor, open Site Settings (usually under the project menu or a gear icon).
  2. Find the Custom Code section (sometimes labelled General or Scripts).
  3. In the End of <body> field, paste your embed code.
  4. Save and Publish.

Site-level custom code runs on every page of the published site. This is the right surface for floating widgets that should be present everywhere, but the wrong surface if you only want the widget on specific pages — for that, use the Embed layer on the pages you want.

Using CMS collection pages

Framer's CMS lets you build collection-driven pages — case studies, customer stories, blog posts — where each item is rendered from a template. If you want each collection item to show its own testimonial widget (for example, a case study page showing testimonials from that specific customer), two approaches:

Approach A — same widget on every item. In the CMS template, drop an Embed layer with a single hardcoded embed snippet. Every item in the collection shows the same testimonials. Simple, fast.

Approach B — dynamic widget ID per item. Add a Plain Text field to your CMS collection called something like testimonial_widget_id. In the CMS template, drop the Embed layer, paste the snippet, and replace the hardcoded widget ID value with a dynamic reference to the collection field. Now each CMS item can show its own widget based on the ID entered in the CMS. Approach B is more effort but the right fit if testimonials should vary per case study or per customer story.

Not every Framer plan supports the dynamic field binding inside Embed layers — if you don't see the option to bind a field to the HTML content, your plan may not include it. Check the current Framer plan documentation.

The publishing workflow to know about

Framer's canvas preview mode will often show the widget container as a blank rectangle or a static placeholder. That's normal — Framer's in-editor preview doesn't always execute third-party scripts in the iframe sandbox the way the live site does. To actually see the widget render, you need to publish:

  • Staging publishes to yourproject.framer.website — free on all plans, the right place to verify embeds.
  • Production publishes to your custom domain — requires a paid plan.

Always publish to staging first. Open the staging URL in a new tab. Confirm the widget renders. Then push to production. This one habit saves most of the "the testimonials aren't showing up" debugging that hits first-time Framer embedders.

Troubleshooting

Four failure modes cover most problems.

1. Widget container shows but stays empty on the published site.

Open DevTools on the live site and check the Console. Look for two things: a CSP violation message (rare on default Framer sites but possible if you've added custom CSP in Site Settings), and a 404 or network error on the embed script. If both are clean, view page source and search for pureproof. If the script tag is there but the widget doesn't render, the most common cause is a container sizing issue — the widget's iframe is trying to resize but is being clipped by the Framer Embed layer's fixed dimensions.

2. Widget renders but gets clipped on the page.

Framer's Embed layer has its own fixed frame dimensions. Our widget tries to resize itself to fit its content via the postMessage API. If the Framer Embed frame is set to a fixed height of 300px and the widget wants to be 800px, you'll see clipping.

Fix: give the Framer Embed layer generous vertical space, or if your Framer plan allows auto-height for Embed layers, enable it. If neither works, wrap the widget in a container with an explicit height that matches the widget's content (check the height by inspecting the embed iframe on the live site).

3. Widget works in staging but not on custom domain.

Usually a DNS or CDN cache issue. After publishing to production, wait a minute or two for Framer's CDN to propagate. Hard-refresh (Ctrl+Shift+R or Cmd+Shift+R). If you have a Cloudflare layer in front of Framer's hosting, purge its cache too — double-layered CDNs can cache stale HTML.

4. Widget renders on desktop but not on mobile breakpoints.

Framer lets you set per-breakpoint visibility on elements. Check whether the Embed layer is hidden on the mobile breakpoint (there's a visibility toggle in the properties panel). Also check whether the parent container has a mobile-specific width or overflow setting that's clipping the Embed layer.

Framer-specific performance notes

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

Two Framer-specific considerations:

  • Heavy canvas animations plus the widget. Framer sites often use rich entry animations, scroll-linked effects, and variant transitions. These run on the main thread of the host page. The testimonial widget's iframe isolation means it doesn't compete with them directly, but your total page budget is still finite. Test your page's Core Web Vitals after adding the widget and before pushing to production.
  • Don't duplicate the <script> tag across multiple Embed layers on the same page. If the widget appears in two sections of the same page, you only need the container div twice — the script tag belongs once per page. The loader has a guard against double initialization, so a duplicate won't break anything, but it's wasted overhead. Put the script in Site Settings end-of-body custom code once, and use only the container div in each Embed layer.

For the broader picture on how testimonial widgets affect performance, testimonial widgets and Core Web Vitals covers what to audit.

Bottom line

Adding video testimonials to Framer comes down to three surfaces: the Embed layer for visual placements inside the design, Site Settings custom code for global placements, and CMS templates for per-item dynamic embedding.

The two gotchas specific to Framer: the canvas preview doesn't always execute embedded scripts (always check on staging, not in the editor), and the Embed layer's fixed frame dimensions can clip a widget that wants to resize itself. Both are solved by publishing to staging first and giving the Embed layer generous vertical space.

Create the widget. Copy the snippet. Pick the Framer surface. Publish to staging. Verify. Push to production. Done.

If you run on other platforms alongside Framer, adding video testimonials to Webflow, adding video testimonials to WordPress, and adding video testimonials to Shopify cover the same workflow with platform-specific steps.

Add video testimonials to Framer in under ten minutes

Two lines of embed code. Works with the Embed layer, Site Settings custom code, or CMS collection templates. No app to install. No performance hit. No tracking injected into your design.

Start free — no credit card