Instalar el widget en tu tienda, con tu propia clave

La herramienta se instala en tu servidor y funciona con tu clave de fal.ai: cada video se genera y se cobra en tu cuenta, con tus productos y tus límites. Nadie pasa por nuestro servidor. Cuatro pasos.

0. Descarga el código y arráncalo (un comando)

Descarga widget-video.zip (código completo, sin claves), descomprímelo en tu servidor y:

cp .env.example .env        # escribe FAL_KEY=tu-clave (https://fal.ai/dashboard/keys)
docker compose up -d --build

Eso levanta un solo servicio (Node, sin frameworks ni bases de datos) detrás de Caddy. Para HTTPS automático pon SITIO=widget.tu-dominio.com en el .env y apunta el DNS a tu servidor. Sin Docker: npm install y npm start (Node 20+). Si tu servidor ya tiene otro proxy en 80/443, usa docker-compose.traefik.yml o cambia PUERTO_HTTP/PUERTO_HTTPS.

1. Configura tus límites y tu presupuesto

Todo va en el .env: LIMITE_IP_DIA (videos nuevos por visitante y día, 3 por defecto), LIMITE_TOTAL (tope global, 40), RESOLUCION (480P o 768P) y DURACION (5 a 15 s). Al superar un límite el widget muestra un video ya generado del mismo producto; nunca falla. Pon además un límite de gasto en tu panel de fal.

2. Registra tu tienda

Crea tiendas/<id-tienda>.json (el servidor lo lee al instante, sin reiniciar). El id solo admite minúsculas, dígitos y guiones.

{
  "nombre": "Velas del Bosque",
  "pregunta": "¿En qué rincón de tu casa encenderías esta vela?",
  "placeholder": "Ej.: en la mesita de noche, junto a la bañera, en la terraza…",
  "boton": "Ver mi rincón",
  "escena": "A hand picks up the candle jar and the surroundings turn into the place described in Spanish here: {respuesta}. The hand sets the candle back down exactly where it was and lets go; the flame flickers softly.",
  "productos": {
    "lavanda": {
      "nombre": "Vela de lavanda 200 g",
      "descripcion": "lit lavender-colored soy candle in a glass jar",
      "imagen": "velas-lavanda.jpg"
    }
  }
}

escena es la única parte del prompt que escribe la tienda. Debe contener {respuesta}, el hueco donde va el texto del visitante, presentado como «descrito en español» y sin comillas (entre comillas, el modelo a veces lo dibuja como un letrero). Describe qué hace lo que entra en escena con el producto (lo muerde, lo moja, lo sostiene…) y termina devolviéndolo a su sitio. El servidor añade delante la orden de cámara fija, producto fiel y «nada de texto ni letreros», y detrás el cierre fotorrealista.
descripcion describe el producto en inglés (el modelo lo entiende mejor) y se usa para decirle al modelo qué es lo que no debe cambiar. Cuenta exactamente lo que se ve en la foto: cantidad, vista y estado («single white sneaker seen from the side», «lit candle in a glass jar»). Con «pair of sneakers» y una foto de un solo zapato, el modelo añadió un segundo zapato gigante.
Las respuestas de precalentar (y la pregunta) deben pedir acciones sobre el producto en su sitio (una mano ajusta los cordones, alguien la riega, un perro lo muerde), no acciones que se lo lleven («se las pone y sale a correr»). Si un video sale incoherente, retíralo sin borrarlo: node scripts/curar.js --ocultar <clave> --motivo "…".
Opcional: "precalentar": ["respuesta 1", "respuesta 2"] para generar de antemano las respuestas más probables con npm run precalentar: cuantas más haya en caché, menos gasto y más visitantes ven video al instante.

Copia tu foto a productos/ con el nombre indicado en imagen (JPG, PNG o WebP; recomendable 16:9, producto centrado y fondo limpio: el video conserva el encuadre). Es la misma foto que muestras en la ficha: el video empieza y termina en ella. Se sube una sola vez al almacenamiento de fal y se reutiliza.

3. Pega una línea en la ficha de producto

<script src="https://TU-SERVIDOR/widget.js" data-tienda="velas" data-producto="lavanda" data-imagen="#foto-producto"></script>

La foto que ya tienes en la ficha se convierte en el video, en su sitio. data-imagen apunta a esa <img>; si lo omites, el widget usa la imagen más cercana a la etiqueta <script>. Mientras se genera no aparece ningún recuadro ni texto: la foto «respira» y, cuando el video está descargado por completo, se funde sobre ella sin corte (empieza y termina en la propia foto, así que también hace bucle limpio). La pregunta y el botón se dibujan justo después del <script>; con data-contenedor="#mi-div" los colocas donde quieras. Funciona desde cualquier dominio (CORS abierto) y aísla sus estilos con Shadow DOM.

Comprobar

https://TU-SERVIDOR/api/salud debe responder "fal": true; /api/config?tienda=velas&producto=lavanda devuelve la pregunta y la foto.
El primer visitante que escriba una respuesta generará el video; el segundo con la misma respuesta lo recibirá desde caché. Tu panel: https://TU-SERVIDOR/metricas.

Qué cuesta

Un video de 5 s a 768P cuesta $0,10 en tu cuenta de fal hasta el 7 de septiembre de 2026 y $0,40 después (tarifa publicada en la página del modelo). La caché hace que cada respuesta se pague una sola vez. Este servidor de demostración tiene su propia clave y su propio cupo; no consume el tuyo.