Request & Quotation Process
← All projectsSIBA Window Configurator

- ClientSIBA Kozijnen
- View liveconfigurator.sibakozijnen.nl
An interactive design tool that brings the entire journey from customer inquiry to quotation into one system, featuring a live drawing program, automatic price calculation, and an internal quotation module.


From manual quotations to a complete system
At SIBA Kozijnen, every quotation was drafted by hand. With revisions or changes, the process largely started over—even for inquiries that never led to an order. A lot of manual work, for an uncertain outcome.
In its place came a configurator that works on both sides of the table. On the front end, the customer designs their own window frame: choosing a type, entering dimensions, drawing panel divisions on an interactive canvas, and selecting material and color. The system validates each step and displays a price indication in real time.
On the back end, SIBA picks up that same configuration. After measuring or adjusting details, they modify the design in the same tool. The quotation is automatically generated based on a price calculation that accounts for all material costs, surcharges, and margins. A new version of a quotation is produced in no time.
At the heart of the tool is a custom-built SVG rendering engine: a live drawing program in which the window frame changes in real time as the user adds panels, adjusts dimensions, or modifies profiles. The customer literally watches their window frame take shape on screen.
Efficiently generating quotations without manual work
The quotation process was time-consuming and error-prone. Every adjustment to a window frame required renewed contact between customer and salesperson, meaning it could take weeks before a final quotation was ready. The challenge was to fully automate this without sacrificing accuracy:
- Live drawing software in the browser. Customers need to be able to draw a window frame with panel divisions, opening directions, and dimensions—without any technical knowledge. Behind that simple interface sits an SVG rendering engine that performs geometric calculations and visualizes the result in real time.
- One tool for customer and company. The configurator needs to work not only as a customer-facing inquiry tool, but also as an internal instrument that SIBA can use to adjust configurations and generate quotations. Two usage contexts, one system.
- Automatic price calculation with full cost logic. With every change to the design, the price is recalculated. The engine accounts for material costs, finishing surcharges, installation costs, and margins, so the generated quotation is accurate from the start.
- Installation calculator. An internal module that automatically calculates installation time per configuration. SIBA uses this for workshop planning and capacity estimation.
The solution
A configurator that replaces the entire quotation process with a self-service experience:
- SVG rendering engine. A custom-built live drawing program in which window frames change in real time with every adjustment.
- Dual-sided platform. Customers submit their inquiry, SIBA adjusts and generates quotations in the same environment.
- Dynamic pricing engine. Full cost calculation including materials, surcharges, installation, and margins.
- Installation calculator. Automatic calculation of installation time per window configuration.
- Phased delivery. First the configurator and drawing tool, then price calculation and installation module.
From inquiry to quotation in one system
The entire journey from customer inquiry to quotation now lives in one system. Where every quotation and every revision used to be manual work, new versions are now generated automatically. The inquiry comes in exactly as the customer wants it—SIBA only needs to adjust after measuring.
The project has since been expanded to include doors and sliding patio doors, and the installation calculator has been further developed with additional categories.
Stack
Built with
- Next.jsFrontend Framework
- ReactUI Library
- Node.jsBackend
- PostgreSQLDatabase
- GCPCloud Infrastructure
- TailwindStyling