Try-on virtual en la página de producto: cómo integrarlo sin SDK

La página de producto es donde el cliente decide. Lee el nombre del tono, mira una foto de estudio, revisa reseñas y, en maquillaje, se queda con la misma duda de siempre: “¿este tono me queda?”. Poner un try-on virtual en la página de producto responde esa pregunta en segundos, sin desviar al usuario a otra app y sin pedirle que instale nada. En este artículo explicamos cómo estructurar esa integración cuando el try-on funciona a partir de una foto y se entrega como API.

Por qué la PDP es el lugar natural del try-on

En una tienda de belleza, la fricción no está en el carrito: está en la incertidumbre de tono. El usuario compara swatches, busca videos, pregunta en redes y muchas veces abandona. Cuando la prueba ocurre dentro de la misma pantalla donde está el botón de compra, se elimina el salto de contexto.

Hay tres razones concretas para priorizar la PDP:

• Intención alta. Quien llega a la ficha ya eligió categoría y marca; solo falta el tono.
• Contexto claro. El try-on se aplica sobre productos reales, no sobre una demo genérica.
• Medición limpia. Es fácil comparar conversión y devoluciones entre sesiones con y sin prueba.

El problema de las soluciones basadas en SDK

Muchos equipos asumen que un try-on exige cámara en vivo, un SDK pesado y permisos de navegador. Eso trae costos reales: tiempo de carga en la ficha, incompatibilidades en navegadores móviles, revisión de seguridad para librerías de terceros y un flujo que se rompe cuando el usuario niega el acceso a la cámara.

MaIA Try-On toma otro camino: el usuario envía una foto, el producto se renderiza sobre esa imagen y la imagen regresa lista para mostrar. Es una llamada HTTP, no una capa de gráficos en el navegador. Si quieres entender la comparación en detalle, la desarrollamos en prueba virtual por foto vs AR try-on.

Cómo se arma un try-on virtual en la página de producto

La arquitectura es más simple de lo que parece porque el trabajo pesado ocurre del lado del servidor.

1. Captura de la foto

Un botón en la ficha —“Pruébalo en tu foto”— abre un modal con dos opciones: subir una imagen o tomar una selfie con el input nativo del celular. No hace falta stream de video ni librerías de visión en el cliente. Vale la pena mostrar en ese mismo modal una guía breve: rostro de frente, luz natural, sin filtros, maquillaje ligero o nulo en la zona a probar.

2. Llamada a la API

Tu backend recibe la imagen, la envía a la API junto con el identificador del producto o tono y recibe la imagen renderizada. Al mantener la llamada en el servidor, la clave de API nunca queda expuesta en el front y puedes aplicar tus propias reglas de rate limit, caché y registro.

3. Retorno y siguiente paso

La imagen vuelve al modal. Aquí es donde se gana o se pierde la conversión: junto al resultado debe estar el selector de tonos de esa misma familia, el precio y el botón de agregar al carrito. Si el usuario cambia de tono, se repite la llamada con el nuevo identificador. El resultado no es una curiosidad visual, es un atajo hacia la compra.

4. Catálogo calibrado

El paso que más impacta la percepción de calidad no es técnico, es de producto: las paletas se calibran contra los productos reales de la marca dentro de un proyecto. Un labial mate y uno con brillo no se comportan igual sobre una foto, y el cliente nota de inmediato cuando el render no corresponde al producto que va a recibir. Ese trabajo de calibración se hace una vez por línea y se reutiliza en todos los canales.

Qué mostrar alrededor del try-on

Un try-on aislado ayuda, pero rinde mucho más cuando está acompañado de contexto sobre la persona.

Perfil de belleza a partir de una selfie

Con MaIA Scan puedes obtener, desde la misma foto, un perfil con tono y subtono de piel, tipo y condición de piel, atributos de cabello y un nivel de confianza por campo, todo en JSON. Ese perfil permite ordenar el selector de tonos de la PDP empezando por los más compatibles, en vez de mostrar veinte opciones en orden de catálogo. El modelo fue entrenado con piel brasileña, lo que importa cuando tu base de clientes es diversa.

Recomendación conectada al catálogo

Cuando el usuario prueba un tono y no lo convence, la salida natural es una recomendación, no un callejón sin salida. MaIA Beauty Advisor lee el perfil de belleza y sugiere productos de la propia marca en la ficha, en el chat o en WhatsApp, manteniendo la conversación dentro de tu ecosistema.

Métricas para evaluar la integración

Antes de lanzar, define cómo vas a medir. Sugerencias de instrumentación:

• Tasa de apertura del modal sobre visitas a la PDP: mide si el llamado a la acción es visible y claro.
• Tasa de envío de foto entre quienes abren el modal: si cae, revisa el copy de privacidad y las instrucciones.
• Tonos probados por sesión: indica si el selector dentro del modal está funcionando.
• Conversión con try-on vs sin try-on, segmentada por categoría.
• Devoluciones y cambios por “tono equivocado”, comparadas antes y después.

Estas métricas también sirven para decidir dónde expandir después: carrito, campañas de e-mail, landing de lanzamiento o atención por WhatsApp. Como todo ocurre por API, el mismo backend que alimenta la PDP alimenta cualquier otro canal.

Privacidad y expectativas del usuario

Sé explícito en el modal: para qué se usa la foto, cuánto tiempo se conserva y cómo el usuario puede repetir la prueba con otra imagen. Un texto corto y honesto aumenta la tasa de envío más que cualquier animación. Y deja claro que el resultado es una simulación visual del producto sobre una foto, no una promesa exacta de color en cada condición de luz.

¿Listo para probarlo en tu ficha de producto? Crea tu cuenta y genera tu clave en la documentación de la API, o habla con el equipo de B4A para calibrar las paletas de tu catálogo.