Interface overview
Let’s do an overview of the configurator builder. In the top menu bar, you can switch between the different tabs, which we’ll go over in detail later on. There’s also the Preview button, which lets you test your configurator in a new window, which refreshes automatically as you work. Your progress is not saved automatically, so make sure to use the Save button regularly. Or, if you’re done with your work, click Save & Close to return to the Studio.
Design tab
The Design tab is where you’ll be doing most of the editing of the visual look and feel of your configurator. The interface is designed to be similar to a presentation editor. The viewport in the center contains the canvas where you’ll arrange your configurator’s elements. You can move and edit the elements and layout here using drag and drop, and you’ll be able to see your changes as you go.
In the Steps panel to the left of the canvas, you’ll find the individual steps of the configurator, and this works a lot like slides in a presentation. You can reorder them or add new steps, or duplicate an existing step.
You can also enable other display sizes if you want to customize how your configurator appears on different devices.
To the right, you’ll find the Toolbox. This is where you can add and configure the elements in each step of your configurator.
If an element is selected, the Appearance tab here is where you can modify the element’s input type, layout, display rules, and additional styling.
Going on to the Settings tab, this is where you bind the element to a feature from your configuration model, set filters and validation rules, manage Bill of Materials logic, and add quantity constraints.
At the bottom of the Toolbox is the Show/Hide Outline button, which toggles the layout grid.
Key terms
Appearance tab: Holds the look & feel settings for each Elements styling (Input type, item style)
Canvas (center): A 1:1 real-time interface which 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.
Content Elements: Elements that enable styling and placing additional information, like info boxes & images.
Drag&Drop: Term used for clicking to grab an element within the Tool box and dropping/placing it within the canvas
Elements tab: 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
Live Preview: A pop-up window which enables the user to interact with and test out/debug their configuration without the need to save.
Settings tab: 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.
Show/Hide Outlines: Toggles the visibility of grid borders for easier selection and adjustment.
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.
Tags: It is used for tagging Elements within the Design tab or Options within a Data sheet. 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.
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 configurator’s Design tab.
Tool box (right): Interface menu for adding, styling and adjusting Elements in the layout.
Model tab
The Model tab is where you’ll set up your configurator logic. You’ll use two main types of Blocks to build your configuration model.
The most important one is the Feature block, which is basically any feature of the product that can be configured. The Features are displayed in blue. Features have different types, including Text, Integer, Decimal, Date, Boolean, or Data Sheet. Clicking on the Feature type tag opens up a context menu with its basic settings. When you click on a Feature in the configuration model, additional available options will be displayed in the Toolbox, depending on the Feature type. These include Filters, Validation, and Bill of Materials settings.
If the Feature is connected to a Data Sheet, the Data Sheet will also be displayed here. You can easily edit it here without having to close the configurator and opening your Master Data.
These icons on the Feature blocks are a quick way to see:
- is the feature displayed in the Bill of Materials?
- can users choose the quantity of a feature?
- does the feature contribute to the price?
In this modular house example, the Wood impregnation, Pergola type, and Terrace lights Features display two of the icons.
Note that each option has a specified price in the Data Sheet.
All these Features represent options that require additional material, which needs to be listed in the Bill of Materials, and this obviously also impacts the final price of the configured product.
You can turn these settings on in the Bill of Materials section of the Toolbox.
The second block type is the Folder block. It’s used to organize and structure your configuration model.
Folder blocks are displayed in orange for better contrast from the Feature blocks. You can nest other blocks in Folder blocks in several layers.
Note that the structure you make in the model isn’t reflected in the visual configurator, it’s just to make things easier for you behind the scenes.
If you click on the black Configurator block, you can access a shortcut to the global configurator settings. These can also be found in the Settings tab.
Key terms
Copy/Paste TSV: A functionality which 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.
Filters: Multi-conditional statements which allow for narrowing down rows of Options from a Data Sheet based on the end user’s previous choices/decisions.
Quantity option: Refers to a setting which 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 which 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
In the Visualization section, you can add various types of product visualization. SaleSqueze supports images and videos, dynamic 2D renders, 360-degree views, and interactive panoramas.
Key terms
Visualization: Adding media to the configurator as image, 2D, 3D, 360-degree view, or Panorama.
Custom HTML: Multi-layered media visualization which allows for custom HTML to be visible in the Media section of the Configurator’s Layout. Files need to be uploaded in a .zip format.
3D render ( Custom HTML ): Media visualization which allows for real-time dynamic 3D object scaling (length, height, width), color/material swapping, etc., based on the end user’s selected Options. It is a custom made solution with a higher pricing and longer execution time-frame.
2D render: Multi-layered Media Visualization which 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-degree View: 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: Multi-layered media visualization which 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
In the Rules tab, you can set up any special Rules for your configurator. For example, if you wanted to display options for the pergola roof only if the customer chose a pergola with a roof, you could set such a rule here. Rules follow the structure of if-then-else conditional statements.
If statements are where you specify the conditions of the rule. In our example, the condition says that the “Pergola type matches filter”.
Clicking on the condition opens the Edit condition dialog box. In this case, the filter is set up that the Pergola type needs to be set to Pergola with roof.
Then and else are the actions executed by the rule.
Then is the action we want to happen when the condition set by the if statement is met.
Else is what happens when the condition isn’t met.
So, in our pergola example, the Pergola roof and Terrace lights options are only enabled and displayed to the customer if the condition is met and they had chosen a Pergola with roof.
You can also set a rule to be triggered by a user action. This enables additional options to be available for the rule. For instance, our modular house example uses Triggers to switch the view in the visualization. When the Exterior and Pergola steps are activated, the render of the front of the house is displayed. The top-down view is displayed when the Equipment step is activated.
A final note on rules: the order in which they are organized is important. Rules are executed from the top down, which means that rules lower down the list can override rules that are higher up the list. If you have a lot of rules, you can Toggle compact mode to collapse them for easier viewing.
Key terms
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: Option to switch between compact and expanded display modes for the list of Rules. In compact mode, only the Name and Description is displayed for each Rule.
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 available in the Then/Else fields.
Settings tab
The Settings tab is where you can access a number of meta controls, like enabling certain toolsets within the configurator builder, as well as edit basic information like the configurator’s name, related data sheet, and other metadata.
In the Summary section, you can customize how the product summary will appear on the quote. You can add a dynamic display name to better reflect the choices your customer made when configuring their product. Select the elements that you would like to list in the summary and add custom labels, if you need to. This is where you can add any Quantity constraints to your products.
If there is a minimum or maximum quantity per order, if the quantity is fixed, or if there is a quantity multiple required. For example, if you only want to sell your product in sets of two, enter “2” in the Quantity multiple field.
Similarly, if you want to override Pricing parameters from the Data Sheet, you can do so in the Pricing section.
The description fields found in the Content section are relevant if you’re using the Guided Selling mode for your configurator.
Most of the sections in Settings can also be found in the Model tab.
Key terms
Summary: Allows for a dynamic representation of an end users selected options.
Dynamic 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. This summary is displayed within the cart or in the interactive quote.
The summary elements will be visible ONLY when the Product display mode is set to Standard in the System Settings.
Short description: Additional text information which can be visible to the end user in the configurator.
Requires a card layout which supports Short Description.
Description: Additional text information that can be added to the product and is displayed in a pop-up when the end user clicks/taps the More Info button.
Requires a card layout which 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 visual look and feel of the configuration as well as its flow.
- Enable visualization builder: Enables the Visualization tab where the user can add a visualizations to the configuration.
- Enable rules builder: Enables the Rules tab where the user can create and manage rules which 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 set their values via javascript code
- Enable versioning: Enables the Versions tab where the user can manage the configurations versions which have to be published to be visible within the Showroom module