SocialProof.Reviews stellt jedem Workspace vier einbettbare Testimonial-Widgets zur Verfügung — eine Wall of Love, ein Karussell, ein Bewertungs-Badge und ein Sammelformular. Jedes ist ein schlanker <iframe>, der Ihre live genehmigten Testimonials lädt, Ihre Markenfarben und Ihr Logo verwendet und sich automatisch aktualisiert, wenn Sie neue Bewertungen genehmigen.
Diese Anleitung deckt ab:
| Widget | Einbettungsgröße | Beste Platzierung |
|---|---|---|
| Wall of Love | Volle Breite, 800px+ Höhe | Dedizierte /testimonials- oder /bewertungen-Seite |
| Karussell | Volle Breite, 280–360px Höhe | Homepage-Hero, Preisseite, Landing Page |
| Badge | 220×48px | Navigationsleiste, Footer, neben Preisplänen |
| Sammelformular | Volle Breite, 700px Höhe | Seite nach dem Kauf, Danke-Seite, Dashboard |
Alle vier Widgets werden über HTTPS bereitgestellt, laden asynchron (kein Einfluss auf Core Web Vitals) und aktualisieren sich automatisch, wenn Sie neue Testimonials genehmigen — kein erneutes Einbetten erforderlich.
<iframe>-Snippet — er ist einzigartig für Ihren WorkspaceEin vollständiges Masonry-Raster aller genehmigten Testimonials. Verwenden Sie es auf einer dedizierten Bewertungs- oder Testimonials-Seite.
Enthält: Name des Bewerters, Foto, Unternehmen, Berufsbezeichnung, Sternebewertung, Bewertungstext, Fotos, Video-Thumbnails, Filterleiste, Markenfarben und einen optionalen „Bewertung hinterlassen"-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>
Ein automatisch rotierender Testimonial-Slider. Ideal für Homepages, Preisseiten und Landing Pages, wo der Platz begrenzt ist.
Enthält: rotierende Testimonial-Slides, Name des Bewerters, Foto, Unternehmen, Sternebewertung, Bewertungstext, Navigationspunkte und Pfeile, Markenfarben.
<iframe
src="https://socialproof.reviews/YOUR-SLUG/widgets/carousel"
width="100%"
height="280px"
frameborder="0"
style="border:none; width:100%;"
title="Customer Reviews"
></iframe>
Höhen-Tipp: Wenn Ihre Testimonials länger sind, erhöhen Sie auf 320–360px. Standard 280px passt für eine einzelne Karte.
Platzierungstipps:
Eine kompakte Vertrauens-Pill, die Ihre aggregierte Sternebewertung und die Bewertungsanzahl anzeigt. Designed für Navigationsleisten, Footer und neben Preisplänen.
Enthält: aggregierte Sternebewertung (z. B. ★ 4,9), Gesamtanzahl der Bewertungen, Markenfarben-Akzent, Klick-Through zu Ihrer vollständigen Wall of Love.
<iframe
src="https://socialproof.reviews/YOUR-SLUG/widgets/badge"
width="220px"
height="48px"
frameborder="0"
style="border:none;"
title="Rating Badge"
></iframe>
Platzierungstipps:
Bettet Ihr Testimonial-Einreichungsformular direkt auf Ihrer Website ein — ohne Nutzer auf eine separate Seite weiterzuleiten.
Enthält: mehrstufiger Einreichungsfluss (Bewerten → Über Sie → Bewertung → optionales Video), Markenfarben und Logo, E-Mail-Validierung, Foto-Upload und optionale Belohnungsanzeige nach der Einreichung.
<iframe
src="https://socialproof.reviews/YOUR-SLUG"
width="100%"
height="700px"
frameborder="0"
style="border:none; width:100%;"
title="Leave a Review"
></iframe>
Beste Platzierungen:
SocialProof.Reviews-Widgets verwenden ein Standard-HTML-<iframe>-Tag und funktionieren auf jeder großen Website-Plattform. Die folgende Tabelle zeigt, wie Sie auf jeder Plattform ein benutzerdefiniertes HTML- oder Embed-Element hinzufügen.
| Plattform | Zu verwendendes Element |
|---|---|
| WordPress | Custom HTML-Block |
| Webflow | Embed-Komponente (Erweitert) |
| Wix | HTML einbetten (Embed & Social) |
| Squarespace | Code-Block |
| Shopify | Code bearbeiten (Themes) |
| Kajabi | Benutzerdefinierter Code-Block |
| ClickFunnels 2.0 | Benutzerdefiniertes JS/HTML-Element (Misc) |
| Framer | Embed-Komponente (Utility) |
| Systeme.io | Raw-HTML-Element (Erweitert) |
| React / Next.js | <iframe> JSX-Element |
| Benutzerdefiniertes HTML | Direkt in Ihr HTML einfügen |
Empfohlene Methode — Custom HTML-Block (Gutenberg):
<iframe>-Snippet in den Block einAlternative — Page Builder:
Hinweis: Die kostenlosen und Personal-Pläne von WordPress.com schränken
<iframe>-Tags ein. Sie benötigen den Business-Plan oder höher, oder verwenden Sie selbst gehostetes WordPress.org.
<iframe>-Code einHinweis: Eingebettete Inhalte werden im Designer als grauer Platzhalter angezeigt. Sie werden auf der veröffentlichten Live-Website korrekt gerendert.
<iframe>-Code einHinweis für Wix Studio: Verwenden Sie das +-Symbol, um ein HTML-iFrame-Element hinzuzufügen — die Schritte sind identisch.
HTTPS erforderlich: Die
src-URL in Ihrem iframe musshttps://verwenden, nichthttp://.
<iframe>-Code einPlan-Anforderung: iframe-Unterstützung erfordert den Business-, Commerce- oder höheren Squarespace-Plan. Die
src-URL muss HTTPS verwenden.
page.liquid)<iframe>-Snippet in den entsprechenden HTML-Abschnitt einAlternative — Shopify-Seiteneditor:
<>-Schaltfläche)<iframe>-Code in das Code-Feld einUm das Widget zu zentrieren, umhüllen Sie es mit einem 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>
Hinweis: Wenn Sie ein Video-Testimonial separat einbetten, verwenden Sie Kajabis dedizierten Video-Embed-Block für bessere Performance. Für die SocialProof.Reviews-Wall oder das Karussell ist der Benutzerdefinierter-Code-Block die richtige Wahl.
<iframe>-Code ein und schließen Sie den EditorWenn der iframe zu klein erscheint, fügen Sie explizite Abmessungen hinzu:
<iframe
src="https://socialproof.reviews/YOUR-SLUG/widgets/carousel"
style="width:100%; height:320px; border:none;"
frameborder="0"
title="Customer Reviews"
></iframe>
<iframe>-Snippet einzufügen, oderMobile-Größenanpassung: Passen Sie Breite und Höhe der Embed-Komponente manuell an, um eine korrekte Darstellung auf kleineren Bildschirmen sicherzustellen.
<iframe>-Code ein und klicken Sie auf SpeichernGröße: Setzen Sie
width="100%"und eine feste Höhe (z. B.height="300px") direkt im iframe-Tag für ein vorhersehbares Layout.
Fügen Sie das Widget als <iframe>-JSX-Element ein. Beachten Sie, dass frameborder zu frameBorder wird und style ein Objekt in JSX entgegennimmt:
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>
);
}
Für die 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>
);
}
Fügen Sie den iframe direkt in eine beliebige HTML-Datei oder ein Template ein, wo das Widget erscheinen soll:
<!-- Karussell-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>
Ersetzen Sie YOUR-SLUG durch Ihren Workspace-Slug. Das Widget lädt asynchron und blockiert das Seitenrendering nicht.
Alle Widgets übernehmen automatisch das Branding Ihres Workspace. Um Farben, Logo, Überschriften zu ändern oder Abschnitte ein- und auszublenden:
Vollständige Details finden Sie im Branding-Leitfaden.
Alle SocialProof.Reviews-Widgets:
width="100%"Benötige ich einen Entwickler, um die Widgets einzubetten? Nein. Alle oben aufgeführten Plattformen unterstützen das Einfügen von HTML ohne Programmierkenntnisse. Sie benötigen lediglich Zugang zum Seiteneditor Ihrer Website, mehr nicht.
Welchen Squarespace-Plan benötige ich für iframe-Einbettungen? Sie benötigen den Business-, Commerce Basic- oder Commerce Advanced-Plan. iframe-Einbettungen sind auf den Personal- oder Starter-Plänen nicht verfügbar.
Verlangsamt das Widget meine Website?
Nein. Der <iframe> lädt asynchron in einem separaten Browser-Kontext und blockiert weder den kritischen Rendering-Pfad Ihrer Seite noch beeinflusst er Ihren Core Web Vitals-Score.
Warum zeigt der iframe ein graues Kästchen anstelle des Widgets? In der Designer-Ansicht von Webflow und im Vorschau-Modus von Framer werden iframes als Platzhalter dargestellt. Veröffentlichen Sie die Website und rufen Sie die Live-URL auf — das Widget wird korrekt angezeigt.
Kann ich das Widget in eine E-Mail einbetten?
E-Mail-Clients blockieren iframes aus Sicherheitsgründen. Verlinken Sie stattdessen direkt auf Ihre Wall-of-Love-URL in der E-Mail. Für Post-Kauf-Sequenzen funktioniert ein Link zu https://socialproof.reviews/YOUR-SLUG (das Sammelformular) ohnehin besser.
Was passiert, wenn ich ein neues Testimonial genehmige — muss ich erneut einbetten? Nein. Das Widget ruft bei jedem Laden Live-Daten von SocialProof.Reviews ab. Genehmigen Sie ein Testimonial in Ihrem Dashboard und es erscheint automatisch im Widget.
Erlaubt WordPress.com iframes? Selbst gehostetes WordPress.org: ja, immer. WordPress.com: iframes erfordern den Business-Plan oder höher. Bei niedrigeren Plänen entfernt der Custom HTML-Block den iframe-Tag.
Warum wird das Kajabi-Widget nicht angezeigt?
Die häufigste Ursache ist eine HTTP-Quell-URL. Stellen Sie sicher, dass Ihr iframe-src mit https:// beginnt. Bestätigen Sie außerdem, dass Sie den Benutzerdefinierter-Code-Block verwendet haben (nicht den Texteditor), da der Rich-Text-Editor in Kajabi rohes HTML entfernt.
Kann ich das Sammelformular in einen ClickFunnels-Funnel-Schritt einbetten?
Ja. Verwenden Sie das benutzerdefinierte JS/HTML-Element (Misc-Abschnitt) in ClickFunnels 2.0, fügen Sie den Sammelformular-iframe-Code ein und setzen Sie height auf mindestens 700px, um zu verhindern, dass das Formular abgeschnitten erscheint.