Instala los assets de FIGI en tu sitio

Los assets de FIGI se instalan con dos piezas de HTML: un div que marca dónde aparece el asset y un script que lo carga. El mismo código funciona en cualquier plataforma; lo único que cambia es dónde lo pegas.

Si ya sabes en qué plataforma está tu tienda, ve directo a su guía: Shopify, VTEX, Tiendanube, WooCommerce o HTML.

Antes de empezar

• El asset tiene que estar publicado en FIGI. Un asset en borrador no se muestra.
• Necesitas el código del asset. Lo copia alguien con acceso a FIGI desde Activación digital → Despliegue, o desde la ventana que aparece al publicar en Personalización.
• Para que se cuenten las visitas, un administrador de la empresa en FIGI tiene que agregar tu dominio en Sitios autorizados (más abajo).

1. Copia el código

En FIGI, entra a Activación digital → Despliegue. La tarjeta del asset muestra el código con el botón Copiar. Si la empresa tiene varios assets, usa Ver código en la lista de Assets digitales para abrir el de cada uno.

El código tiene esta forma (este es solo un ejemplo: copia siempre el tuyo desde FIGI):

<div data-figi-feed="ID-DE-TU-SLIDER"></div>
<script src="https://figi.video/embed/v1/figi.js" data-figi-key="TU-CLAVE" async></script>

• data-figi-feed identifica el asset. Pon este div en el lugar exacto donde quieres que aparezca.
• El script carga FIGI. data-figi-key es la clave pública de tu empresa: asocia las visitas y las ventas a tu cuenta. No es secreta, pero no la cambies.

2. Pega el código

• Pega el script una vez, idealmente justo antes del cierre </body> de la plantilla general del sitio, para que esté en todas las páginas.
• Pega el div en la plantilla o la página donde quieres el asset: el inicio, la página de producto, una landing de campaña, etc.

Cada plataforma tiene su forma de hacerlo; las guías de Shopify, VTEX, Tiendanube, WooCommerce y HTML te llevan paso a paso.

Cuando publicas una nueva versión del asset en FIGI, tu sitio la muestra sola: no hace falta volver a pegar el código.

3. Autoriza tu dominio

FIGI solo cuenta las visitas, los clics y las ventas que llegan desde los Sitios autorizados de la empresa (y desde sus propias páginas). Un administrador de la empresa los agrega en Activación digital → Despliegue → Sitios autorizados:

1. Escribe la dirección del sitio

   En Agregar sitio escribe el dominio con https:// y sin rutas, por ejemplo https://www.tu-tienda.cl.

2. Agrégalo

   Pulsa Agregar. Se guarda en el momento.

• Cada variante cuenta por separado: si tu sitio responde con y sin www, o en varios subdominios, agrega cada uno.
• No se aceptan comodines (*) ni rutas (/tienda).
• Puedes cargar hasta 20 sitios.

4. Verifica la instalación

1. Prueba el slider en FIGI

   En Activación digital → Despliegue, la Página de prueba carga el asset con el mismo código que va a tu sitio. Si ahí no aparece, el problema está en el asset (por ejemplo, no está publicado o no tiene videos listos), no en tu sitio.

2. Abre tu página

   Recarga la página donde pegaste el código. El asset tarda un instante en aparecer porque el script carga de forma asíncrona.

3. Revisa el estado del div

   Abre las herramientas de desarrollo del navegador (F12) y busca el div con data-figi-feed. FIGI le agrega data-figi-state:

   • ready: el asset cargó bien.
   • loading: todavía está cargando.
   • unavailable: no se pudo mostrar. El atributo data-figi-reason dice por qué (ver Problemas comunes).

   Si el div no tiene data-figi-state, el script no llegó a ejecutarse en esa página.

4. Revisa que se registren las visitas

   En la pestaña Red, filtra por events. Las solicitudes a /api/public/events tienen que responder 202. Si responden 403, tu dominio no está en Sitios autorizados.

Registra las ventas

Para que la analítica muestre Ventas, GMV y la venta atribuida a cada video, tu sitio tiene que avisarle a FIGI cuando se confirma una compra. En la página de confirmación del pedido, carga el script (con su data-figi-key) y llama a figi.purchase con el número de orden:

<script src="https://figi.video/embed/v1/figi.js" data-figi-key="TU-CLAVE" async></script>
<script>
  window.addEventListener("load", function () {
    if (window.figi) {
      window.figi.purchase({ orderId: "1001", revenue: 25990, currency: "CLP" });
    }
  });
</script>

• orderId es obligatorio. Cada orden se cuenta una sola vez, aunque la página se recargue.
• revenue es el monto total y currency el código de la moneda (CLP, PEN, MXN, USD…).
• En esa página no hace falta ningún asset; por eso ahí la data-figi-key es indispensable.

Si tu plataforma no permite scripts propios en la página de confirmación, escríbenos y vemos la mejor alternativa.

Sitios que cambian de página sin recargar

En sitios hechos como aplicación de una sola página (React, Vue, VTEX IO, temas “headless”), FIGI monta los assets que encuentra al cargar la página. Si el div aparece después, por ejemplo al navegar a otra sección, móntalo así después de cada cambio de ruta:

document.querySelectorAll("[data-figi-feed]:not([data-figi-state])").forEach(function (element) {
  element.setAttribute("data-figi-state", "loading");
  window.figi.mount(element, element.getAttribute("data-figi-feed"));
});

Política de seguridad de contenido (CSP)

Si tu sitio usa una CSP estricta, permite:

• script-src: el dominio desde el que carga figi.js (el del atributo src de tu código) y https://cdn.jsdelivr.net (para videos en streaming).
• connect-src: el dominio de la API de FIGI (lo ves en la pestaña Red: las solicitudes a /api/public/).
• frame-src: https://www.youtube-nocookie.com, https://www.tiktok.com y las demás plataformas de tus videos.
• img-src y media-src: los dominios de tus videos e imágenes, y blob:.
• style-src: 'unsafe-inline' y https://fonts.googleapis.com; font-src: https://fonts.gstatic.com.

Problemas comunes

No aparece nada

• Revisa que el script esté en la página (búscalo en el código fuente) y que no esté dos veces.
• Revisa data-figi-reason en el div:
  • not-found: el asset no está publicado, se despublicó o el ID del div está mal copiado.
  • timeout o network: el navegador no pudo llegar a FIGI. Suele ser una CSP, un bloqueador o un problema de red.
  • http- seguido de un número: FIGI respondió con un error; vuelve a intentarlo y, si se repite, escríbenos.
• Si el div aparece después de cargar la página, mira Sitios que cambian de página sin recargar.
• Si usas un plugin que optimiza o retrasa JavaScript, excluye figi.js.

Aparece “Este feed todavía no tiene videos”

El asset está publicado pero no tiene videos en estado Listo. Agrégalos en Personalización y vuelve a publicar.

La analítica está en cero

Agrega tu dominio en Sitios autorizados (con y sin www si corresponde) y revisa en la pestaña Red que los eventos respondan 202.

Veo una versión vieja del asset

Los cambios se ven cuando se publican en Personalización; guardar el borrador no alcanza. Si usas una caché de página, púrgala.

Si no puedes agregar scripts

En Activación digital → Despliegue también está la tarjeta Feed en un iframe, para plataformas que no permiten inyectar scripts. El iframe ocupa el 100 % del alto de su contenedor, así que define una altura para el elemento que lo contiene.