Framer

Embed Testivora en Framer

Funciona en cualquier plan de Framer. Soporta auto-altura nativa — el wall se adapta a cualquier breakpoint sin restyle.

Lectura · ~2 min
01

Abre tu proyecto

Entra a framer.com → tu workspace → click en el proyecto donde va el wall. Navega a la página específica usando el panel izquierdo (Pages).

02

Inserta un Embed (Code)

Click “Insert” (botón + arriba a la izquierda) → busca “Embed” → selecciona “Embed (Code)”. Framer crea un bloque vacío en el canvas.

Click el bloque y en el panel derecho aparece un campo HTML. Pega esto:

html
<div data-tv-wall="TU-SLUG"
     data-layout="masonry"
     data-theme="auto"
     data-color="ea580c"></div>
<script async src="https://testivora.com/embed.js"></script>
Reemplaza TU-SLUG con el slug de tu space (lo encuentras en tu admin → Distribución → URL del recolector).
03

Ajusta el tamaño

Selecciona el bloque Embed → en el panel derecho cambia Width a Fill (100% del padre). Height déjalo en Auto — el wall reporta su altura real al instante.

Auto-altura nativa
Framer entiende el postMessage que mandamos desde el iframe — ajusta la altura automáticamente conforme cargan los testimonios. Otros embeds requieren altura fija; el nuestro no.
04

Publica

Click “Publish” arriba a la derecha (selecciona framer.app para staging o tu dominio custom para producción). El wall queda live en segundos.

05

Si algo no funciona

Framer es muy permisivo con embeds. Casos raros:

  • El bloque Embed (Code) no existe: Estás usando un template antiguo o Framer Sites Free. La feature Embed (Code) está disponible desde plan Mini. Confirma tu plan en Settings → Workspace.
  • El wall no se ve en preview: Framer ejecuta scripts en preview pero algunos browsers bloquean iframes en localhost. Publica el sitio (botón Publish → framer.app) y abre la URL real para confirmar.
Listo. Ya tienes tu wall integrado.

Si necesitas cambiar el layout, color o tema, ajústalo desde tu admin — los cambios se reflejan al instante sin tocar el código.