如何在任意网站嵌入客户证言小组件

SocialProof.Reviews 为每个工作区提供四个可嵌入的证言小组件——证言墙(Wall of Love)、轮播、评分徽章和收集表单。每一个都是轻量级的 <iframe>,会加载你真实的、已审核通过的证言,使用你的品牌色和 Logo,并在你审核新评论后自动更新。

本指南包含:

四个可用的小组件
如何获取嵌入代码
针对 11 个平台的嵌入步骤
自定义小组件外观
常见问题

四个小组件

小组件	嵌入尺寸	最佳放置位置
证言墙(Wall of Love)	全宽,高 800px 以上	独立的 `/testimonials` 或 `/reviews` 页面
轮播	全宽,高 280–360px	首页主视觉、定价页、落地页
徽章	220×48px	导航栏、页脚、定价方案旁
收集表单	全宽,高 700px	购买完成页、感谢页、产品内页

所有四个小组件都通过 HTTPS 提供,异步加载(不影响 Core Web Vitals),并在你审核新证言后自动更新——无需重新嵌入。

获取嵌入代码

登录 SocialProof.Reviews 并打开你的工作区
在管理后台侧边栏点击 Embed & Integrations
选择对应的小组件标签:Wall、Carousel、Badge 或 Collect Form
复制 <iframe> 代码片段——每个工作区都是唯一的

小组件 1:证言墙(Wall of Love)

展示所有已审核证言的完整瀑布流布局。适合放在专门的评价/证言页面。

**包含:**评论者姓名、头像、公司、职位、星级评分、评论文本、图片、视频缩略图、筛选栏、品牌色,以及可选的 "Leave a review" CTA。

嵌入代码

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

动态高度(可选)

<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>

小组件 2:轮播

自动轮播的证言滑块。适合空间有限的首页、定价页和落地页。

**包含:**轮播证言卡片、评论者姓名、头像、公司、星级评分、评论文本、导航圆点与箭头、品牌色。

嵌入代码

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

**高度建议:**如果你的证言较长,可提高到 320–360px。默认 280px 刚好容纳一张卡片。

放置建议:

**首页:**紧跟主标题之后,降低跳出率
**定价页:**方案表上方放一个轮播,方案与 FAQ 之间再放一个
**落地页:**放在主 CTA 按钮之后,在访客离开前解答疑虑

小组件 3:徽章

紧凑的信任胶囊,显示你的综合星级与评价数量。适合导航栏、页脚和定价方案旁。

**包含:**综合星级(如 ★ 4.9)、总评价数、品牌色点缀、可点击跳转到完整的证言墙。

嵌入代码

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

放置建议:

**导航栏:**在访客开始滚动之前就建立信任
**页脚:**与 SSL 徽章、支付图标、保障承诺等放在一起
**定价方案旁:**在决定购买的关键瞬间强化价值
**邮件签名:**从品牌设置中导出为图片,链接到你的证言墙 URL

小组件 4:收集表单

把你的证言提交表单直接嵌在网站里——无需跳转到独立页面。

**包含:**多步骤流程(打分 → 自我介绍 → 评论 → 可选视频)、品牌色和 Logo、邮箱校验、图片上传,以及提交后的可选奖励展示。

嵌入代码

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

最佳放置位置:

**购买完成后的感谢页:**转化率最高的位置——此时满意度正达到峰值
**新手引导完成页:**在用户达成第一个成功时触发
**购买后邮件(放链接,而不是嵌入):**3–7 天后的跟进邮件回应率最好
**产品仪表盘内:**在设置或帮助菜单里加一个 "Leave a review" 区块

各平台嵌入步骤

SocialProof.Reviews 的小组件使用标准的 HTML <iframe> 标签,在所有主流建站平台上都能工作。下面的表格列出了在每个平台添加自定义 HTML 或嵌入元素的方式——所有你需要做的就是这一步。

平台	使用的元素
WordPress	Custom HTML block(自定义 HTML 区块)
Webflow	Embed 组件(Advanced 分组下)
Wix	Embed HTML(Embed & Social 分组)
Squarespace	Code Block(代码块)
Shopify	Edit Code(主题编辑代码)
Kajabi	Custom Code 区块
ClickFunnels 2.0	Custom JS/HTML 元素(Misc 分组)
Framer	Embed 组件(Utility 分组)
Systeme.io	Raw HTML 元素(Advanced 分组)
React / Next.js	`<iframe>` JSX 元素
原生 HTML	直接粘贴到 HTML 中

WordPress

推荐方式——自定义 HTML 区块(Gutenberg):

编辑要放小组件的页面或文章
点击 + 添加新区块,搜索 Custom HTML
把 <iframe> 代码粘贴进去
切换到 Preview 标签确认能正常加载
发布或更新页面

替代方案——页面构建器:

**Elementor:**添加一个 HTML 小组件,粘贴 iframe 代码
**Divi:**添加一个 Code 模块,粘贴 iframe 代码

**注意:**WordPress.com 的免费版和个人版限制 <iframe> 标签。需要升级到商业版或以上,或者使用自托管的 WordPress.org。

Webflow

在 Webflow Designer 中,点击左侧工具栏的 +(Add Panel)
滚动到 Advanced,把 Embed 元素拖到画布上
代码编辑器会自动打开——粘贴你的 <iframe> 代码
点 Save & Close
发布站点

**注意:**嵌入内容在 Designer 里显示为灰色占位,实际发布后会正常渲染。

Wix

在 Wix 编辑器中点击左侧菜单的 + Add Elements
进入 Embed & Social → Embed Code → Embed HTML
点 Enter Code 粘贴 <iframe> 代码
点 Update
在画布上调整元素尺寸,避免内容被裁切

**Wix Studio 提示:**使用 + 图标添加 HTML iFrame 元素——步骤一致。

**需 HTTPS:**iframe 中 src 的 URL 必须是 https://,不能是 http://。

Squarespace

登录后,在目标页面上点 Edit
点击一个插入点或 + 按钮,选择 Code 或 Embed
点铅笔图标编辑区块,选择 Code Snippet 并粘贴 <iframe> 代码
点 Apply,再点 Save

**套餐要求:**iframe 需要 Business、Commerce 或更高的 Squarespace 套餐。src URL 必须使用 HTTPS。

Shopify

在 Shopify 后台进入 Online Store → Themes → Edit Code
打开目标页面对应的模板文件(如 page.liquid)
把 <iframe> 代码粘贴到 HTML 的合适位置
点 Save

替代方案——Shopify 页面编辑器:

进入 Online Store → Pages 并打开目标页面
在内容编辑器里,从富文本视图切换到 HTML source(<> 按钮)
粘贴 iframe 代码并保存

Kajabi

在 Kajabi 中进入 Website → Pages(或产品落地页)并打开编辑器
在侧边栏点 Add Section 或 Add Block,选择 Custom Code
点击自定义代码区块打开编辑器
把 <iframe> 代码粘贴到 Code 字段
点 Save

想让小组件居中,可用 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>

**注意:**如果你单独嵌入视频证言,使用 Kajabi 专用的 Video Embed Block 性能更好。嵌入 SocialProof.Reviews 的证言墙或轮播,则应使用 Custom Code 区块。

ClickFunnels 2.0

进入 Funnels,选择要编辑的漏斗步骤,点 Edit Page
在左侧栏点 Elements,再点 Add Element
滚动到 Misc 区,选择 Custom JS/HTML
在画布上点击新加的元素,点 Open Code Editor
粘贴 <iframe> 代码后关闭编辑器
Save 保存页面

如果 iframe 显示太小,加上明确的尺寸:

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

Framer

在 Framer 画布上,点击左上角 + Insert
搜索 Embed 或在 Utility 分组下找到它
把 Embed 组件拖到页面上
在右侧属性面板中:
- 选 HTML 粘贴完整的 <iframe> 代码,或
- 选 URL 直接粘贴小组件 URL
点 Play 预览——嵌入会在发布的线上页面渲染

**移动端适配:**手动调整 Embed 组件的宽高,确保在小屏设备上正确显示。

Systeme.io

在 Systeme.io 页面构建器中打开页面或漏斗步骤
在左侧元素菜单中,找到 Advanced 区块下的 Raw HTML
把 Raw HTML 元素拖到页面上
点击元素打开设置,再点 Edit code
粘贴 <iframe> 代码,点 Save

**尺寸:**直接在 iframe 标签里设置 width="100%" 和固定高度(如 height="300px"),布局更可控。

React / Next.js

把小组件作为 <iframe> JSX 元素粘贴。注意在 JSX 中 frameborder 写作 frameBorder,style 需要对象形式:

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>
  );
}

在 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>
  );
}

原生 HTML

直接把 iframe 粘贴到任意 HTML 文件或模板中想要显示小组件的位置:

<!-- 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>

把 YOUR-SLUG 替换成你的工作区 slug。小组件异步加载,不会阻塞页面渲染。

自定义小组件外观

所有小组件都会自动继承工作区的品牌设置。如需修改颜色、Logo、标题或版式开关:

在工作区管理后台进入 Branding
更新主色、辅助色、Logo 以及任何展示设置
点 Save——所有线上小组件即时更新,无需重新嵌入

完整细节请看品牌指南。

性能说明

所有 SocialProof.Reviews 小组件都:

异步加载——不影响 Core Web Vitals 或 Lighthouse 分数
通过 HTTPS 从 CDN 提供,响应时间低于 100ms
审核新证言时自动刷新缓存
在 width="100%" 下完全响应式

常见问题

嵌入小组件需要开发者吗? 不需要。上表列出的每个平台都支持粘贴 HTML,不需要写代码。你只需要有页面编辑权限。

Squarespace 需要哪个套餐才能嵌入 iframe? 需要 Business、Commerce Basic 或 Commerce Advanced 套餐。Personal 和 Starter 套餐不支持 iframe 嵌入。

小组件会拖慢我的网站吗? 不会。<iframe> 在独立的浏览器上下文中异步加载,不会阻塞页面关键渲染路径,也不会影响 Core Web Vitals 分数。

为什么 iframe 显示成灰色方块而不是小组件? 在 Webflow Designer 和 Framer 预览模式里,iframe 会被渲染为占位符。发布后访问线上 URL,小组件会正常显示。

能在邮件里嵌入小组件吗? 邮件客户端出于安全原因会屏蔽 iframe。替代方案是直接在邮件里链接到你的证言墙 URL。对于购买后序列,链接到 https://socialproof.reviews/YOUR-SLUG(收集表单)通常效果更好。

我审核了新证言——需要重新嵌入吗? 不需要。小组件每次加载时都从 SocialProof.Reviews 获取最新数据。在后台审核通过后,它会自动出现在小组件里。

WordPress.com 允许 iframe 吗? 自托管的 WordPress.org 永远支持。WordPress.com 需要商业版及以上,较低套餐的 Custom HTML 区块会剥离 iframe 标签。

为什么 Kajabi 小组件不显示? 最常见的原因是 src 是 HTTP。确保 src 以 https:// 开头。同时确认你用的是 Custom Code 区块(而不是文本编辑器)——Kajabi 的富文本编辑器会剥离原始 HTML。

能在 ClickFunnels 漏斗步骤里嵌入收集表单吗? 可以。在 ClickFunnels 2.0 中使用 Custom JS/HTML 元素(Misc 分组),粘贴收集表单 iframe 代码,把 height 设为至少 700px,避免表单被裁切。