Centro de ayuda para desarrolladores

Lleva Vizzoro a tu sitio web.

Todo lo que un implementador necesita para conectar un catálogo autorizado, abrir el visualizador y entender el flujo de producción.

Comienza aquí

Vizzoro permite que los clientes coloquen un material real de tu catálogo en la foto de su espacio. Tu equipo gestiona productos en la app Vizzoro. Tu sitio carga el visualizador con un pequeño SDK de JavaScript.

1. Prepara el catálogo

Crea un producto de suelo con textura, imagen y dimensiones físicas en la app Vizzoro.

2. Autoriza tu sitio

Añade el hostname exacto en Integración y crea una clave pública para ese dominio.

3. Añade el SDK

Añade el script y llama a Vizzoro.start desde la página o el botón del producto.

Instala el SDK

Añade este código una vez en la página donde el cliente puede abrir el visualizador. La clave pública está diseñada para usarse en el navegador.

<script src="https://vizzoro-app.web.app/sdk.js" data-key="vz_pk_..."></script>
<script>
  Vizzoro.start({
    category: "floor",
    productId: "PRODUCT_ID",
    locale: "es"
  });
</script>

Sustituye PRODUCT_ID por el ID del documento de producto en el catálogo Vizzoro. Usa el mismo dominio autorizado en la app.

Referencia del SDK

Vizzoro.start abre un visualizador accesible a pantalla completa. Una llamada nueva reemplaza el visualizador actual.

Vizzoro.start({
  category: "floor",
  productId: "PRODUCT_ID",
  locale: "pt",
  onLeadCapture: ({ productId, jobId }) => {
    console.log("Visualization completed", productId, jobId);
  }
});

categoryobligatorio

Categoría del material. El MVP actual admite floor.

productIdobligatorio

ID de un producto en el catálogo autorizado.

localeopcional

en, pt o es. Si se omite, Vizzoro usa el idioma del navegador.

onLeadCaptureopcional

Callback tras una visualización completada. Recibe productId y jobId.

Claves y dominios autorizados

Una clave pública de Vizzoro puede estar en el código del navegador porque tiene una finalidad limitada. Abre el visualizador solo desde un dominio aprobado.

Crea claves solo después de añadir todos los hostnames de producción y pruebas.
Vizzoro valida la clave y el dominio del sitio cada vez que se abre el visualizador.
Nunca coloques credenciales de servicio o claves no publicables en un sitio web.
Crea una clave nueva y elimina la anterior si un dominio cambia de propietario.

Úsalo en una página de producto

Coloca la llamada Vizzoro.start en el botón o interacción que el cliente usa para visualizar un material. Usa el ID del producto mostrado en esa página.

Páginas de producto

Usa el ID de producto de tu plataforma de ventas para relacionar cada página con el producto correspondiente en el catálogo Vizzoro.

Botones personalizados

Llama a Vizzoro.start desde cualquier botón, tarjeta o llamada a la acción. El visualizador se abre sobre la página actual.

Solución de problemas

El visualizador no abre

Confirma que el script SDK se carga sin error y que Vizzoro.start recibe un productId.

El dominio no está autorizado

Añade el hostname exacto en Integración. Incluye example.com y www.example.com si tu sitio utiliza ambos.

El producto no carga

Confirma que el ID pertenece a la misma organización Vizzoro que la clave pública.

El render falló

Usa una foto JPG o PNG normal de hasta 25 MB. Confirma que el producto tiene textura y dimensiones.

¿Necesitas ayuda de implementación?

Envía la URL de la página, el error del navegador, el ID del producto y el hostname autorizado. Así nuestro equipo puede reproducir la integración rápidamente.

Contactar soporte Vizzoro