Embed Testivora en cualquier sitio

Para Wix, Carrd, Notion, Bubble, Ghost, Hugo, Astro, sitios hechos a mano — cualquier cosa que acepte HTML. 1 minuto.

Lectura · ~1 min

Tienes dos opciones

Opción A (script tag) es la recomendada — auto-altura built-in, 1 línea, funciona en 99% de los sitios. Opción B (iframe directo) es para CMS muy estrictos que no aceptan scripts externos.

Opción A — Script tag (recomendada)

Pega esto en cualquier bloque HTML de tu sitio. Funciona en Wix HTML embed, Carrd embed code, Notion /embed, Ghost HTML card, Hugo/Astro shortcodes, etc.

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).

El script se carga una vez y descubre automáticamente todos los <div data-tv-wall> de la página. Puedes pegar varios divs (cada uno con un slug distinto) y un solo <script> los maneja todos.

Opción B — Iframe directo

Si tu CMS bloquea scripts externos (algunas builders restrictivas) o quieres self-host el código de auto-resize, usa esta versión:

html

<iframe id="tv-wall-TU-SLUG"
  src="https://testivora.com/embed/wall/TU-SLUG?layout=masonry&theme=auto&color=ea580c"
  title="Testimonios"
  loading="lazy"
  style="border:0;width:100%;min-height:600px;display:block"></iframe>
<script>
(function(){
  var iframe = document.getElementById('tv-wall-TU-SLUG');
  if (!iframe) return;
  window.addEventListener('message', function(e){
    if (e.source !== iframe.contentWindow) return;
    var d = e.data;
    if (d && d.type === 'tv-height' && d.slug === 'TU-SLUG') {
      iframe.style.height = d.height + 'px';
    }
  });
})();
</script>

Reemplaza ambas instancias de TU-SLUG. El script inline maneja la auto-altura sin depender de embed.js.

Si tu CMS también minimiza scripts inline, deja el iframe sin el bloque <script> y el wall tendrá altura fija de 600px (puedes ajustar min-height en el style).

Personaliza con data-* attributes

Cambia los atributos para ajustar layout, color, tema, o filtrar por tag:

data-tv-wall → el slug único de tu space (requerido).
data-layout → masonry, grid, carousel, single, badge
data-theme → auto, light, dark
data-color → color de acento en hex sin el # (ej: ea580c).
data-tag → filtrar por una tag específica (opcional, ej: 'fitness').

Casos comunes por plataforma

Si no encontraste tu plataforma con guía propia, pistas rápidas:

Notion: Notion no soporta scripts arbitrarios. Usa /embed con la URL directa: https://testivora.com/embed/wall/TU-SLUG. Sin auto-altura — define una altura razonable arrastrando el bloque.
Wix: Add → Embed Code → 'Embed HTML' → pega el snippet de Opción A. Wix puede agregar wrapper iframe extra; usar B si la altura no se ajusta.
Carrd: Solo planes Pro Standard+ soportan embed. Add → Section → Embed → Code → pega Opción A. Configura 'min-height' en el bloque a 600px para evitar pop.

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.

Abrir mi admin →Ver otras plataformas

Opción A — Script tag (recomendada)

Pega esto en cualquier bloque HTML de tu sitio. Funciona en Wix HTML embed, Carrd embed code, Notion /embed, Ghost HTML card, Hugo/Astro shortcodes, etc.

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).

El script se carga una vez y descubre automáticamente todos los <div data-tv-wall> de la página. Puedes pegar varios divs (cada uno con un slug distinto) y un solo <script> los maneja todos.

Opción B — Iframe directo

Si tu CMS bloquea scripts externos (algunas builders restrictivas) o quieres self-host el código de auto-resize, usa esta versión:

html

<iframe id="tv-wall-TU-SLUG"
  src="https://testivora.com/embed/wall/TU-SLUG?layout=masonry&theme=auto&color=ea580c"
  title="Testimonios"
  loading="lazy"
  style="border:0;width:100%;min-height:600px;display:block"></iframe>
<script>
(function(){
  var iframe = document.getElementById('tv-wall-TU-SLUG');
  if (!iframe) return;
  window.addEventListener('message', function(e){
    if (e.source !== iframe.contentWindow) return;
    var d = e.data;
    if (d && d.type === 'tv-height' && d.slug === 'TU-SLUG') {
      iframe.style.height = d.height + 'px';
    }
  });
})();
</script>

Reemplaza ambas instancias de TU-SLUG. El script inline maneja la auto-altura sin depender de embed.js.

Si tu CMS también minimiza scripts inline, deja el iframe sin el bloque <script> y el wall tendrá altura fija de 600px (puedes ajustar min-height en el style).

Personaliza con data-* attributes

Cambia los atributos para ajustar layout, color, tema, o filtrar por tag:

data-tv-wall → el slug único de tu space (requerido).
data-layout → masonry, grid, carousel, single, badge
data-theme → auto, light, dark
data-color → color de acento en hex sin el # (ej: ea580c).
data-tag → filtrar por una tag específica (opcional, ej: 'fitness').

Casos comunes por plataforma

Si no encontraste tu plataforma con guía propia, pistas rápidas:

Notion: Notion no soporta scripts arbitrarios. Usa /embed con la URL directa: https://testivora.com/embed/wall/TU-SLUG. Sin auto-altura — define una altura razonable arrastrando el bloque.
Wix: Add → Embed Code → 'Embed HTML' → pega el snippet de Opción A. Wix puede agregar wrapper iframe extra; usar B si la altura no se ajusta.
Carrd: Solo planes Pro Standard+ soportan embed. Add → Section → Embed → Code → pega Opción A. Configura 'min-height' en el bloque a 600px para evitar pop.