How to Embed a Testimonial Widget on Any Website

SocialProof.Reviews gives every workspace four embeddable testimonial widgets — a Wall of Love, Carousel, Rating Badge, and Collect Form. Each one is a lightweight <iframe> that loads your live, approved testimonials, uses your brand colors and logo, and updates automatically when you approve new reviews.

This guide covers:

The four available widgets
How to get your embed code
Platform-specific embed instructions for 11 platforms
Customizing widget appearance
FAQ

The Four Widgets

Widget	Embed size	Best placement
Wall of Love	Full-width, 800px+ tall	Dedicated `/testimonials` or `/reviews` page
Carousel	Full-width, 280–360px tall	Homepage hero, pricing page, landing page
Badge	220×48px	Nav bar, footer, beside pricing plans
Collect Form	Full-width, 700px tall	Post-purchase page, thank-you page, dashboard

All four widgets are served over HTTPS, load asynchronously (no impact on Core Web Vitals), and auto-update when you approve new testimonials — no re-embed required.

Getting Your Embed Code

Log in to SocialProof.Reviews and open your workspace
Click Embed & Integrations in the admin sidebar
Select the widget tab: Wall, Carousel, Badge, or Collect Form
Copy the <iframe> snippet — it is unique to your workspace

Widget 1: Wall of Love

A full masonry grid of all approved testimonials. Use it on a dedicated reviews or testimonials page.

Includes: reviewer name, photo, company, job title, star rating, review text, photos, video thumbnails, filter bar, brand colors, and an optional "Leave a review" CTA.

Embed code

<iframe
  src="https://socialproof.reviews/YOUR-SLUG/wall"
  width="100%"
  height="800px"
  frameborder="0"
  style="border:none; width:100%;"
  title="Wall of Love"
></iframe>

Dynamic height (optional)

<iframe
  id="spr-wall"
  src="https://socialproof.reviews/YOUR-SLUG/wall"
  width="100%"
  frameborder="0"
  style="border:none; width:100%;"
  title="Wall of Love"
  onload="this.style.height = this.contentWindow.document.body.scrollHeight + 'px'"
></iframe>

Widget 2: Carousel

An auto-rotating testimonial slider. Best for homepages, pricing pages, and landing pages where space is limited.

Includes: rotating testimonial slides, reviewer name, photo, company, star rating, review text, navigation dots and arrows, brand colors.

Embed code

<iframe
  src="https://socialproof.reviews/YOUR-SLUG/widgets/carousel"
  width="100%"
  height="280px"
  frameborder="0"
  style="border:none; width:100%;"
  title="Customer Reviews"
></iframe>

Height tip: If your testimonials are long, increase to 320–360px. Default 280px fits a single card.

Placement tips:

Homepage: Place immediately after the hero headline to reduce bounce rate
Pricing page: Place one carousel above the plan grid, another between plans and the FAQ
Landing page: Insert after the main CTA button to address objections before the visitor leaves

Widget 3: Badge

A compact trust pill showing your aggregate star rating and review count. Designed for nav bars, footers, and beside pricing plans.

Includes: aggregate star rating (e.g., ★ 4.9), total review count, brand color accent, click-through to your full Wall of Love.

Embed code

<iframe
  src="https://socialproof.reviews/YOUR-SLUG/widgets/badge"
  width="220px"
  height="48px"
  frameborder="0"
  style="border:none;"
  title="Rating Badge"
></iframe>

Placement tips:

Nav bar: Builds trust before visitors scroll
Footer: Groups with SSL badge, payment icons, guarantee
Beside a pricing plan: Reinforces value at the moment of decision
Email signature: Export as image from Branding settings and link to your Wall of Love URL

Widget 4: Collect Form

Embeds your testimonial submission form directly on your site — no redirect to a separate page.

Includes: multi-step flow (rate → about you → review → optional video), brand colors and logo, email validation, photo upload, and optional reward display after submission.

Embed code

<iframe
  src="https://socialproof.reviews/YOUR-SLUG"
  width="100%"
  height="700px"
  frameborder="0"
  style="border:none; width:100%;"
  title="Leave a Review"
></iframe>

Best placements:

Post-purchase thank-you page: Highest-converting placement — satisfaction is at its peak
Post-onboarding completion page: Trigger when users hit their first success moment
Post-purchase email (link, not embed): A 3–7 day follow-up email has the best response rate
Inside your product dashboard: Add a "Leave a review" section in settings or help menu

Platform-Specific Instructions

SocialProof.Reviews widgets use a standard HTML <iframe> tag and work on every major website platform. The table below shows how to add a Custom HTML or Embed element on each platform — that is all that is required.

Platform	Element to use
WordPress	Custom HTML block
Webflow	Embed component (Advanced)
Wix	Embed HTML (Embed & Social)
Squarespace	Code Block
Shopify	Edit Code (Themes)
Kajabi	Custom Code block
ClickFunnels 2.0	Custom JS/HTML element (Misc)
Framer	Embed component (Utility)
Systeme.io	Raw HTML element (Advanced)
React / Next.js	`<iframe>` JSX element
Custom HTML	Paste directly into your HTML

WordPress

Recommended method — Custom HTML block (Gutenberg):

Edit the page or post where you want the widget
Click + to add a new block and search for Custom HTML
Paste your <iframe> snippet into the block
Switch to the Preview tab to verify it loads
Publish or update the page

Alternative — Page builders:

Elementor: Add a HTML widget and paste the iframe code
Divi: Add a Code module and paste the iframe code

Note: WordPress.com free and Personal plans restrict <iframe> tags. You need the Business plan or higher, or use self-hosted WordPress.org.

Webflow

In the Webflow Designer, click + (Add Panel) in the left toolbar
Scroll to Advanced and drag an Embed element onto your canvas
The code editor opens automatically — paste your <iframe> code
Click Save & Close
Publish your site

Note: Embedded content displays as a gray placeholder in the Designer. It renders correctly on the published live site.

Wix

In the Wix Editor, click + Add Elements in the left menu
Go to Embed & Social → Embed Code → Embed HTML
Click Enter Code and paste your <iframe> code
Click Update
Resize the element on the canvas so content is not cropped

Note for Wix Studio: Use the + icon to add an HTML iFrame element — the steps are the same.

HTTPS required: The src URL in your iframe must use https://, not http://.

Squarespace

Log in and click Edit on the page where you want the widget
Click an insert point or the + button and select Code or Embed
Click the pencil icon to edit the block, select Code Snippet, and paste your <iframe> code
Click Apply, then Save

Plan requirement: Iframe support requires the Business, Commerce, or higher Squarespace plan. The src URL must use HTTPS.

Shopify

In your Shopify admin, go to Online Store → Themes → Edit Code
Open the template file for the page you want to edit (e.g., page.liquid)
Paste the <iframe> snippet in the appropriate section of the HTML
Click Save

Alternative — Shopify page editor:

Go to Online Store → Pages and open the target page
In the content editor, switch from the rich text view to HTML source (the <> button)
Paste your iframe code and save

Kajabi

In Kajabi, go to Website → Pages (or your product's landing page) and open the editor
Click Add Section or Add Block in the sidebar and select Custom Code
Click the Custom Code block to open the editor
Paste your <iframe> code into the Code field
Click Save

To center the widget, wrap in a div:

<div style="text-align:center;">
  <iframe src="https://socialproof.reviews/YOUR-SLUG/widgets/carousel"
    width="100%" height="280px" frameborder="0" style="border:none;"></iframe>
</div>

Note: If you are embedding a video testimonial separately, use Kajabi's dedicated Video Embed Block for better performance. For the SocialProof.Reviews wall or carousel, the Custom Code block is the right choice.

ClickFunnels 2.0

Go to Funnels, select the funnel step you want to edit, and click Edit Page
In the left sidebar, click Elements and then Add Element
Scroll to the Misc section and select Custom JS/HTML
Click the new element on the canvas, then click Open Code Editor
Paste your <iframe> code and close the editor
Save the page

If the iframe appears too small, add explicit dimensions:

<iframe
  src="https://socialproof.reviews/YOUR-SLUG/widgets/carousel"
  style="width:100%; height:320px; border:none;"
  frameborder="0"
  title="Customer Reviews"
></iframe>

Framer

In the Framer canvas, click + Insert in the top-left menu
Search for Embed or find it under the Utility section
Drag the Embed component onto your page
In the right-side properties panel:
- Choose HTML to paste a full <iframe> snippet, or
- Choose URL to paste the widget URL directly
Click the Play button to preview — the embed renders on the live published site

Mobile sizing: Adjust the width and height of the Embed component manually to ensure correct display on smaller screens.

Systeme.io

Open the page or funnel step in the Systeme.io Page Builder
In the left-hand element menu, locate Raw HTML under the Advanced block
Drag the Raw HTML element onto your page
Click the element to open its settings, then click Edit code
Paste your <iframe> code and click Save

Sizing: Set width="100%" and a fixed height (e.g., height="300px") directly in the iframe tag for predictable layout.

React / Next.js

Paste the widget as an <iframe> JSX element. Note that frameborder becomes frameBorder and style takes an object in JSX:

export default function TestimonialsSection() {
  return (
    <section>
      <h2>What our customers say</h2>
      <iframe
        src="https://socialproof.reviews/your-slug/widgets/carousel"
        width="100%"
        height="300"
        frameBorder="0"
        title="Customer Reviews"
        style={{ border: 'none', width: '100%' }}
      />
    </section>
  );
}

For the Wall of Love in Next.js (App Router):

// app/testimonials/page.jsx
export default function TestimonialsPage() {
  return (
    <main>
      <h1>Customer Testimonials</h1>
      <iframe
        src="https://socialproof.reviews/your-slug/wall"
        width="100%"
        height="900"
        frameBorder="0"
        title="Wall of Love"
        style={{ border: 'none', width: '100%' }}
      />
    </main>
  );
}

Custom HTML

Paste the iframe directly into any HTML file or template where you want the widget to appear:

<!-- Carousel widget -->
<iframe
  src="https://socialproof.reviews/YOUR-SLUG/widgets/carousel"
  width="100%"
  height="280px"
  frameborder="0"
  style="border:none; width:100%;"
  title="Customer Reviews"
></iframe>

Replace YOUR-SLUG with your workspace slug. The widget loads asynchronously and does not block page rendering.

Customizing Widget Appearance

All widgets inherit your workspace branding automatically. To change colors, logo, headlines, or toggle sections:

Go to Branding in your workspace admin panel
Update primary color, secondary color, logo, and any display settings
Click Save — all live widgets update instantly, no re-embed needed

See the Branding guide for full details.

Performance Notes

All SocialProof.Reviews widgets:

Load asynchronously — no impact on your Core Web Vitals or Lighthouse score
Are served over HTTPS from a CDN with sub-100ms response times
Cache-bust automatically when you approve new testimonials
Are fully responsive at width="100%"

Frequently Asked Questions

Do I need a developer to embed the widgets? No. Every platform listed above supports pasting HTML without writing code. You need access to your website's page editor, nothing more.

Which Squarespace plan do I need to embed iframes? You need the Business, Commerce Basic, or Commerce Advanced plan. Iframe embeds are not available on the Personal or Starter plans.

Does the widget slow down my website? No. The <iframe> loads asynchronously in a separate browser context and does not block your page's critical rendering path or affect your Core Web Vitals score.

Why is the iframe showing a gray box instead of the widget? In Webflow's Designer view and Framer's preview mode, iframes render as placeholders. Publish the site and view the live URL — the widget will display correctly.

Can I embed the widget in an email? Email clients block iframes for security. Instead, link to your Wall of Love URL directly in the email. For post-purchase sequences, linking to https://socialproof.reviews/YOUR-SLUG (the Collect Form) typically performs better anyway.

What happens when I approve a new testimonial — do I need to re-embed? No. The widget fetches live data from SocialProof.Reviews every time it loads. Approve a testimonial in your dashboard and it appears in the widget automatically.

Does WordPress.com allow iframes? Self-hosted WordPress.org: yes, always. WordPress.com: iframes require the Business plan or higher. On lower plans, the Custom HTML block strips the iframe tag.

Why is the Kajabi widget not displaying? The most common cause is an HTTP source URL. Ensure your iframe src starts with https://. Also confirm you used the Custom Code block (not the text editor), as the rich text editor in Kajabi strips raw HTML.

Can I embed the Collect Form inside a ClickFunnels funnel step? Yes. Use the Custom JS/HTML element (Misc section) in ClickFunnels 2.0, paste the Collect Form iframe code, and set height to at least 700px to prevent the form from appearing clipped.