SocialProof.Reviews fournit à chaque espace de travail quatre widgets de témoignages intégrables — un Mur d'Amour, un Carrousel, un Badge de notation et un Formulaire de collecte. Chacun est un <iframe> léger qui charge vos témoignages approuvés en direct, utilise les couleurs et le logo de votre marque, et se met à jour automatiquement quand vous approuvez de nouveaux avis.
Ce guide couvre :
| Widget | Taille d'intégration | Meilleur emplacement |
|---|---|---|
| Mur d'Amour | Pleine largeur, 800px+ de hauteur | Page dédiée /témoignages ou /avis |
| Carrousel | Pleine largeur, 280–360px de hauteur | Hero de la page d'accueil, page de tarification, page de destination |
| Badge | 220×48px | Barre de navigation, pied de page, à côté des plans tarifaires |
| Formulaire de collecte | Pleine largeur, 700px de hauteur | Page post-achat, page de remerciement, tableau de bord |
Les quatre widgets sont servis en HTTPS, se chargent de manière asynchrone (sans impact sur les Core Web Vitals) et se mettent à jour automatiquement quand vous approuvez de nouveaux témoignages — aucune ré-intégration nécessaire.
<iframe> — il est unique à votre espace de travailUne grille maçonnerie complète de tous les témoignages approuvés. Utilisez-le sur une page dédiée aux avis ou aux témoignages.
Inclut : nom du revieweur, photo, entreprise, titre du poste, note en étoiles, texte de l'avis, photos, miniatures vidéo, barre de filtres, couleurs de marque et un CTA optionnel « Laisser un avis ».
<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>
Un slider de témoignages à rotation automatique. Idéal pour les pages d'accueil, les pages de tarification et les pages de destination où l'espace est limité.
Inclut : slides de témoignages en rotation, nom du revieweur, photo, entreprise, note en étoiles, texte de l'avis, points et flèches de navigation, couleurs de marque.
<iframe
src="https://socialproof.reviews/YOUR-SLUG/widgets/carousel"
width="100%"
height="280px"
frameborder="0"
style="border:none; width:100%;"
title="Customer Reviews"
></iframe>
Conseil de hauteur : Si vos témoignages sont longs, augmentez à 320–360px. La valeur par défaut de 280px convient à une seule carte.
Conseils de placement :
Une petite pilule de confiance affichant votre note en étoiles agrégée et le nombre d'avis. Conçu pour les barres de navigation, les pieds de page et à côté des plans tarifaires.
Inclut : note en étoiles agrégée (ex. ★ 4,9), nombre total d'avis, accent de couleur de marque, lien vers votre Mur d'Amour complet au clic.
<iframe
src="https://socialproof.reviews/YOUR-SLUG/widgets/badge"
width="220px"
height="48px"
frameborder="0"
style="border:none;"
title="Rating Badge"
></iframe>
Conseils de placement :
Intègre votre formulaire de soumission de témoignages directement sur votre site — sans rediriger vers une page séparée.
Inclut : flux multi-étapes (noter → à votre sujet → avis → vidéo optionnelle), couleurs et logo de marque, validation d'e-mail, téléversement de photo et affichage optionnel de récompense après soumission.
<iframe
src="https://socialproof.reviews/YOUR-SLUG"
width="100%"
height="700px"
frameborder="0"
style="border:none; width:100%;"
title="Leave a Review"
></iframe>
Meilleurs emplacements :
Les widgets SocialProof.Reviews utilisent une balise HTML standard <iframe> et fonctionnent sur toutes les principales plateformes de sites web. Le tableau ci-dessous montre comment ajouter un élément HTML personnalisé ou d'intégration sur chaque plateforme.
| Plateforme | Élément à utiliser |
|---|---|
| WordPress | Bloc HTML personnalisé |
| Webflow | Composant Embed (Avancé) |
| Wix | Embed HTML (Embed et Social) |
| Squarespace | Bloc de code |
| Shopify | Modifier le code (Thèmes) |
| Kajabi | Bloc de code personnalisé |
| ClickFunnels 2.0 | Élément JS/HTML personnalisé (Misc) |
| Framer | Composant Embed (Utilitaire) |
| Systeme.io | Élément HTML brut (Avancé) |
| React / Next.js | Élément JSX <iframe> |
| HTML personnalisé | Collez directement dans votre HTML |
Méthode recommandée — Bloc HTML personnalisé (Gutenberg) :
<iframe> dans le blocAlternative — Constructeurs de pages :
Remarque : Les plans Gratuit et Personnel de WordPress.com restreignent les balises
<iframe>. Vous avez besoin du plan Business ou supérieur, ou utilisez WordPress.org auto-hébergé.
<iframe>Remarque : Le contenu intégré s'affiche comme un espace réservé gris dans le Designer. Il s'affiche correctement sur le site publié.
<iframe>Remarque pour Wix Studio : Utilisez l'icône + pour ajouter un élément HTML iFrame — les étapes sont identiques.
HTTPS requis : L'URL
srcdans votre iframe doit utiliserhttps://, pashttp://.
<iframe>Exigence de plan : La prise en charge des iframes nécessite le plan Business, Commerce ou supérieur de Squarespace. L'URL
srcdoit utiliser HTTPS.
page.liquid)<iframe> dans la section appropriée du HTMLAlternative — Éditeur de pages Shopify :
<>)<iframe> dans le champ CodePour centrer le widget, enveloppez-le dans un 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>
Remarque : Si vous intégrez séparément un témoignage vidéo, utilisez le Bloc d'intégration vidéo dédié de Kajabi pour de meilleures performances. Pour le mur ou le carrousel SocialProof.Reviews, le bloc Code personnalisé est le bon choix.
<iframe> et fermez l'éditeurSi l'iframe apparaît trop petit, ajoutez des dimensions explicites :
<iframe
src="https://socialproof.reviews/YOUR-SLUG/widgets/carousel"
style="width:100%; height:320px; border:none;"
frameborder="0"
title="Customer Reviews"
></iframe>
<iframe> complet, ouTaille mobile : Ajustez manuellement la largeur et la hauteur du composant Embed pour assurer un affichage correct sur les écrans plus petits.
<iframe> et cliquez sur EnregistrerTaille : Définissez
width="100%"et une hauteur fixe (ex.height="300px") directement dans la balise iframe pour une mise en page prévisible.
Collez le widget comme un élément JSX <iframe>. Notez que frameborder devient frameBorder et que style prend un objet en 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>
);
}
Pour le Mur d'Amour dans 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>
);
}
Collez l'iframe directement dans n'importe quel fichier HTML ou modèle où vous souhaitez que le widget apparaisse :
<!-- Widget Carrousel -->
<iframe
src="https://socialproof.reviews/YOUR-SLUG/widgets/carousel"
width="100%"
height="280px"
frameborder="0"
style="border:none; width:100%;"
title="Customer Reviews"
></iframe>
Remplacez YOUR-SLUG par le slug de votre espace de travail. Le widget se charge de manière asynchrone et ne bloque pas le rendu de la page.
Tous les widgets héritent automatiquement du branding de votre espace de travail. Pour changer les couleurs, le logo, les titres ou activer/désactiver des sections :
Consultez le guide de Marque pour tous les détails.
Tous les widgets SocialProof.Reviews :
width="100%"Ai-je besoin d'un développeur pour intégrer les widgets ? Non. Toutes les plateformes listées ci-dessus permettent de coller du HTML sans écrire de code. Vous avez seulement besoin d'accéder à l'éditeur de pages de votre site web, rien de plus.
Quel plan Squarespace dois-je avoir pour intégrer des iframes ? Vous avez besoin du plan Business, Commerce Basic ou Commerce Advanced. Les intégrations iframe ne sont pas disponibles sur les plans Personal ou Starter.
Le widget ralentit-il mon site web ?
Non. L'<iframe> se charge de manière asynchrone dans un contexte de navigateur séparé et ne bloque pas le chemin de rendu critique de votre page ni n'affecte votre score Core Web Vitals.
Pourquoi l'iframe affiche-t-il une case grise au lieu du widget ? Dans la vue Designer de Webflow et le mode aperçu de Framer, les iframes s'affichent comme des espaces réservés. Publiez le site et consultez l'URL en direct — le widget s'affichera correctement.
Puis-je intégrer le widget dans un e-mail ?
Les clients de messagerie bloquent les iframes pour des raisons de sécurité. À la place, liez directement à l'URL de votre Mur d'Amour dans l'e-mail. Pour les séquences post-achat, un lien vers https://socialproof.reviews/YOUR-SLUG (le Formulaire de collecte) fonctionne généralement mieux de toute façon.
Que se passe-t-il quand j'approuve un nouveau témoignage — dois-je ré-intégrer ? Non. Le widget récupère des données en direct de SocialProof.Reviews à chaque chargement. Approuvez un témoignage dans votre tableau de bord et il apparaît automatiquement dans le widget.
WordPress.com autorise-t-il les iframes ? WordPress.org auto-hébergé : oui, toujours. WordPress.com : les iframes nécessitent le plan Business ou supérieur. Sur les plans inférieurs, le bloc HTML personnalisé supprime la balise iframe.
Pourquoi le widget Kajabi ne s'affiche-t-il pas ?
La cause la plus courante est une URL source HTTP. Assurez-vous que le src de votre iframe commence par https://. Confirmez également que vous avez utilisé le bloc Code personnalisé (pas l'éditeur de texte), car l'éditeur de texte enrichi de Kajabi supprime le HTML brut.
Puis-je intégrer le Formulaire de collecte dans une étape d'entonnoir ClickFunnels ?
Oui. Utilisez l'élément JS/HTML personnalisé (section Misc) dans ClickFunnels 2.0, collez le code iframe du Formulaire de collecte et définissez height à au moins 700px pour éviter que le formulaire n'apparaisse rogné.