Fenster­konfigurator — 10 Schritte, Regel-Engine und 3D-Vorschau, direkt im Browser.

Diese Live-Demo zeigt einen vollständigen Produktkonfigurator für ein technisches Produkt: Material, Fenstertyp, Maße, Öffnungsart, Profil, Farbe und Dekor, Beschläge, Griffe, Verglasung und Zubehör. Eine Constraint-Engine hält jede Kombination gültig, die 3D-Vorschau folgt jeder Änderung, der Preis aktualisiert sich live. So bauen wir Konfiguratoren für Hersteller, Händler und Handwerk.

Projekt besprechen Alle Konfiguratoren

Live-Demo: jetzt selbst konfigurieren

Material wählen, Maße setzen, Öffnung und Verglasung bestimmen – jeden Schritt rückgängig machen oder wiederholen. Das Widget wird erst beim Klick auf Start geladen.

Screenshot des Fenster-Konfigurators: Schrittnavigation, 3D-Vorschau eines weißen Fensters und Materialauswahl

Live-Demo · 3D im Browser

Fenster-Konfigurator starten

React + Three.js · das Widget (~350 KB gzip) wird erst beim Start geladen.

Vollbild öffnen

Hinweis: Demo mit eingebautem Beispielkatalog: Produkte, Optionen und Preise sind illustrativ und kein Angebot. Produktiv kommen Katalog, Regeln und Preise aus dem Backend (mandantenfähige API), das Ergebnis geht an Shop, CRM oder Angebotsprozess. In dieser Demo werden keine Daten erfasst.

Was diese Demo technisch zeigt

  • 10-Schritt-Wizard mit Constraint-Engine: ungültige Kombinationen werden blockiert oder automatisch korrigiert
  • Echtzeit-3D-Vorschau des Fensters (Three.js / React Three Fiber) – Rahmen, Flügel, Profiltiefe und Verglasung folgen jeder Änderung
  • Live-Preis aus Grundpreis, Maßen, Optionen und Aufschlägen, bei jedem Schritt neu berechnet
  • Undo/Redo über die gesamte Konfiguration, dazu Speichern und Teilen einer Konfiguration
  • Mandantenfähig: Katalog, Regeln und Preise je Kunde aus einem JSON:API-Backend
  • Shop-Übergabe: die fertige Konfiguration wandert in den Warenkorb (Shopware) oder in eine Angebotsanfrage
  • Einbettung als isoliertes Shadow-DOM-Widget – keine Stilkonflikte mit der Host-Seite, UI in DE/EN
  • Performance: Click-to-Load, eine einzige Datei, keine externen Requests

Vom Konfigurator zur Quote-to-Order-Pipeline

Ein Konfigurator wie dieser ist das Frontend eines vollständigen Quote-to-Order-Prozesses. Er übersetzt die Kundenauswahl in eine eindeutige, gültige Konfiguration, erzeugt Preis und Stückliste und übergibt das Ergebnis strukturiert an Shop, ERP oder Angebotsprozess – genau die Pipeline, die wir auch für Angebots- und CPQ-Automation nutzen.

Für die Produktivversion binden wir Ihren Produktkatalog und Ihre Preisregeln an, übernehmen Ihre Bildsprache und richten die Übergabe ein: Warenkorb, Anfrageformular, Angebots-PDF oder direkter ERP-Eintrag. Regeln und Preise liegen serverseitig; der Browser zeigt nur, was die API liefert.

Weitere Konfigurator-Projekte

Trauring-Konfigurator

Fotorealistischer 3D-Ring-Konfigurator: Edelmetalle, Bandprofile, Steinbesatz und Live-Diamant-Funkeln direkt im Browser.

Projekt →
Zaunkonfigurator

Drag-and-Drop-Zaunplanung mit automatischer Stückliste, Live-Preis und direkter Shop-Übergabe.

Projekt →
Doppelstegplatten-Konfigurator

5-stufiger Konfigurator mit Echtzeit-3D-Vorschau, Materialliste und PDF-Ausgabe.

Projekt →

Konfigurator für Ihre Produkte geplant?

Gespräch starten Zurück zu Konfiguratoren