Drag & Drop Configurator Builder
Design tab
Show/Hide Outlines: Toggles the visibility of grid borders for easier selection and adjustment.
Drag&Drop: Term used for clicking to grab an element within the Tool box and dropping/placing it within the canvas
Canvas (center): A 1:1* real-time interface that enables the user to position elements within the configurator. It displays what the end user will see. Features will always display a maximum of 2 rows inside the builder. To see what the configurator will look like with all the content loaded, use the Preview functionality.
Steps panel (left): It allows splitting the configurator experience into smaller steps, so it is easier to guide buyers in an organized and clear manner through the configuration journey.
Tool box (right): Interface menu for adding, styling, and adjusting Elements within the layout
- Elements – Holds both Features added within the Model tab as well as Content Elements (text, image, row, spacer, …) which the user can then Drag & Drop onto the canvas
- Appearance – Holds the look & feel settings for each Elements styling (Input type, item style)
- Settings – Refers to the settings where a user can edit the logic & validation of a Feature (only if it’s connected to a Data Sheet). The tab is active ONLY when the feature is selected within the canvas.
Content Elements: Elements that enable styling and placing additional information, like info boxes & images.
Theme: Themes define the base styling settings of a configurator’s look and feel as a whole.Unless defined otherwise, the configurator will use global styling settings. Styling settings can be overridden within the configurators Design tab.
Live Preview: A pop-up window which enables the user to interact with and test out/debug their configuration without the need to save.
Tags: Are used for tagging Elements within the Design tab or Options within a Datasheet.
- Tagged Elements can be manipulated with rules.
- Tagged Options can be used as a Filter for a Feature or as a Condition within a Rule.
Model tab
Filters: Multi-conditional statements that allow for narrowing down rows of Options from a Data Sheet based on the end user’s previous choices/decisions.
Copy/Paste TSV: Functionality that enables the user to copy all the data from a Data Sheet and allow them to paste it into a Spreadsheet/Excel document or vice versa.
Quantity Option: Refers to a setting that can be locally enabled per feature. Enables end users to order more than 1 of the same selected product within the feature itself.
Price option: Refers to a setting that can be locally enabled per feature. Enables pricing within the feature and if not already present adds a Price* column to its active Data Sheet. IF a Data Sheet has a Price column, and Pricing is NOT enabled, then it will not affect the total price of the configuration
Visualization tab
Visualization: Adding media to the configurator as image, 2D, 3D, 360 view, or Panorama.
Custom HTML: A Multi-layered Media Visualization that allows for custom HTML to be visible in the Media section of the Configurators Layout. Files are to be uploaded in a .zip format.
3D render (Custom HTML): A Media Visualization that allows for real-time dynamic 3D object scaling ( length, height, width ), color/material swapping, …, based on the end users’ selected Options. It is a custom-made solution with higher pricing and a longer execution time-frame.
2D render: A Multi-layered Media Visualization that allows for dynamic image swapping by connecting the image names with a specific name pattern. Image visibility is manipulated either via a name pattern or can be manipulated with Rules.
360 View: A Multi-layered Media Visualization with a complete perspective of an object or environment from all angles, allowing viewers to see it from every side or viewpoint. Layer visibility can be manipulated with Rules.
Panorama: A Multi-layered Media Visualization that allows for a wide-angle view of a physical space or landscape, typically captured in a single image, providing a broad and immersive representation of the surroundings. Layer visibility can be manipulated with Rules.
Rules tab
Trigger: Refers to a conditional setting per Rule within the configurator. It enables the Rule* to be executed ONLY when the Trigger is activated. IF a Rule has an active Trigger it will have limited/different options within the Then/Else fields
if-else-then conditional statements: – Conditions or instructions within a system that determine actions based on specific criteria; for example, if a certain condition is met, then one action is taken, otherwise, another action is executed.
Toggle compact mode: Instructions within a system to switch between compact and expanded display modes based on user preference or system requirements. Compacted rules display only the Name and Description
Settings tab
Summary: Allows for a dynamic representation of an end user’s selected options.
Dynamic product name: Can be found under the Summary section and enables users to a variable product name that changes based on user input or configuration conditions.
Summary elements: Enables the user to include some or every feature in the configuration summary. Said summary can be visible* within the cart or inside the interactive quote. The summary elements will be visible ONLY when the Product display mode is set to Standard inside of the System Settings.
Short description: Additional text information that can be visible* to the end user within the configuration. Requires a card layout that supports Short Description.
Description: Additional text information that can be added to the product and is visible* within a pop-up when the end user presses the More Info button on a feature card. The feature requires a card layout that includes the More Info button.
Additional options
Enable configuration model builder: Enables the Model tab where the user can add and manage their features and folders
Enable configurator designer: Enables the Design tab where the user can manage the visual look and feel of the configuration as well as its flow.
Enable visualization builder: Enables the Visualization tab where the user can add visualizations to the configuration.
Enable rules builder: Enables the Rules tab where the user can create and manage rules that can affect both the configuration as well as the configuration layout.
Enable calculations: Enables the Calculations tab where the user can create custom local features or select defined features from the Configuration Model Builder and set their values via javascript code
Enable versioning: Enables the Versions tab where the user can manage the configurations versions that have to be published to be visible within the Showroom module
Configurator fundamentals
Data Sheet: A list of options that can be used in a feature. Each option includes system fields like code, name, summary, description, image, and price of the option. Additionally, each option can include parameters (other data sheets) to later on filter those options later in the configurator.
Option: A term used to define a row within a Data Sheet. If the Data Sheet has a price column then the Options can also be referred to as Products.
Feature: Refers to an Interactable Element ( the user can choose or input their choice ) within the configurator. Multiple features can use the same Data Sheet and the same Feature can be added inside multiple configurators. Feature settings such as Filters, Validation and BOM are set Locally and are not shared between configurators.
Master Data: An encapsulating term used to describe any and all data which is used within the configuration (options, products, prices, …)
Guided selling: Guided Selling provides customers with customized recommendations or suggestions to assist them in making purchasing decisions. Guided Selling aims to help customers find the products that best meet their needs. You can use it as a sales assistant who asks the customer questions based on a structured process and makes recommendations based on their answers.
Folder: Structural element that allows users to group features in the configuration model and BOM.
Rules: powerful functionality where you can perform various conditional actions on the configurator, visualization or individual features.
Calculations: it is a feature whose value can be dynamically set from either other feature property, custom formula or custom TypeScript code.