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 y 3MF subidos.
• Precios instantáneos: Cálculo de costos automatizado basado en sus propios perfiles de materiales e impresoras.
• Multi-Tecnología: Soporta tecnologías FDM, SLA y SLS con lógica de cálculo específica.
• 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 para Plataformas: Plugins listos para usar para WooCommerce y Shopify.

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 de plataforma: Shopify, WooCommerce y más

El Widget Quote3D está construido con tecnologías web modernas y funciona en prácticamente cualquier plataforma. Tenemos soluciones de integración listas para sistemas populares:

Otras plataformas y stacks personalizados

• Wix: Integración avanzada a través de Velo y Elementos Personalizados.
• Squarespace: Configuración rápida a través de bloques de código.
• PrestaShop: Estructuras compatibles con el motor de plantillas Smarty.
• OpenCart: Soporte de temas modernos basado en Twig.
• 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.

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

Enumere las tiendas que tienen permitido usar el token, por ejemplo https://shop.example.com. Quote3D comprueba la página que integra el widget cuando se carga el iframe y se niega a renderizarse en cualquier sitio que no esté en la lista. Déjelo vacío y el token funcionará en cualquier lugar.

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 su página establece referrer-policy: no-referrer, el origen no podrá verificarse y el widget se negará a cargar. Utilice un token sin restricción de origen en dichas páginas.
• 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.

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.