Raamconfigurator — 10 stappen, een regelengine en een 3D-preview, direct in de browser.
Deze live demo toont een complete productconfigurator voor een technisch product: materiaal, raamtype, afmetingen, openingstype, profiel, kleur en decor, beslag, grepen, beglazing en accessoires. Een constraint-engine houdt elke combinatie geldig, de 3D-preview volgt elke wijziging en de prijs wordt live bijgewerkt. Zo bouwen wij configurators voor fabrikanten, distributeurs en vakbedrijven.
Live demo: configureer hem zelf
Kies een materiaal, stel de afmetingen in, bepaal opening en beglazing – maak elke stap ongedaan of herhaal hem. De widget wordt pas geladen als je op Starten klikt.
Let op: Demo met ingebouwde voorbeeldcatalogus: producten, opties en prijzen zijn illustratief en geen aanbod. In productie komen catalogus, regels en prijzen uit de backend (multi-tenant API) en gaat het resultaat naar shop, CRM of offerteproces. In deze demo worden geen gegevens verzameld.
Wat deze demo technisch laat zien
- Wizard in 10 stappen met constraint-engine: ongeldige combinaties worden geblokkeerd of automatisch gecorrigeerd
- Realtime 3D-preview van het raam (Three.js / React Three Fiber) – kozijn, vleugels, profieldiepte en beglazing volgen elke wijziging
- Live prijs uit basisprijs, afmetingen, opties en toeslagen, bij elke stap opnieuw berekend
- Ongedaan maken/herhalen over de hele configuratie, plus opslaan en delen van een configuratie
- Multi-tenant: catalogus, regels en prijzen per klant uit een JSON:API-backend
- Shopoverdracht: de definitieve configuratie gaat naar de winkelwagen (Shopware) of naar een offerteaanvraag
- Ingebed als geïsoleerde Shadow-DOM-widget – geen stijlconflicten met de hostpagina, UI in DE/EN
- Performance: laden op klik, één zelfstandig bestand, geen externe requests
Van configurator naar quote-to-order-pipeline
Een configurator als deze is de front-end van een compleet quote-to-order-proces. Hij vertaalt de keuzes van de klant naar een unieke, geldige configuratie, produceert prijs en stuklijst en geeft het resultaat gestructureerd door aan shop, ERP of offerteproces – dezelfde pipeline die wij gebruiken voor offerte- en CPQ-automatisering.
Voor de productieversie koppelen we je productcatalogus en prijsregels, nemen we je beeldtaal over en richten we de overdracht in: winkelwagen, aanvraagformulier, offerte-PDF of directe ERP-invoer. Regels en prijzen staan serverzijde; de browser toont alleen wat de API levert.
Andere configuratorprojecten
Fotorealistische 3D-ringconfigurator: edelmetalen, bandprofielen, steenzettingen en live diamantschittering in de browser.
Bekijk het project →Drag-and-drop hekplanning met automatische materiaallijst, live prijs en directe overdracht naar het winkelwagentje.
Bekijk het project →Configurator in 5 stappen met realtime 3D-preview, materiaallijst en PDF-output.
Bekijk het project →