Configurator for gates and fences
A customer who can't quickly understand what a product will look like and how much it will cost will delay their decision or leave. This is especially critical for complex products like gates or fences, where dimensions, materials, and configuration are crucial.
An online configurator solves this problem: the user assembles the product themselves, immediately sees the result, and understands the budget. This shortens the process from interest to request and reduces the workload on managers.
AVADA MEDIA develops gate and fence configurators in 2D, 3D, and combined formats to meet specific business needs.
What does the configurator look like: formats and options
Gate and fence configurators are available in three formats, and the choice between them depends on the complexity of the product, the audience, and the project budget.
The 2D configurator is a flat visual editor with a settings panel. The user sees a schematic representation of the design at the front and controls the parameters via the menu on the left or below. This fast and easy-to-integrate format is suitable for companies with a large catalog where it's important to cover as many items as possible without a high graphics budget.
The 3D configurator is based on a 3D model. Gates or fences can be rotated, zoomed in, and viewed from different angles – both from the street and from inside the property. Changes in material or color are reflected instantly, taking into account lighting and surface texture. This format provides maximum immersion and is especially effective for premium products and complex forged structures.
A combined 2D/3D configurator combines both approaches. The user configures parameters in a user-friendly 2D interface, and the result is displayed in a 3D preview in real time. This is the optimal option when both ease of use and a visually compelling final result are important.
What elements does the gate and fence configurator consist of?
The configurator can cover the entire product range at once or be divided into individual tools – for gates or fences. In any case, each configurator is built from standard blocks.
Design type. Depending on the configurator format, the user can choose:
- in the gate configurator: swing, sliding, sectional, automatic
- In the fence configurator: solid corrugated sheeting, welded rod sections, euro picket fencing, forged elements, and a combination option with brick pillars
- in the combined configurator: both blocks are available within a single interface
Each type of construction is represented by a separate model or diagram.
Material and coating. The user can choose from several options:
- metal with a polymer coating
- imitation wood
- For forged items – surface treatment type: matte black, patina, forged effect
Color. The palette is based on RAL, the industrial color standard. The most popular options are:
- RAL 7016 – anthracite
- RAL 9005 – black
- RAL 6005 – dark green
- RAL 8017 – brown
- RAL 9003 – white
The user clicks on the sample and the entire structure is repainted in real time.
Dimensions and sections. Parameters are entered manually or selected using a slider:
- opening width
- height of sections
- number of sections
The configurator recalculates the final cost with each change.
Automation and accessories. An optional unit, especially suitable for gates. Available options:
- drive type: linear, lever, barrier
- intercom and video camera
- gate
In the combined configurator, this block is activated only when the corresponding design type is selected.
Functional capabilities
Interactive viewing. In 3D, the user rotates the model and evaluates the design from any angle. In 2D, the user can switch between front, side, and perspective views.
Real-time color palette. Any color or material change is applied instantly, without reloading the page.
Automatic cost calculation. Every time parameters are changed, the system recalculates the final price, taking into account materials, automation, and dimensions.
Saving and sending the configuration. The user saves the assembled version, receives a PDF specification, or sends the completed configuration to the manager directly from the interface.
Mobile-friendly. The configurator works seamlessly on smartphones and tablets.
Additional features
Background context. The configurator can also be expanded with a photo preview feature. The user uploads an image of their home or property and overlays the chosen gate or fence option.
CRM integration allows for automatic transfer of selected configuration parameters to the sales department. Managers see the completed specifications before the first call.
Synchronization with the price list keeps prices up-to-date: when the cost of materials changes, the configurator automatically recalculates the results.
Enabling an AI assistant expands the configurator's capabilities without increasing the workload of managers. The assistant provides recommendations for fencing type selection, suggests suitable color combinations, and answers questions in real time.
Additionally, AI can generate visualizations: a ready-made rendering of a gate or fence in the context of a specific site, taking into account the style of the house, the landscape, and the chosen configuration. The client sees not just a model, but the final image of their property.
The configurator can be integrated into an existing website, landing page, or corporate portal without reworking the main structure.
Where it is applied
- On websites of manufacturers and suppliers of gates, fences, and metal structures, the configurator increases time on page and reduces the number of irrelevant requests.
- In online building supply stores, it serves as an additional sales too – the customer assembles the kit themselves and immediately places an order.
- In showrooms and at exhibitions, a 3D configurator on a tablet or screen allows customers to see options interactively – without physical samples.
- In construction and architectural firms, the configurator is used at the approval stage: the client sees the exact visual result before work begins.
Technical implementation
The gate and fence configurator is being developed as a web application that runs in a browser without the need for additional software. Depending on the project format, different technologies and implementation approaches are used.
The Three.js library is the foundation of the 3D configurator's visualization. It enables rendering of 3D models in the browser, as well as real-time processing of lighting, shadows, and material textures. Models are prepared in GLTF/GLB or Spine formats, depending on the configurator type and animation requirements. GLTF/GLB formats are optimized for the web and ensure fast loading without loss of detail – the standard choice for 3D configurators. Spine is used for applications requiring smooth 2D animation: transitions between structural states, gate openings, and section changes.
Cost calculation, color application and material changes are performed on the client's side.
Development stages
- Analytics and design. The product structure is formed: which parameters are configurable, how they are interconnected, what combinations are acceptable. At the same time, UX/UI designers develop the interface: the control panel, the logic for switching between settings blocks, and the behavior on mobile devices.
- Preparing models.
3D models for the configurator can be obtained in three ways: developed by our team from scratch, provided by the client in a ready-made form, or purchased from stock sites and customized to meet the project's requirements. In any case, each structural element – gate panels, posts, fence sections, decorative elements, and hardware – is prepared and optimized for proper browser operation.
Each object must scale correctly, blend with other elements, and still be easy to render in a browser. Separate texture maps are created for each material and coating: a color map, a roughness map, and a normal map. These maps ensure that metal appears metallic, and powder coating appears matte or glossy, depending on the selected option. A set of vector images for each combination of elements is prepared for the 2D configurator, taking into account all color palettes and construction types.
The broader the product line, the greater the volume of graphics that must be prepared and linked to the interface logic. - Frontend and backend development. Frontend and backend development are carried out in parallel. Frontend developers integrate models into the interface: they configure interactivity, link visual changes to the control panel, and integrate the cost calculator. Backend developers build server-side logic: storing configurations, processing requests, and connecting to the price list and external systems.
- Administrative panel development. The client uses the admin panel to manage the catalog independently, without developer intervention: adding and editing models, updating prices, and customizing available element combinations and color palettes. The admin panel is developed as a separate module and can be included in the project as needed.
- Testing and optimization. The configurator is tested on various devices and browsers, and loading speed is optimized.
- Integration. If necessary, we can connect the customer's CRM, price list, or other systems.
Cost of developing a fence and gate designer
The final cost depends on the configurator format, the number of customizable elements, the volume of prepared models, and the required integrations.
| Configurator type | Development period | Price |
|---|---|---|
| 2D configurator, basic | 5-7 weeks | from $5,500 |
| 2D configurator, extended | 7-8 weeks | from $7,000 |
| 3D configurator, basic | 2-3 months | from $9,000 |
| 3D configurator, extended | 3-4 months | from $12,000 |
| Custom development for the customer`s catalog | by agreement | upon request |
Prices and deadlines are approximate – the final project parameters are determined after analyzing the customer’s technical specifications and product line.
Do you want an online configurator for your catalog?
Tell us about your product – we'll suggest a suitable format, estimate the scope of work, and prepare a commercial proposal.
FAQ
-
Is it possible to integrate the configurator into an existing website?
Yes. The configurator is developed as a separate module and can be integrated into any CMS or custom website without reworking the main structure. The interface is individually adapted to the client's design and corporate identity.
-
What do I need to provide to start development?
To get started, a product catalog with descriptions of design types, size ranges, and color options is sufficient. Drawings or 3D models, if available, will speed up the graphics preparation process. If we don't have ready-made materials, we'll address this during the analysis phase.
-
How do I update the configurator if the product range changes?
The configurator is built on a modular architecture: adding a new gate model, color, or section type is possible without redesigning the entire app. We can also customize the administrative panel, allowing customers to manage their catalog independently.
-
Will the configurator work correctly on smartphones?
Yes. Mobile adaptation is part of the core development. The interface and control logic are optimized for touchscreens – the smartphone user gets the same functionality as the desktop user.
-
Do you provide support after launch?
The configurator is being developed as a stable, ready-to-use solution – once launched, it operates independently and requires no ongoing maintenance. Support as a separate service is available should the catalog need to be significantly expanded in the future, new design types added, or additional integrations enabled.
