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.

tokenstringOpcional*

Token HMAC-SHA256 generado por tu servidor. Requerido si la tienda tiene activada la validación por token.

Ver sección Autenticación por token más abajo.

✦

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 si usas 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 (opcional): desde el panel de integración puedes configurar uno o varios dominios autorizados separados por coma (ej: mi-tienda.com, staging.mi-tienda.com). Una vez activo, el widget solo carga si el encabezado Referer coincide con alguno de los dominios. Se aceptan subdominios (sub.mi-tienda.com), puertos (localhost:3000) y www. se normaliza automáticamente.
•Si usas restricción por dominio, 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.

Seguridad avanzada

Autenticación por token

Cuando activas la validación por token en el panel de integración, cada solicitud al widget debe incluir un parámetro ?token= firmado con tu secreto compartido. El token expira en 10 minutos y está atado a tu tienda — un token válido autoriza cualquier prenda de esa sesión.

Opción A — Generar el token en tu servidor (recomendada)

Usa el módulo crypto de Node.js (o equivalente) para firmar el token directamente. El secreto nunca sale de tu servidor.

Node.js / VTEX IO

import { createHmac } from "crypto";

const WIDGET_SECRET = process.env.OUTFITAI_WIDGET_SECRET;
const STORE_SLUG = "mi-tienda";

function getTimeBucket() {
  return Math.floor(Date.now() / (5 * 60 * 1000));
}

function generateToken() {
  const bucket = getTimeBucket();
  const message = `${STORE_SLUG}:${bucket}`;
  return createHmac("sha256", WIDGET_SECRET).update(message).digest("hex");
}

// En la página de producto:
const garmentUrl = "https://mi-tienda.com/camisa.jpg";
const token = generateToken();
const iframeSrc = `https://outfit.tekus.co/iframe/${STORE_SLUG}?garmentUrl=${encodeURIComponent(garmentUrl)}&token=${token}`;

Opción B — Llamar al endpoint de token

Si tu plataforma no permite ejecutar crypto, llama a nuestro endpoint desde tu servidor pasando el secreto como Authorization: Bearer. Nunca hagas esta llamada desde el frontend.

fetch (server-side)

// Desde tu servidor (el secreto nunca sale del backend)
const response = await fetch(
  "https://outfit.tekus.co/api/widget-token?storeSlug=mi-tienda",
  {
    headers: {
      Authorization: "Bearer <TU_WIDGET_SECRET>",
    },
  }
);
const { token, expiresAt } = await response.json();

✦

Algoritmo del token

HMAC-SHA256(storeSlug + ":" + timeBucket, secret) donde timeBucket = Math.floor(Date.now() / 300_000). El servidor acepta el bucket actual y el anterior (ventana de ~10 min).

OutfitAI — Documentación de integración iframe

← Volver al inicio