Online door configurator: demo with live pricing | JSON Crew

Door configurator

A front door configurator demo: design, size, colour, glazing, handle and lock, with the preview and price changing live.

Live demo · in your browser

2D door configurator: design, size, colour and lock with a live preview and price

You put the front door together step by step: leaf design, size and opening direction, colour, side panels and transom, handle with lock, plus house number and canopy. The 2D preview and the indicative price update after every change, and the “Open / close the door” button swings the leaf open. In the final implementation we connect your catalogue and pricing rules.

Online door configurator: how to design it for sales, not for the catalogue

This guide is for door manufacturers and distributors who are considering a door configurator on their own website and wondering where to start. We answer the questions that come up before a quote: what data to prepare, in what order to guide the customer, how to show the price and how to tell whether the tool is working.

Where to start: the data to have before the first conversation

What takes the most time in the project is not programming but organising your product range. The tool needs every option to have a name, a price or surcharge and clear information on what it can be combined with. If today this knowledge lives in a PDF price list and in your salesperson's head, the first step is to move it into a spreadsheet.

Before talking to a contractor, it is worth gathering:

  • a list of door models and types with base prices for standard widths,
  • finishes (lacquer, veneer, laminate) with surcharges and a colour palette,
  • hardware: handles, hinges, locks, cylinders, with information on what is standard,
  • frame types and the range of wall thicknesses each one fits,
  • a list of exceptions that your sales team catches by hand today (“we don't make this model in veneer”),
  • photos or samples of the finishes, from which the colour tiles and textures in the preview will be made.

The list of exceptions is the most valuable item. It is the exceptions that become compatibility rules, and the rules determine the scope of work.

Order of steps: what the customer chooses first

The order of choices affects how many people make it to the end. A good rule: first the decisions that narrow down the rest, then the ones the customer is happy to change again and again. In the demo above, the first step is the leaf design, followed straight away by the size and opening direction, because they determine the price of the construction and whether a transom fits at all.

A typical path in an interior door configurator looks like this:

StepWhat the customer choosesWhy at this point
1Door type and installation systemBlocks or unlocks the next options
2Size and opening directionAffects the base price and the available models
3Finish and colourThe most emotional choice; customers keep coming back to it
4Handle, lock, accessoriesSmall surcharges, but they raise the order value
5Summary and enquiryThe configuration reaches the salesperson together with the contact details

With exterior doors, technical parameters come into play, such as thermal insulation, burglar resistance class or glazing. In that case it is worth considering a separate path instead of adding more and more steps to a single one.

How to show the price without losing the customer or your margin

Door manufacturers often worry that a price on the website will scare customers off or reveal their whole price list to competitors. There are several solutions, and you don't have to pick one for all audiences. The price can be shown as a “from” amount, as a range or only after the visitor leaves contact details.

In practice, a mixed approach works well. A retail customer sees an indicative price that updates after every change, as in the demo. The surcharge for each option is visible when choosing, so customers can judge for themselves whether veneer is worth the difference over lacquer. The final amount, including installation and measuring, appears in the salesperson's quote. It is important that the summary states clearly what the price includes and what it does not.

Selling sets is a separate issue. For a flat or a house, customers rarely buy just one door. Being able to add several door leaves to one enquiry, each with a different size or opening direction, shortens the conversation with the salesperson and shows the size of the order straight away. A shared finish can then be chosen once for the whole set.

Compatibility rules in a door configurator: what to write down before the code is written

Every rule takes one of three forms: an option blocks another, an option forces another, or an option changes the price of another. The demo shows an example of forcing: the fingerprint reader is built into the pull handle, so choosing the reader with a lever handle changes the handle to the vertical pull handle. A real catalogue tends to have many more dependencies like this.

When writing the rules down, mark straight away which ones change often (e.g. a colour's availability in a given season) and which follow from the construction and will not change for years. The former should be editable by your team; the latter can stay in the application logic. This split simplifies maintenance and reduces the number of change requests for minor fixes.

What to watch out for during implementation

The most common problems come not from the technology but from decisions made at the start of the project:

  • Too many steps at the start. A first version with the full catalogue and every exception delays the launch. It is better to start with your best-selling line.
  • Colours without control. A colour on screen always differs from the sample. It is worth adding a short note on possible differences and an option to order a sample card.
  • A form that asks for everything. The configuration is already in the enquiry, so the final form can be limited to contact details, location and timing.
  • No data owner on the company side. Someone has to keep prices and options up to date. Without that person, after six months the configurator shows an outdated price list.

How to measure whether a door configurator pays off

“Customers are clicking” is not enough on its own. From day one, it is worth collecting a few simple metrics: how many people start a configuration, at which step they most often drop out, how many configurations end in an enquiry and what share of enquiries turn into orders. Comparing this with the period before the implementation shows whether the quality of leads has changed, not just their number.

Drop-off data is valuable in itself. If most people drop out when choosing the frame, that is a sign that this step needs a better description or illustration, not that the configurator does not work. You can use the same insight in sales training and product descriptions.

It is also worth checking which combinations customers choose most often. This gives production and purchasing a simple hint on which foils and colours to keep in stock and which finishes can be dropped without hurting sales.

To see how the same pattern looks in other industries, browse the whole configurator showroom. You can check the indicative scope and budget of your own project in the configurator cost estimator, and we describe the details of working with us on the configurators and online presentations page.

Frequently asked questions

Will a customer buy a door based on a 2D preview, or do you need 3D or AR?
For a first enquiry, a clear 2D preview with the correct colour and door type, as in this demo, is usually enough. The customer wants to see the direction, not photorealism. A 3D render or an AR preview in the room makes sense for premium and concealed doors, where the “disappears into the wall” effect matters. In that case we treat it as a separate module and decide during discovery whether the budget pays off.
Made-to-measure doors, non-standard openings and frames. Can they be priced automatically?
The configurator prices typical sizes and the standard surcharges for a made-to-measure variant. For truly non-standard openings we leave a “contact us for an exact quote” path: the customer finishes with an indicative amount and a configuration, and the salesperson finalises the rest after measuring. Trying to cover every exception in code is the road to a never-ending project.
Are rules like “fingerprint reader only in the pull handle” in the CMS panel or always in the code?
We design simple dependencies (option X forces Y, option X blocks Z) to be editable in the panel, so your team changes them on its own. More complex validations of several variables with exceptions stay in the code, but we name them during discovery, so that it is clear what is a one-off cost and what widens the scope with every change.
We have hundreds of foil and RAL combinations. How do we handle that in one configurator?
We keep colours and decors as data in the panel, not as separate code for each variant. That way, adding a new foil is an entry, not a deployment. In the preview we show the sample colour, and for finishes where texture matters (veneer, wood grain) we add real textures. We handle the full RAL palette with a filter and a search box, so the customer does not have to scroll through hundreds of tiles.
We sell to retail customers and through architects or dealers. One configurator or two?
Usually one configurator with two paths. A retail customer finishes with an enquiry and contact details. An architect or dealer gets a login, their own prices, the option to configure several doors for one project and a separate PDF template. The architecture is shared, while the interface and discount rules diverge. We set the boundary during discovery.
Integration with a warehouse or ERP, and a PDF for the order. When does it make sense?
We almost always include PDF generation with the configuration, because it shortens the first steps by several days. Integration with an ERP or warehouse makes sense when material availability genuinely affects sales, or when you want an order from the configurator to go straight to production. If stock levels are stable and the manual process works, we add the integration later, so as not to push up maintenance costs unnecessarily.