Instala FIGI en VTEX

En VTEX, el script se agrega una vez en el tema y el asset se declara como un bloque de HTML en la plantilla donde quieres mostrarlo. Esta guía es para el equipo de desarrollo que mantiene la tienda.

Antes de empezar

• Copia el código del asset desde FIGI (Activación digital → Despliegue). Tiene un div y un script, como se explica en Instala los assets de FIGI en tu sitio.
• Pídele a un administrador de FIGI que agregue en Sitios autorizados el dominio público de la tienda y, si los usas para revisar, los dominios de tus workspaces (por ejemplo https://pruebas--tutienda.myvtex.com).

VTEX IO (Store Framework)

1. Agrega el script una sola vez

   Agrega el script de FIGI en el bloque de scripts de tu store-theme, para que cargue en todas las páginas:

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

   Usa la línea exacta que copiaste de FIGI.

2. Declara el bloque con el slider

   Declara un bloque html.raw con el div del asset:

   <div data-figi-feed="ID-DE-TU-SLIDER"></div>

3. Referéncialo en la plantilla

   Agrega ese bloque en la plantilla donde quieres que se vea (por ejemplo, store.home o store.product), publica el tema en un workspace de pruebas y revísalo antes de promoverlo.

4. Monta los sliders al navegar

   VTEX IO cambia de página sin recargar, así que el script solo encuentra los assets de la primera página que se abre. Después de cada cambio de ruta, monta los que falten:

   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"));
   });

VTEX CMS (Portal)

1. En el CMS, abre la plantilla HTML de la página (por ejemplo, la de producto o la del inicio).
2. Pega el script una vez, justo antes de </body>.
3. Pega el div del asset en el lugar de la plantilla donde quieres que aparezca.
4. Guarda la plantilla y revisa la página publicada.

Verifica

1. Abre la página y recárgala. El asset aparece en unos segundos.
2. Con las herramientas de desarrollo (F12), el div tiene que tener data-figi-state="ready".
3. Navega a otra página y vuelve: el asset tiene que aparecer de nuevo (si no, revisa el paso de montaje).
4. En la pestaña Red, las solicitudes a /api/public/events tienen que responder 202.

Problemas comunes en VTEX

• Aparece al recargar pero no al navegar: falta montar los assets después de cada cambio de ruta.
• Funciona en el workspace pero no cuenta visitas: el dominio del workspace o el público no está en Sitios autorizados.
• La CSP bloquea el script: agrega los dominios de FIGI a la política de seguridad, como se indica en la guía general.

Para otros problemas, mira Problemas comunes en la guía general.