Guía Framer

Cómo añadir testimonios en Framer

Framer se usa sobre todo para landings de producto donde cada sección compite por la atención en pocos segundos de scroll. No hay un bloque de testimonios nativo con datos dinámicos, pero el componente Embed cubre exactamente ese hueco: insertas el widget de Plausa como si fuera cualquier otro elemento del canvas.

Plan gratuito hasta 10 testimonios, sin tarjeta.

Por qué importa en una landing hecha con Framer

Las landings de producto suelen tener un único objetivo por página: la prueba social debe reforzar exactamente esa acción, no distraer de ella.

La sección antes del formulario de registro es la que más convierte

Para una startup SaaS en Barcelona, un testimonio justo antes del formulario de prueba gratuita reduce la duda de «¿esto funciona de verdad?» en el momento exacto de decidir.

El portfolio necesita voces externas, no solo imágenes

Un estudio de diseño en Santiago de Chile que muestra proyectos en Framer gana más credibilidad si cada proyecto incluye una frase del cliente, no solo capturas del resultado final.

El modo de vista previa (Preview) sí ejecuta el script

A diferencia de otros editores visuales, en Framer puedes comprobar el widget funcionando directamente en el modo Preview, sin necesidad de publicar primero.

Los efectos de scroll y las animaciones pueden tapar el widget

Si la sección donde insertas el Embed tiene una animación de aparición (fade-in, reveal), asegúrate de que el widget quede dentro del mismo contenedor animado para que no aparezca cortado.

Pasos con el componente Embed

El Embed de Framer es el equivalente directo a un bloque HTML en otros constructores.

  1. 1. Abre el panel de inserción

    En el canvas de Framer, pulsa el icono «+» o usa el atajo de inserción y busca «Embed» entre los componentes disponibles.

  2. 2. Arrastra el componente a la sección

    Coloca el Embed dentro del Stack o Frame donde quieras mostrar el muro de testimonios.

  3. 3. Pega el fragmento de Plausa

    En las propiedades del componente Embed, elige «HTML» como tipo de contenido y pega el código del widget.

  4. 4. Fija el alto del contenedor

    El componente Embed en Framer necesita una altura definida; ajústala manualmente para que el formato carrusel o cuadrícula no quede recortado.

  5. 5. Comprueba en Preview antes de publicar

    Usa el modo Preview de Framer para confirmar que el widget carga correctamente antes de publicar el sitio en producción.

El código a pegar en el Embed

El mismo fragmento funciona en cualquier página o componente reutilizable de Framer.

<div data-plausa="mi-muro" data-variant="carousel" data-lang="es"></div>
<script src="https://getplausa.com/plausa-widget.js" async></script>

En una landing corta, el formato "badge" ocupa menos espacio vertical que el carrusel.

Alternativa en iframe

Si tu landing usa muchas animaciones de Framer Motion en la misma sección y el script interfiere con la transición, el iframe es más estable porque queda aislado del resto del canvas.

<iframe src="https://getplausa.com/embed/mi-muro?variant=badge&lang=es" title="Plausa" style="width:100%;border:0;height:320px" loading="lazy"></iframe>

Así se ve una vez publicado

Ejemplos ilustrativos del formato de testimonio para una landing hecha con Framer.

Migramos todo el equipo en una tarde, y el soporte respondió por chat mientras seguíamos configurando desde Barcelona.
Martí CTO, startup SaaS
Presentamos la propuesta y en dos semanas ya teníamos el primer prototipo navegable, justo lo que necesitábamos para convencer al cliente en Santiago.
Constanza Directora creativa, estudio de diseño
La curva de aprendizaje fue mínima; en un día el equipo ya trabajaba a buen ritmo.
Julián Product manager

Nombres y roles de ejemplo, no clientes reales.

Errores frecuentes en Framer

  • Dejar el componente Embed sin una altura fija, lo que corta el carrusel o la cuadrícula.
  • Colocar el widget dentro de un Stack con overflow oculto sin comprobar que el contenido cabe entero.
  • Confiar solo en el canvas de edición para ver el resultado: revisa siempre el modo Preview antes de publicar.
  • Meter el Embed dentro de un componente con una animación de entrada muy agresiva que lo hace parpadear al cargar.
  • No probar el breakpoint móvil de Framer por separado, ya que el ancho del Embed no se reajusta solo.
  • Sobrecargar la landing con testimonios repetidos en varias secciones cuando uno bien colocado basta.

Preguntas frecuentes

¿Framer tiene un componente nativo de testimonios?

No con datos dinámicos gestionados desde fuera; el componente Embed es la vía soportada para insertar el widget de Plausa.

¿Puedo verlo funcionando sin publicar el sitio?

Sí, el modo Preview de Framer ejecuta el script igual que el sitio publicado, a diferencia de otros editores visuales.

¿Por qué el widget aparece recortado?

El componente Embed necesita una altura fija asignada manualmente; auméntala hasta que el contenido del widget quepa entero.

¿Interfiere con las animaciones de Framer Motion?

No debería si el Embed está en su propio contenedor, pero si comparte una animación de entrada muy marcada con otros elementos, usa el iframe en su lugar.

¿Funciona igual en un componente reutilizable de Framer?

Sí, puedes insertarlo dentro de un componente compartido entre varias páginas del mismo sitio.

Sigue leyendo

Añade testimonios a tu landing Framer

Un componente Embed y tu prueba social encaja con el resto de tu diseño.

Empezar gratis