Configurateur de fenêtres — 10 étapes, un moteur de règles et un aperçu 3D, directement dans le navigateur.
Cette démo live montre un configurateur complet pour un produit technique : matériau, type de fenêtre, dimensions, mode d’ouverture, profil, couleur et décor, ferrures, poignées, vitrage et accessoires. Un moteur de contraintes garde chaque combinaison valide, l’aperçu 3D suit chaque changement et le prix se met à jour en direct. C’est ainsi que nous construisons des configurateurs pour fabricants, distributeurs et artisans.
Démo live : configurez vous-même
Choisissez un matériau, définissez les dimensions, sélectionnez ouverture et vitrage – annulez ou rétablissez chaque étape. Le widget se charge à la demande au clic sur Démarrer.
Remarque : Démo avec un catalogue d’exemple intégré : produits, options et prix sont illustratifs et ne constituent pas une offre. En production, catalogue, règles et prix viennent du backend (API multi-locataire) et le résultat est transmis à la boutique, au CRM ou au processus de devis. Aucune donnée n’est collectée dans cette démo.
Ce que cette démo montre techniquement
- Assistant en 10 étapes avec moteur de contraintes : les combinaisons invalides sont bloquées ou corrigées automatiquement
- Aperçu 3D en temps réel de la fenêtre (Three.js / React Three Fiber) – cadre, ouvrants, profondeur de profil et vitrage suivent chaque changement
- Prix en direct calculé à partir du prix de base, des dimensions, des options et des suppléments, recalculé à chaque étape
- Annuler/rétablir sur toute la configuration, plus enregistrement et partage d’une configuration
- Multi-locataire : catalogue, règles et prix par client depuis un backend JSON:API
- Transfert boutique : la configuration finale va dans le panier (Shopware) ou dans une demande de devis
- Intégré comme widget Shadow DOM isolé – aucun conflit de style avec la page hôte, interface DE/EN
- Performance : chargement au clic, un seul fichier autonome, aucune requête externe
Du configurateur à la pipeline quote-to-order
Un configurateur comme celui-ci est le front-end d’un processus quote-to-order complet. Il traduit les choix du client en une configuration unique et valide, produit prix et nomenclature, et transmet le résultat de façon structurée à la boutique, à l’ERP ou au processus de devis – la même pipeline que nous utilisons pour l’automatisation des devis et du CPQ.
Pour une version de production, nous connectons votre catalogue produits et vos règles de prix, reprenons votre identité visuelle et configurons le transfert : panier, formulaire de demande, devis PDF ou saisie directe dans l’ERP. Règles et prix restent côté serveur ; le navigateur n’affiche que ce que l’API fournit.
Autres projets de configurateur
Configurateur 3D photoréaliste : métaux précieux, profils de jonc, sertissages et éclat de diamant en direct dans le navigateur.
Voir le projet →Planification de clôture en glisser-déposer avec liste de matériaux automatique, prix en direct et transfert direct vers le panier.
Voir le projet →Configurateur en 5 étapes avec aperçu 3D en temps réel, liste de matériaux et sortie PDF.
Voir le projet →