Integración

Widget de Probador Virtual

Integra el probador virtual de OutfitAI en cualquier página de tu tienda online mediante un <iframe>. Los clientes suben su foto y ven cómo les quedan las prendas sin salir de tu sitio.

Configuración

URL base

Cada probador tiene su propia URL de widget basada en su slug único. El slug lo asigna el administrador de OutfitAI al crear el probador.

URL base

https://outfit.tekus.co/iframe/{STORE_SLUG}

Referencia

Parámetros de URL

Los parámetros se pasan como query strings en la URL del iframe.

ParámetroTipoReq.Descripción

garmentUrlstringRequerido

URL HTTPS de la imagen del producto. Se puede repetir hasta 5 veces para enviar varias prendas en una sola sesión (look completo).

Debe ser una URL HTTPS pública. No se permiten IPs privadas.

garmentNamestringOpcional

Nombre del producto. Mejora la calidad de la generación de IA al dar contexto sobre la prenda.

Se corresponde por posición con cada garmentUrl.

productUrlstringOpcional

URL de la página del producto en tu tienda. Permite al widget enlazar de vuelta al producto tras la prueba virtual.

Si se omite, se usa el Referer de la petición como fallback.

✦

Múltiples prendas — look completo

Repite el parámetro garmentUrl en la URL para enviar varias prendas. El orden de garmentName debe coincidir con el de los garmentUrl.

Ejemplos

URLs de ejemplo

Prenda única

URL

https://outfit.tekus.co/iframe/mi-tienda?garmentUrl=https://mi-tienda.com/camisa.jpg&garmentName=Camisa+manga+larga+azul

Look completo

URL

https://outfit.tekus.co/iframe/mi-tienda?garmentUrl=https://mi-tienda.com/camisa.jpg&garmentName=Camisa+azul&garmentUrl=https://mi-tienda.com/pantalon.jpg&garmentName=Pantalon+negro

Código

Snippet de integración

Pega este código en tu página de producto, sustituyendo la URL de ejemplo por la URL real de la imagen del producto.

HTML

<iframe
  src="https://outfit.tekus.co/iframe/mi-tienda?garmentUrl=https://mi-tienda.com/camisa.jpg&garmentName=Camisa+manga+larga+azul"
  width="420"
  height="720"
  frameborder="0"
  allow="camera"
  referrerpolicy="origin"
  style="border:none; border-radius:12px;"
></iframe>

width: 420px recomendadoheight: 720px recomendadoallow="camera": necesario para captura de fotoreferrerpolicy="origin": requerido para la restricción por dominio

Técnico

Notas y restricciones

•Las URLs de imagen deben ser HTTPS. URLs con HTTP o IPs privadas son rechazadas.
•El widget requiere permiso de cámara del navegador para la captura de foto (también acepta subir imagen desde galería).
•El widget funciona sin que el cliente necesite crear cuenta ni iniciar sesión.
•Las generaciones están sujetas al límite de uso del probador. Contacta a OutfitAI para ajustar el límite.
•Restricción por dominio (obligatoria): el widget solo carga si el encabezado Referer coincide con el dominio autorizado configurado en el panel de integración. Sin esta configuración el widget no funcionará. Puedes autorizar varios dominios separados por coma (ej: mi-tienda.com, staging.mi-tienda.com). Se aceptan subdominios (sub.mi-tienda.com), puertos (localhost:3000) y www. se normaliza automáticamente.
•Incluye referrerpolicy="origin" en el <iframe> (ya incluido en el snippet de arriba). Evita referrerpolicy="no-referrer", que impide el envío del encabezado y bloqueará el widget.

OutfitAI — Documentación de integración iframe

← Volver al inicio