Integre un widget de presupuesto 3D en su web

Resumen

El widget Embed de Quote3D es una solución sin código/con poco código que le permite proporcionar cotizaciones instantáneas de impresión 3D a sus clientes en cualquier sitio web. Ya sea que utilice un sitio personalizado, WordPress o Shopify, puede cerrar la brecha entre la visualización de modelos 3D y la realización de pedidos sin problemas.

Características Clave

• Visualizador de modelos 3D: Vista previa interactiva de archivos STL, OBJ, 3MF y STEP subidos.
• Precios instantáneos: Cálculo de costos automatizado basado en sus propios perfiles de materiales e impresoras.
• Multitecnología: admite FDM, SLA, SLS, SLM y MJF, cada una con su propia lógica de cálculo.
• Temas Personalizados: Adapte la estética de su marca con glassmorphism y paletas de colores personalizadas.
• Cero Configuración para Clientes: Sus clientes no necesitan conocer detalles técnicos de slicing; todo está gestionado por Quote3D.
• Plugins de plataforma: paquetes instalables para WooCommerce, PrestaShop, OpenCart, Magento y Wix, y código listo para Shopify, Webflow y Framer.
• Formularios Básico y Avanzado: pregunte solo la calidad de impresión y la resistencia en lugar de los ajustes del slicer, muestre todos los ajustes de impresión o deje que cada cliente cambie entre ambos. Se configura en el editor del widget o con la opción mode del SDK.

Lo Que Puede Hacer

• Sincronización de eCommerce en Tiempo Real: Utilice eventos 'Añadir al Carrito' para vincular cotizaciones directamente a la cesta de su tienda.
• Generación Automática de Leads: Captura los requisitos del cliente y los datos del modelo automáticamente.
• Generación de Miniaturas: Captura y almacena automáticamente capturas de pantalla del modelo para el seguimiento de la fabricación.
• Redirecciones flexibles: Dirija a los clientes a una página de destino específica tras un cálculo exitoso. El destino de la redirección debe ser una URL http o https.

Integraciones con plataformas: WooCommerce, Shopify, PrestaShop, OpenCart, Magento y más

El widget funciona en cualquier sitio web. Para estas plataformas ofrecemos paquetes instalables o código listo; lo que ocurre con el carrito depende de la plataforma:

• Quote3D para WooCommerce
• Quote3D para PrestaShop
• Quote3D para OpenCart
• Quote3D para Magento
• Quote3D para Wix
• Quote3D para Shopify

Otras plataformas y stacks personalizados

• Wix: un paquete Velo que verifica el precio del presupuesto en el backend de su sitio y lo añade al carrito de Wix Stores (plan Premium; usa el service plugin eCommerce Catalog de Wix, actualmente en beta). La línea del carrito muestra la imagen del producto portador, no la miniatura del modelo: Wix solo acepta imágenes de su Media Manager.
• Squarespace: inserte el widget con un Code Block. Squarespace no tiene API de carrito, así que los pedidos se gestionan mediante solicitud de presupuesto, factura o enlace de pago.
• PrestaShop 8: un módulo instalable que verifica el precio del presupuesto en su servidor y lo añade al carrito, con el back office de Quote3D en Sell: presupuestos, cola de producción, stock de colores, informes, descarga de modelos y ajustes.
• OpenCart 3.0, 4.0.2.2+ y 4.1: una extensión instalable que verifica el precio del presupuesto en su servidor y lo añade al carrito, con un menú Quote3D en el panel de administración: presupuestos, cola de producción, stock de colores, informes, descarga de modelos y ajustes.
• Magento Open Source / Adobe Commerce 2.4: un módulo que verifica el precio del presupuesto en su servidor y lo añade al carrito, con un menú Quote3D en el panel de administración: presupuestos, cola de producción, stock de colores, informes, descarga de modelos y ajustes.
• Webflow: inserte el widget con un elemento Code Embed. Los presupuestos no pueden añadirse al carrito de Webflow Ecommerce.
• Framer: un componente de código React para el widget. Framer no tiene carrito integrado.
• Software Personalizado: Se puede integrar en cualquier proyecto React, Vue o Vanilla JS con el SDK de JS.

Principio de Funcionamiento Técnico

El Widget Quote3D opera como un Iframe de alto rendimiento o un moderno JS SDK. Así es como funciona:

• Operación Aislada: El widget se ejecuta en su propia zona protegida (Iframe), por lo que no interfiere con el estilo de su sitio web.
• Comunicación en tiempo real: El widget transmite los resultados del cálculo a su página mediante la API 'postMessage'. Cuando utiliza el SDK, los eventos se entregan únicamente al origen que integró el widget en lugar de difundirse a cualquier receptor.
• Ajuste de Tamaño Automático: Cuando se utiliza el SDK, el widget ajusta automáticamente su altura según el contenido.

Trabajar con la API junto al widget

El widget gestiona su propio tráfico de API internamente: usted no llama a esas rutas. Cuando quiera leer o actuar sobre los mismos datos desde su código, use los endpoints públicos v2 descritos en Conceptos clave, apuntando a https://api.quote3d.com/v2 con un token Bearer real de la API y no con un identificador de token. Para reaccionar cuando un comprador añade una pieza configurada a su carrito, suscríbase al webhook widget.added_to_cart en lugar de llamar a nada directamente.

Seguridad y Verificación

El widget llama a Quote3D desde el navegador, por lo que su token es visible para cualquier persona que vea el código fuente de la página. Cree un token de widget dedicado, restríngalo al ámbito del widget y vincúlelo a los orígenes de su tienda. La rotación preserva ambas restricciones, por lo que un token de widget rotado nunca se convierte en uno de acceso total.

Archivos subidos y vistas previas

Los archivos subidos a través del widget se almacenan de forma cifrada y no son accesibles públicamente. El payload de añadir al carrito le proporciona thumbnailUrl, un enlace absoluto que se renderiza desde su propia tienda: almacénelo exactamente como lo recibió. Reescribirlo, eliminar su consulta o volver a alojarlo bajo su dominio romperá la imagen.

Precios en los que su tienda puede confiar

• Un token con alcance de widget no puede fijar un precio. Un presupuesto solicitado con él solo conserva las opciones que el cliente elige en el formulario; los precios de material, máquina y tarifas siempre proceden de sus propios perfiles.
• El webhook widget.added_to_cart informa del precio, la moneda, la cantidad y el material guardados con el presupuesto, no de lo que envió el navegador, y se envía una sola vez por presupuesto.
• El mensaje QUOTE3D_ADD_TO_CART que recibe su página procede del navegador del cliente y puede alterarse allí. Antes de cobrar, compruebe el precio con el webhook o con GET https://api.quote3d.com/v2/quotes/{quote_id}.

Alcance del token del widget

Un token creado con el alcance de widget solo puede acceder a los endpoints que la experiencia integrada realmente necesita. Todo lo demás en la API es rechazado, por lo que un token extraído del código fuente de su página no puede utilizarse contra su cuenta.

El alcance del widget permite:

• Leer la configuración de su impresora y materiales para que el formulario de presupuesto pueda mostrar sus opciones.
• Solicitar un ID de carga y subir un archivo de modelo.
• Leer y eliminar el archivo que ha subido.
• Iniciar un presupuesto asíncrono para ese archivo y consultar el estado del trabajo resultante.
• Leer un presupuesto por ID, guardar su miniatura y enviar el evento de añadir al carrito.

El alcance del widget rechaza:

• La gestión de webhooks, para que un token robado no pueda redirigir su flujo de eventos a otro servidor.
• Detalles de la cuenta, su historial de cargas, listados de presupuestos, analíticas, uso y cuota.
• La activación de licencias y cualquier otro endpoint que no figure en la lista anterior.

Vinculación de origen

Enumera las tiendas que pueden usar el token, por ejemplo https://shop.example.com. Un token de widget necesita al menos una: Quote3D comprueba la página que incrusta el widget al cargar el iframe y se niega a mostrarse en cualquier sitio que no esté en la lista.

Qué necesita la vinculación de origen de su página

• La comprobación lee el referrer que envía su navegador al cargar el iframe del widget. Ese es el comportamiento predeterminado, por lo que no se requiere nada de una página normal.
• Si tu página define referrer-policy: no-referrer, el origen no se puede verificar y el widget no carga. Usa el valor por defecto del navegador (strict-origin-when-cross-origin) u origin en las páginas que incrustan el widget.
• Las llamadas directas a la API se comprueban por separado: se rechaza una solicitud enviada desde un navegador en un sitio fuera de la lista, mientras que las llamadas de servidor a servidor, que no envían un encabezado Origin, no se ven afectadas.

Qué no puede leer un token de widget

El endpoint de configuración solo devuelve lo que el formulario de presupuesto muestra: nombres de impresoras, volúmenes de impresión, materiales, colores y límites de capa. Su base de costes (precio del material por kilogramo, coste horario de la máquina, multiplicador de coste de soportes, consumo de energía) nunca se envía al navegador; el precio se calcula en el servidor.

Sesiones de visitante

Un token de widget es público, así que un límite contado sobre el token lo compartirían todos los clientes de su tienda, y un solo script podría agotarlo y dejar fuera a los demás. Por eso el widget abre una breve sesión de visitante la primera vez que un cliente sube un archivo, y los pasos que tienen coste se cuentan por sesión.

• El widget integrado lo hace por sí solo. El código de inserción estándar no necesita cambios.
• Subir un archivo, iniciar un presupuesto, guardar una miniatura y el evento de añadir al carrito requieren una sesión. Leer su configuración, consultar el estado de un trabajo y obtener un presupuesto no, de modo que un cálculo largo nunca deja a un cliente a medias.
• Una sesión dura 30 minutos. En cada sesión, un cliente puede solicitar por hora hasta 30 subidas, 15 presupuestos, 30 guardados de miniatura y 20 eventos de añadir al carrito. Una dirección IP puede abrir hasta 20 sesiones por hora para el mismo token.
• Estas reglas solo se aplican a los tokens con alcance de widget. Un token sin alcance se trata como una integración de servidor y no recibe ninguna de estas protecciones, por lo que el token de su tienda siempre debe tener el alcance de widget.
• Si llama usted mismo a estos endpoints con un token con alcance de widget, abra primero una sesión: obtenga un desafío con GET https://api.quote3d.com/v2/widget/challenge, encuentre el número entre 0 y maxnumber para el que el SHA-256 de la sal seguida de ese número coincide con el desafío, y envíelo a POST https://api.quote3d.com/v2/widget/session. Envíe el valor devuelto en la cabecera X-Widget-Session. Una sesión ausente o caducada se responde con 401 y el código de error AUTH_005; abra una sesión nueva y repita la llamada.
• El tráfico del widget tiene un cupo por hora propio, separado del de su integración de servidor, de modo que una tienda con mucho tráfico y su propio backend no se estorban entre sí. Además, puede fijar en el panel un límite diario de presupuestos para el widget; al alcanzarlo, se pide a los clientes que lo intenten al día siguiente y usted recibe un correo.

Los tokens creados sin un alcance mantienen el acceso completo, por lo que las integraciones existentes seguirán funcionando sin cambios. Añadir un alcance es la forma de aplicar la restricción a un token.