Instala FIGI en WooCommerce

Cómo cargar el script en WordPress, mostrar el asset en páginas y productos, verificarlo y evitar problemas con la caché.

Guía pública: puedes compartirla con tu equipo técnico.

En WooCommerce, el script se carga una vez en el pie del sitio y el asset se agrega con un bloque de HTML personalizado o desde el tema. Las dos opciones de abajo sirven: elige la que uses habitualmente.

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 tu dominio en Sitios autorizados, por ejemplo https://www.tu-tienda.cl.

1. Carga el script en todo el sitio

Opción A: con un plugin de fragmentos de código

Si usas un plugin para insertar código en el encabezado y el pie (por ejemplo, uno de “headers and footers” o de snippets), pega la línea del script en la sección del pie (footer) y guarda:

Código HTML

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

Opción B: desde el tema hijo

Si trabajas con un tema hijo, agrega esto a su functions.php (reemplaza la etiqueta por la que copiaste de FIGI):

Código PHP

add_action('wp_footer', function () {
  echo '<script src="https://figi.video/embed/v1/figi.js" data-figi-key="TU-CLAVE" async></script>';
});

No edites el tema principal: se pierde con cada actualización.

2. Muestra el asset

En una página o entrada

En el editor de bloques, agrega un bloque HTML personalizado donde quieres el asset y pega el div:

Código HTML

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

Actualiza la página.

En todas las páginas de producto

Desde el tema hijo, puedes mostrarlo debajo del resumen de cada producto:

Código PHP

add_action('woocommerce_after_single_product_summary', function () {
  echo '<div data-figi-feed="ID-DE-TU-SLIDER"></div>';
}, 15);

3. Purga la caché

Si usas un plugin de caché o una CDN, púrgala después de agregar el código. Si el plugin combina, minifica o retrasa la ejecución de JavaScript, agrega figi.js a sus exclusiones.

Verifica

Abre la página en una ventana privada (para evitar la caché de tu sesión) y recárgala.
Con las herramientas de desarrollo (F12), el div tiene que tener data-figi-state="ready".
En la pestaña Red, las solicitudes a /api/public/events tienen que responder 202.

Problemas comunes en WooCommerce

Aparece recién al mover el mouse o hacer scroll: un plugin de optimización está retrasando el JavaScript. Excluye figi.js.
Sigue sin aparecer después de pegarlo: la página está en caché. Púrgala.
El div desaparece al guardar: algunos editores limpian el HTML. Usa el bloque HTML personalizado, no un bloque de párrafo.
La analítica está en cero: autoriza el dominio con y sin www si tu sitio responde de las dos formas.

Para registrar las ventas en la página de pedido recibido, mira Registra las ventas en la guía general.