Configuratore di finestre — 10 passaggi, un motore di regole e un’anteprima 3D, direttamente nel browser.
Questa demo live mostra un configuratore completo per un prodotto tecnico: materiale, tipo di finestra, misure, tipo di apertura, profilo, colore e decoro, ferramenta, maniglie, vetratura e accessori. Un motore di vincoli mantiene valida ogni combinazione, l’anteprima 3D segue ogni modifica e il prezzo si aggiorna in tempo reale. Così costruiamo configuratori per produttori, distributori e artigiani.
Demo live: configurala tu stesso
Scegli un materiale, imposta le misure, seleziona apertura e vetratura – annulla o ripeti ogni passaggio. Il widget viene caricato su richiesta al clic su Avvia.
Nota: Demo con catalogo di esempio integrato: prodotti, opzioni e prezzi sono illustrativi e non costituiscono un’offerta. In produzione catalogo, regole e prezzi provengono dal backend (API multi-tenant) e il risultato viene passato a shop, CRM o processo di preventivazione. In questa demo non vengono raccolti dati.
Cosa mostra questa demo dal punto di vista tecnico
- Procedura guidata in 10 passaggi con motore di vincoli: le combinazioni non valide vengono bloccate o corrette automaticamente
- Anteprima 3D in tempo reale della finestra (Three.js / React Three Fiber) – telaio, ante, profondità del profilo e vetratura seguono ogni modifica
- Prezzo in tempo reale da prezzo base, misure, opzioni e supplementi, ricalcolato a ogni passaggio
- Annulla/ripeti sull’intera configurazione, oltre a salvataggio e condivisione di una configurazione
- Multi-tenant: catalogo, regole e prezzi per cliente da un backend JSON:API
- Passaggio allo shop: la configurazione finale va nel carrello (Shopware) o in una richiesta di preventivo
- Integrato come widget Shadow DOM isolato – nessun conflitto di stile con la pagina ospite, interfaccia DE/EN
- Prestazioni: caricamento al clic, un unico file autonomo, nessuna richiesta esterna
Dal configuratore alla pipeline quote-to-order
Un configuratore come questo è il front-end di un processo quote-to-order completo. Traduce le scelte del cliente in una configurazione unica e valida, genera prezzo e distinta base e passa il risultato in modo strutturato a shop, ERP o processo di preventivazione – la stessa pipeline che usiamo per l’automazione di preventivi e CPQ.
Per la versione produttiva colleghiamo il vostro catalogo prodotti e le vostre regole di prezzo, adottiamo il vostro linguaggio visivo e configuriamo il passaggio: carrello, modulo di richiesta, preventivo PDF o inserimento diretto nell’ERP. Regole e prezzi risiedono lato server; il browser mostra solo ciò che l’API fornisce.
Altri progetti di configuratori
Configuratore 3D fotorealistico: metalli preziosi, profili, incastonature e scintillio del diamante in tempo reale nel browser.
Vedi il progetto →Pianificazione di recinzioni drag-and-drop con distinta materiali automatica, prezzo dal vivo e passaggio diretto al carrello.
Vedi il progetto →Configuratore in 5 passi con anteprima 3D in tempo reale, distinta materiali e output PDF.
Vedi il progetto →