SocialProof.Reviews ofrece a cada espacio de trabajo cuatro widgets de testimonios incrustables: un Muro de Amor, Carrusel, Insignia de Calificación y Formulario de Recopilación. Cada uno es un <iframe> ligero que carga tus testimonios aprobados en vivo, usa los colores de tu marca y logotipo, y se actualiza automáticamente cuando apruebas nuevas reseñas.
Esta guía cubre:
| Widget | Tamaño de inserción | Mejor posicionamiento |
|---|---|---|
| Muro de Amor | Ancho completo, 800px+ de alto | Página dedicada /testimonios o /reseñas |
| Carrusel | Ancho completo, 280–360px de alto | Hero de página de inicio, página de precios, página de destino |
| Insignia | 220×48px | Barra de navegación, pie de página, junto a planes de precios |
| Formulario de Recopilación | Ancho completo, 700px de alto | Página posterior a la compra, página de agradecimiento, panel de control |
Los cuatro widgets se sirven sobre HTTPS, se cargan de forma asincrónica (sin impacto en los Core Web Vitals) y se actualizan automáticamente cuando apruebas nuevos testimonios — sin necesidad de volver a incrustar.
<iframe> — es único para tu espacio de trabajoUna cuadrícula de mampostería completa con todos los testimonios aprobados. Úsalo en una página dedicada de reseñas o testimonios.
Incluye: nombre del reseñador, foto, empresa, cargo, calificación de estrellas, texto de la reseña, fotos, miniaturas de video, barra de filtros, colores de marca y un CTA opcional "Dejar una reseña".
<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 deslizador de testimonios de rotación automática. Ideal para páginas de inicio, páginas de precios y páginas de destino donde el espacio es limitado.
Incluye: diapositivas de testimonios en rotación, nombre del reseñador, foto, empresa, calificación de estrellas, texto de la reseña, puntos y flechas de navegación, colores de marca.
<iframe
src="https://socialproof.reviews/YOUR-SLUG/widgets/carousel"
width="100%"
height="280px"
frameborder="0"
style="border:none; width:100%;"
title="Customer Reviews"
></iframe>
Consejo de altura: Si tus testimonios son largos, aumenta a 320–360px. El valor predeterminado de 280px cabe en una sola tarjeta.
Consejos de posicionamiento:
Una pastilla de confianza compacta que muestra tu calificación de estrellas agregada y el número de reseñas. Diseñada para barras de navegación, pies de página y junto a planes de precios.
Incluye: calificación de estrellas agregada (p. ej., ★ 4,9), número total de reseñas, acento de color de marca, enlace a tu Muro de Amor completo al hacer clic.
<iframe
src="https://socialproof.reviews/YOUR-SLUG/widgets/badge"
width="220px"
height="48px"
frameborder="0"
style="border:none;"
title="Rating Badge"
></iframe>
Consejos de posicionamiento:
Incrusta tu formulario de envío de testimonios directamente en tu sitio — sin redirigir a una página separada.
Incluye: flujo de múltiples pasos (calificar → sobre ti → reseña → video opcional), colores de marca y logotipo, validación de correo electrónico, carga de fotos y visualización opcional de recompensa después del envío.
<iframe
src="https://socialproof.reviews/YOUR-SLUG"
width="100%"
height="700px"
frameborder="0"
style="border:none; width:100%;"
title="Leave a Review"
></iframe>
Mejores posicionamientos:
Los widgets de SocialProof.Reviews usan una etiqueta HTML estándar <iframe> y funcionan en todas las principales plataformas de sitios web. La tabla a continuación muestra cómo agregar un elemento de HTML personalizado o inserción en cada plataforma.
| Plataforma | Elemento a usar |
|---|---|
| WordPress | Bloque HTML personalizado |
| Webflow | Componente Embed (Avanzado) |
| Wix | Embed HTML (Embed y Social) |
| Squarespace | Bloque de Código |
| Shopify | Editar Código (Temas) |
| Kajabi | Bloque de Código Personalizado |
| ClickFunnels 2.0 | Elemento JS/HTML personalizado (Misc) |
| Framer | Componente Embed (Utilidad) |
| Systeme.io | Elemento HTML sin procesar (Avanzado) |
| React / Next.js | Elemento JSX <iframe> |
| HTML personalizado | Pega directamente en tu HTML |
Método recomendado — Bloque HTML personalizado (Gutenberg):
<iframe> en el bloqueAlternativa — Constructores de páginas:
Nota: Los planes Gratis y Personal de WordPress.com restringen las etiquetas
<iframe>. Necesitas el plan Business o superior, o usa WordPress.org autohospedado.
<iframe>Nota: El contenido incrustado se muestra como un marcador gris en el Diseñador. Se renderiza correctamente en el sitio publicado.
<iframe>Nota para Wix Studio: Usa el icono + para agregar un elemento HTML iFrame — los pasos son los mismos.
HTTPS requerido: La URL
srcen tu iframe debe usarhttps://, nohttp://.
<iframe>Requisito de plan: La compatibilidad con iframes requiere el plan Business, Commerce o superior de Squarespace. La URL
srcdebe usar HTTPS.
page.liquid)<iframe> en la sección apropiada del HTMLAlternativa — Editor de páginas de Shopify:
<>)<iframe> en el campo CódigoPara centrar el widget, envuélvelo en 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>
Nota: Si estás incrustando un video testimonial por separado, usa el Bloque de Video de Kajabi para mejor rendimiento. Para el muro o carrusel de SocialProof.Reviews, el bloque de Código Personalizado es la opción correcta.
<iframe> y cierra el editorSi el iframe aparece demasiado pequeño, agrega dimensiones explícitas:
<iframe
src="https://socialproof.reviews/YOUR-SLUG/widgets/carousel"
style="width:100%; height:320px; border:none;"
frameborder="0"
title="Customer Reviews"
></iframe>
<iframe> completo, oTamaño en móvil: Ajusta el ancho y la altura del componente Embed manualmente para garantizar la correcta visualización en pantallas más pequeñas.
<iframe> y haz clic en GuardarTamaño: Establece
width="100%"y una altura fija (p. ej.,height="300px") directamente en la etiqueta iframe para un diseño predecible.
Pega el widget como un elemento JSX <iframe>. Nota que frameborder se convierte en frameBorder y style toma un objeto 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>
);
}
Para el Muro de Amor en 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>
);
}
Pega el iframe directamente en cualquier archivo HTML o plantilla donde quieras que aparezca el widget:
<!-- Widget Carrusel -->
<iframe
src="https://socialproof.reviews/YOUR-SLUG/widgets/carousel"
width="100%"
height="280px"
frameborder="0"
style="border:none; width:100%;"
title="Customer Reviews"
></iframe>
Reemplaza YOUR-SLUG con el slug de tu espacio de trabajo. El widget se carga de forma asincrónica y no bloquea el renderizado de la página.
Todos los widgets heredan automáticamente el branding de tu espacio de trabajo. Para cambiar colores, logotipo, títulos o alternar secciones:
Consulta la guía de Branding para obtener detalles completos.
Todos los widgets de SocialProof.Reviews:
width="100%"¿Necesito un desarrollador para incrustar los widgets? No. Todas las plataformas listadas admiten pegar HTML sin escribir código. Solo necesitas acceso al editor de páginas de tu sitio web, nada más.
¿Qué plan de Squarespace necesito para incrustar iframes? Necesitas el plan Business, Commerce Basic o Commerce Advanced. Los embeds de iframe no están disponibles en los planes Personal o Starter.
¿El widget ralentiza mi sitio web?
No. El <iframe> se carga de forma asincrónica en un contexto de navegador separado y no bloquea la ruta de renderizado crítica de tu página ni afecta tu puntuación de Core Web Vitals.
¿Por qué el iframe muestra un cuadro gris en lugar del widget? En la vista de Diseñador de Webflow y en el modo de vista previa de Framer, los iframes se renderizan como marcadores. Publica el sitio y visualiza la URL en vivo — el widget se mostrará correctamente.
¿Puedo incrustar el widget en un correo electrónico?
Los clientes de correo electrónico bloquean los iframes por seguridad. En su lugar, enlaza directamente a la URL de tu Muro de Amor en el correo. Para secuencias post-compra, enlazar a https://socialproof.reviews/YOUR-SLUG (el Formulario de Recopilación) generalmente funciona mejor.
¿Qué sucede cuando apruebo un nuevo testimonio — necesito volver a incrustar? No. El widget obtiene datos en vivo de SocialProof.Reviews cada vez que se carga. Aprueba un testimonio en tu panel y aparece en el widget automáticamente.
¿WordPress.com permite iframes? WordPress.org autohospedado: sí, siempre. WordPress.com: los iframes requieren el plan Business o superior. En planes inferiores, el bloque de HTML personalizado elimina la etiqueta iframe.
¿Por qué el widget de Kajabi no se muestra?
La causa más común es una URL de origen HTTP. Asegúrate de que el src de tu iframe comience con https://. También confirma que usaste el bloque de Código Personalizado (no el editor de texto), ya que el editor de texto enriquecido en Kajabi elimina el HTML sin procesar.
¿Puedo incrustar el Formulario de Recopilación dentro de un paso de embudo de ClickFunnels?
Sí. Usa el elemento JS/HTML personalizado (sección Misc) en ClickFunnels 2.0, pega el código de iframe del Formulario de Recopilación y establece height en al menos 700px para evitar que el formulario aparezca recortado.